He recibido la siguiente consulta muy interesante:
Buenas tardes soy estudiante de Ecuador- Los Rios - Quevedo, quisiera saber sobre como agregar un titulo a una lista ul que va a estar dentro de una etiqueta nav. No me parece bien agregar encima de ella un titulo con h2. Me podría ayudar? Gracias de antemano.
A lo que contesto:
¿Por qué piensas que agregar un h2 no es bueno?
Dame más detalles de lo que estás haciendo.
Y recibo la siguiente contestación:
Y también mandaba la siguiente imagen:
¿Cuál es la mejor forma de etiquetar estas listas?
No existe una respuesta que satisfaga lo que todos los usuarios puedan buscar o esperar. Por ejemplo, si consultamos las encuestas sobre uso de lectores de pantalla de WebAIM, encontramos:
Aunque existen tendencias en lo que la gente quiere, cada usuario es único y normalmente no hay una solución que contente a todos los usuarios. Hay que intentar encontrar la solución "menos mala".
¿Qué hacer entonces?
Personalmente, optaría por una de estas tres soluciones (de la menos útil a la más útil, desde mi punto de vista):
- Listas anidadas, de forma que cada elemento de la lista de nivel superior tuviese el título que identifica la lista del nivel inferior.
- Listas de definición, como la solución anterior pero usando listas de tipo dl, tal como se explica en la segunda solución que aparece en Listas con encabezado y el elemento figure. Es más elegante y semánticamente correcto, porque dt sería el título de cada sublista.
- Encabezados del nivel adecuado, definiendo el título de cada sublista. Creo que es la mejor porque las personas que utilizan un lector de pantallas encuentran muy cómodo el navegar entre encabezados, tal como podemos leer en Screen reader user survey 4 - Finding Information. Con esta solución se podría saltar fácilmente de una lista a otra lista.
Lo del uso de figure con legend o figcaption no creo que sea adecuado. Además, un figure sólo puede tener un figcaption (
The figure & figcaption elements), por tanto no se podrían meter todas las listas en el mismo figure, y tener varios figures seguidos para contener las listas me parece muy extraño.
¿Alguien tiene otra propuesta de solución?
[Actualización]
Después de consultarlo con la almohada, he pensado que también se podría utilizar ARIA, por ejemplo
aria-label,
aria-labelledby y
aria-describedby, pero el soporte actual de ARIA por los lectores de pantalla es bastante desigual. Sin duda alguna sería la mejor solución (para estas cosas esta ARIA), pero habría que probar su funcionamiento...
