Crear formularios accesibles

Publicado por Fran Tarifa

25 Abril, 2006

Aquí vamos a tratar de explicar algunas pautas a la hora de hacer un formulario accesible. Para ello vamos a ver como cumplir con las pautas de accesibilidad referentes a los formularios y a sus elementos.

Etiqueta explícitamente los controles del formulario.
La etiqueta label se utiliza para identificar el texto asociado a los campos de formulario. Esta asociación permite a los lectores de pantalla leer los formularios correctamente, asociando cada etiqueta a su campo correspondiente. Cada campo (input) se identifica con el atributo id, que coincide con el atributo for de la etiqueta label a la que va asociado.
En los campos de texto (text, textarea y select), la etiqueta label se coloca a la izquierda del campo. Mientras que en los campos de tipo radio y checkbox la etiqueta label se coloca a la derecha del campo. Los campos de tipo submit, reset y button no requieren asociación, ya que están implícitamente etiquetados.
Agrupar la información cuando sea natural y apropiado.
Cuando los controles de formulario puedan ser agrupados en unidades lógicas, utilice el elemento FIELDSET y etiqueta esas unidades con el elemento LEGEND (que le da título a la agrupación) para ayudar al entendimiento en formularios largos.
Agrupe las opciones de menú.
Para listados largos de selecciones d emenú se deberían agrupar los ítems SELECT (definidos a través de OPTION) en una jerarquía, utilizando el elemento OPTGROUP. Hay que especificar una etiqueta para el grupo de opciones con el atributo label en OPTGROUP.
Acceso desde el teclado a los formularios.
Esto lo conseguimos de dos formas principalmente:

un accesskey, que es un atajo de teclado para poder acceder al campo independientemente del dispositivo.
un tabindex, que es una variable que indica el orden que seguirá la tabulación.

Para comprender todo esto mejor, vamos a colocar un pequeño ejemplo de un formulario accesible, dónde aparezca todo lo que hemos comentado: