miércoles, 22 de diciembre de 2010

Asociación compleja de radios y labels de forma accesible

Una duda que surge a menudo cuando implementas un formulario de forma accesible es cómo asociar correctamente los campos con sus labels cuando estos se presentan de forma compleja.

Esta duda me surgió la semana pasada al ver el diseño de un formulario que incluía la selección del nivel de conocimientos de determinados idiomas, al estilo de:

En forma de tabla: en una primera fila se incluye el nivel (Ninguno, Básico, Medio y Avanzado). En una primera columna se incluye el nombre de los diferentes idiomas (Inglés, Francés, Alemán y Euskera). El resto de celdas incluyen los radiobuttons, estando el primero de ellos (Ninguno) seleccionado por defecto

Remití la duda a la lista de accesoweb y gracias a las sugerencias y aportaciones de sus miembros (especialmente de Gemma Beltrán) encontré el código que considero más adecuado para implementar ese formulario.

He subido el ejemplo a "Ejemplo de asociación compleja entre radios y labels de forma accesible" para que puedan consultar el código recomendado todos aquellos a los que les surja la misma duda.

Como se puede apreciar, visualmente es igual a la imagen anterior. Sin la CSS cargada su aspecto es el siguiente:

El listado de niveles se visualiza en forma de lista. Hay cuatro grupos de selección (Inglés, Francés, Alemán y Euskera), dentro de los cuales se incluyen cuatro radiobuttons acompañados de su etiqueta (por ejemplo: No tengo conocimientos de inglés, Inglés básico, Inglés medio, Inglés avanzado)

Podemos intuir con esta imagen cuál es su estructura, basada en una primera lista para los niveles y una serie de fieldset para cada bloque de selección. Los labels de cada radiobutton están ocultos visualmente (left:-9999em;) pero no así para los lectores de pantalla.

Podéis proponer cualquier propuesta de mejora.



Artículos relacionados:

2 comentarios :
Anónimo dijo...

Muy buena solución, gracias por compartirlo!

Unknown dijo...

¿Qué tal una solución similar a la esbozada en la técnica H65 de las WCAG 2.0, ejemplo 4?
https://docs.google.com/document/d/1aOAMrUDZS0Rlfc80HZTaZPBLKHqDxr_f0F9JWxkLCRk/edit

Publicar un comentario