s Guías Prácticas de Código Accesible
Escudo de la República de Colombia

Intrucciones de Formulario

¿Por qué son importantes las instrucciones dentro de un control de formulario?

Suministrar instrucciones para ayudar a los usuarios a comprender cómo completar los formularios y a utilizar los controles de formulario individuales, es una pauta básica de accesibilidad y de usabilidad que debe tener un sitio web.

Si se realizan las instrucciones correctamente del código, estas instrucciones van a permitir que los lectores de pantalla lean en voz alta los controles de formulario, además si los ejemplos suministrados de como completar un campo del formulario son claros, facilita que una persona con alguna discapacidad cognitiva o un retraso mental, pueda entender cómo llenar el formulario.


Instrucciones usando labels
Ejemplo:
Fragmento de Código: 
<label for="datebirth">Fecha de Nacimiento (MM/YYYY): </label> <input type="text" name="datebirth" id="datebirth">

Instrucciones usando aria-labelledby
Ejemplo:
MM/YYYY
Fragmento de Código: 
<label id="expLabel" for="datebrith" tabindex="-1">Fecha de Nacimiento:</label>
<span>
    <input type="text" name="datebrith" id="datebrith" aria-labelledby="expLabel expDesc">
    <span id="expDesc" tabindex="-1">MM/YYYY</span>
</span>

Instrucciones usando aria-describedby
Fragmento de Código: 
<label id="expLabel" for="datebirth">Fecha de Nacimiento:</label>
<span>
    <input type="text" name="datebirth" id="datebirth" aria-labelledby="expLabel" aria-describedby="expDesc">
    <span id="expDesc">MM/YYYY</span>
</span>

Instrucciones usando Placeholder text
Ejemplo:
Fragmento de Código: 
<div>
    <label for="search">Buscar:</label> <input type="text" name="search" id="search" placeholder="ej. Accesibilidad">
</div>
<div>
    <label for="email">Correo Electrónico : </label> <input type="text" name="email" id="email" placeholder="gpca@example.com">
</div>