jueves, 13 de febrero de 2014

Accesibilidad de listas

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:
Quiero conocer sus sugerencias.
Quiero agregar un encabezado a una lista que esta dentro de un nav (html5) pero quiero que el encabezado relacione eso, estuve investigando y encontre esto:
http://www.htmlcinco.com/listas-con-encabezados-y-el-elemento-figure/comment-page-1/#comment-1053 Pero al investigar bien sobre el uso de cada etiqueta encontre esto:
http://otroespacioblog.wordpress.com/2012/11/22/etiquetas-figure-y-figcaption-del-estandar-html5/
Es mi pensamiento si tengo un titulo de una lista ejemplo:
Productos
-doritos
-rufles
-tortolines
para hacerlo un poco mas accesible tengo que agregarle de alguna manera la relacion del titulo con las listas es como decir , la etiqueta span para lo input pero creo que no estaria bien hacerlo...
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):
  1. Listas anidadas, de forma que cada elemento de la lista de nivel superior tuviese el título que identifica la lista del nivel inferior.
  2. 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.
  3. 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-labelledbyaria-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...

4 comentarios:

Ester Serna Berna dijo...

Me he quedado sorprendida con la encuesta en cuanto a las preferencias sobre los textos alternativos de las imágenes.
Hasta ahora tenia entendido que las palabras "Foto de", "Imagen de", "Logo de", "Enlace a" eran redundantes ya que en las ultimas revisiones conforme a la WCAG 1.0 de nuestro sitio web hemos tenido que eliminarlas.

Como siempre con tu blog aprendo cosas nuevas :-)

Un saludo,
Ester.

Ester Serna Berna dijo...

Hola de nuevo, al releer de nuevo el mensaje, he visto que me colé al decir WCAG 1.0 ya que realmente la evaluación externa realizada por AENOR, es conforme a la Norma UNE Norma UNE 139803:2004.
Un saludo,
Ester

Sergio Luján Mora dijo...

Hola Ester.

Yo también "apostaría" por no poner "Foto de" o "Imagen de", se supone que el lector de pantallas va a decir "Imagen".

Un saludo.

Ester Serna Berna dijo...

Justo, esa es la prueba que realizo para convencerles de que es redundante.
Por eso aún me sorprende más la encuesta.

En cuanto a lo que se comenta en la entrada referentes a las listas yo usaría las listas anidadas si se tratase de un menú de navegación consistente como si fuese el menú principal del sitio web, asígnandole el role="navigation" en la etiqueta

En el caso de tratarse de bloques diferenciados, es decir visualmente son diferentes también, es cuando a mi me surgiria a necesidad de asignar un "título" a cada lista, en este caso utilizaría los encabezados de sección para proporcionar el título al bloque.


Un saludo y gracias Sergio!