Desde la implantación de la web 2.0, hace años, los formularios constituyen la principal forma de intercambiar información en la web. Desde los típicos formularios de contacto, a los de registro, pasando por los de comentarios o las configuraciones de características de productos personalizables.

Por eso, incluso viéndolo desde la perspectiva más egoísta, es importante conseguir que los formularios sean accesibles para el mayor número de personas. Y existen varias consideraciones que deberíamos tener en cuenta a la hora de implantarlos.

Etiquetado semántico HTML5

HTML5 brinda una serie de etiquetas que tienen significado por sí mismas y que, usándolas de la forma adecuada, permiten conseguir resultados más accesibles.

Etiquetar los campos de formulario con label

<label>, etiqueta los campos de formulario. Los lectores de pantalla, leerán la etiqueta cuando se haga click sobre el campo al que está asociada. Por otro lado, al hacer click sobre label, se activará el foco en el campo asociado. Al aumentar el área sobre la que hacer click, el uso de label facilita el uso en situaciones de movilidad reducida.

<label>Nombre: <input id="nombre" class="clases" type="text" name="nombre" placeholder="Pepito Pérez" /></label>Lenguaje del código: HTML, XML (xml)

Puede usarse envolviendo al campo al que etiqueta o haciendo referencia al id con el atributo for.

<label for="nombre">Nombre: </label>
<input id="nombre" class="clases" type="text" name="nombre" placeholder="Pepito Pérez" />Lenguaje del código: HTML, XML (xml)

Label, es aplicable a los campos de formulario: input, select, textarea, progress, meter.

Nota: el atributo placeholder no sustituye a label. Éste, rellena el campo de formulario con algún texto más o menos descriptivo, pero se trata, quizás, más de un adorno que de una ayuda.

Etiquetado WAI-ARIA

aria-label
Si el campo no tiene una etiqueta label asociada, usa aria-label para que las tecnologías de asistencia puedan dar información sobre el campo.

<input id="nombre" class="clases" type="text" name="nombre" placeholder="Pepito Pérez" aria-label="tu nombre" />Lenguaje del código: HTML, XML (xml)

aria-labelledy

Si por el motivo que sea se decide usar otra etiqueta distinta de label para etiquetar los campos, se puede definir qué id realiza la función de etiquetado para ese campo con aria-labelledby.

<div id="label_nombre">Nombre: </div>
<input id="nombre" class="clases" type="text" name="nombre" placeholder="Pepito Pérez" aria-labelledby="label_nombre" />Lenguaje del código: HTML, XML (xml)