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:

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:

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:

• Descripción extensa de una imagen: accesible con lector de pantalla y visible sin imágenes activas
• Qué teclas de acceso rápido (accesskey) utilizar
• Formulario con varios botones. Implementación usable y accesible
• AJAX accesible
• Enlaces que actúan como botones. Implementación accesible.