jueves, 3 de marzo de 2011

La etiqueta <nav> de HTML5

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.

9 comentarios:

Jaume dijo...

Ahora ya veo que otras utilidades tiene , pero entonces, y perdón por la ignorancia, porque no una etiqueta para señalar zonas con información de la página, y una etiqueta para señalar elementos puramente decorativos que no aportan ni información ni enlaces a otros sitios? o es que ya existen?

Bueno, gracias por la información.

Tiene buena pinta el HTML 5 y hacia donde se dirije la web con él.

Sergio dijo...

Existen nuevas etiquetas similares a esta, que aportan más contenido semántico: header, article, section, aside, footer y quizás se me olvide alguna.

En el siguiente artículo está muy bien explica: A Preview of HTML 5

Ahora falta que la gente empiece a usarlas correctamente y que los navegadores y demás aplicaciones las utilicen.

Claro está, se podrían crear muchas más etiquetas, pero entonces se complicaría el lenguaje. Hay que buscar un equilibrio. Quizás en HTML6 se añadan nuevas etiquetas o estas nuevas etiquetas pasen a obsoletas (deprecated) si la gente no las utiliza.

Anónimo dijo...

Personalmente, respecto a lo de "Que no lo soporte ahora, no es razón para no usarlo ya", pienso que es mejor usar, de momento, sólo WAI-ARIA y evitar el uso de estas etiquetas hasta que tengan un soporte mayoritario. Me explico, el role de ARIA "navigation" tiene mejor soporte en agentes de usuario, mientras que la etiqueta nav no. Si usásemos los dos podríamos provocar redundancia cuando la etiqueta nav comience a soportarse (dos cosas informando de que algo es un elemento de navegación).

En este artículo de A List Apart hablan sobre el tema de la redundancia.

Supongo que también conocerás HTML5 accessibility support work arounds, que ofrece alternativas accesibles a los nuevos elementos de HTML5. La alternativa siempre es el uso de WAI-ARIA. No entiendo por qué para la etiqueta nav proponen usar role="article", creo que es más apropiado "navigation".

Saludos

Anónimo dijo...

Otro comentario respecto a "HTML6". HTML5 aspira a perder el 5 y las versiones para siempre, de ahí su DOCTYPE. En el blog de WHATWG hablan sobre el cambio de HTML5 a HTML, a secas.

Y hablando de HTML5, recomendaría a todo el mundo la lectura de HTML5 For Web Designers

Alejandro dijo...

Otra ventaja es para SEO. Los buscadores pueden identificar los enlaces internos de menú de mejor manera

Daniel San dijo...

Lastima de IE8 y 7 y de mas que no aceptan esta etiqueta, ie es una porqueria.

Eliott Christopher Marcelo Sanchez dijo...

en pocas palabras el nav hace lo mismo que un div ?? o hace otra cosa

Sergio Luján Mora dijo...

Eliott, ¿no has leído las ventajas?

SOS Mascota dijo...

buenas tardes, yo tengo un problema particular me muestra el nav en linea pero no veo el texto