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?Y recibo la siguiente contestación:
Dame más detalles de lo que estás haciendo.
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 etiquetaspan para lo input pero creo que no estaria bien hacerlo...
¿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:
- Screen reader user survey 2 - Images and Alternative Text: un 57% de los encuestados contestó que prefería como texto alternativo de una imagen decorativa "Foto de una mujer sonriente", pero un 20% prefería simplemente "Mujer sonriente".
- Screen reader user survey 3 - Heading Structures: el 50% de los encuestados contestó que prefería dos niveles de encabezado principales con el nombre del sitio web y el título del documento, pero un 37% prefería sólo el título del documento.
¿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.
¿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...
4 comentarios:
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.
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
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.
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!
Publicar un comentario