A los alumnos de la asignatura
Experiencia de usuario del
Curso de especialista en diseño web que estoy impartiendo les propuse hace casi dos semanas un ejercicio complementario:
¿Cómo mejorará la accesibilidad web HTML 5? Para guiar un poco más el ejercicio, les comentaba que en este blog he escrito varias entradas sobre ello, y además les incluía tres preguntas para centrar aún más el tema:
- ¿Cómo mejorará la accesibilidad web HTML 5?
- ¿A quién crees que beneficiará más?
- ¿Alguna de las características beneficiará a la mayoría de la gente y no sólo a grupos reducidos?
Como el ejercicio es complementario, es decir, no se evalúa ni se va a hacer un examen sobre ello, ha ocurrido lo que esperaba:
no ha contestado nadie, absolutamente nadie.
Hoy les he escrito el siguiente mensaje, para ver si alguien se anima de una vez:
Un nuevo elemento que ayuda a mejorar la accesibilidad es el nuevo elemento (etiqueta)
<nav>. Esta etiqueta permite definir un elemento navegacional de la página web, como puede ser el menú principal o el menú secundario.
Se debe utilizar para marcar los elementos principales de navegación, no se deben marcar todos los elementos, como podemos leer en el apartado
4.4.3 The nav element de la especificación
HTML5:
Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.
El artículo
Semantic navigation with the nav element explica muy bien el uso de esta etiqueta y las diferentes situaciones donde se recomienda su uso.
Un ejemplo de uso de esta etiqueta es:
<nav>
<ul>
<li><a href="/accesibilidad/">Accesibilidad</a></li>
<li><a href="/html/">HTML</a></li>
<li><a href="/javascript/">JavaScript</a></li>
<li><a href="/css/">CSS</a></li>
</ul>
</nav>
¿Por qué mejora la accesibilidad esta etiqueta? Porque permite identificar de una forma clara los elementos de navegación que tiene una página web, por lo que las tecnologías de apoyo como los lectores de pantalla lo pueden detectar y ofrecer al usuario cuando lo necesite.
Un compañero ha leído este mensaje y me ha preguntado:
¿hay alguna ventaja más? Por supuesto:
- Proporciona un método explícito de especificar cuales son los elementos de navegación de un sitio web y de una página web.
- Se puede (podrá) configurar el agente de usuario (navegador) para que inicialmente salte el menú de un sitio web, por lo que ya no es necesario escribir "saltar enlaces" o "saltar al contenido principal".
- Un lector de pantalla puede tener un comando (atajo de teclado) para acceder directamente a los elementos de navegación de una página, igual que tiene un comando para mostrar la lista de enlaces o la lista de encabezados de una página.
- Un agente de usuario en un dispositivo con una pantalla pequeña (por ejemplo, un teléfono), puede mostrar los elementos de navegación de forma independiente o cuando el usuario pulse una tecla del dispositivo.
- El elemento <nav> puede funcionar como un <div> a todos los efectos. Ya no es necesario escribir <div id="menu"> o <div id="navigation">. <nav> tiene 3 letras como <div>, así que no se puede decir que haya que escribir más.
Y seguro que hay muchas más ventajas que yo desconozco.
¿Se te ocurre alguna ventaja más?
Evidentemente, todas estas ventajas dependerán de que los agentes de usuario y las tecnologías de apoyo soporten los nuevos elementos (etiquetas) de
HTML5. Que no lo soporte ahora, no es razón para no usarlo ya:
si ya lo usamos, nuestras páginas estarán preparadas para el futuro.