Técnica HTML WCAG 2.2

H97Agrupar los enlaces de navegación con el elemento nav

Nombre oficial en el W3C: Agrupar enlaces relacionados con el elemento nav

En pocas palabras

Los bloques de enlaces que sirven para moverse por la web, como el menú principal o las migas de pan, deben ir dentro de un elemento nav. Así los lectores de pantalla los reconocen como zona de navegación. La persona puede ir directamente a ellos o saltarlos.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee la página de forma lineal. Si el menú tiene 30 enlaces, la persona los oye todos en cada página antes de llegar al contenido.

Con nav, el lector anuncia una zona de navegación. La persona puede saltar a ella o pasar de largo con una sola tecla. Además, el grupo de enlaces queda bien definido aunque cambie el diseño.

Cómo se hace

Rodee con <nav> cada bloque de enlaces que sirve para navegar: menú principal, menú de una sección, migas de pan, índice de una página larga.
Dentro, organice los enlaces en una lista <ul>.
Si hay más de un nav en la página, dé a cada uno un nombre distinto con aria-label (por ejemplo, «Principal» y «Pie»).
Si el bloque ya tiene un título visible, puede usar aria-labelledby con el id de ese título.
No meta en nav cualquier grupo de enlaces. Unos enlaces de «Compartir» o los enlaces dentro de un texto no son navegación del sitio.

Cómo comprobarlo

Localice los grupos de enlaces que se ven como bloque de navegación (menú, migas de pan, índice).
Con las herramientas del navegador (F12), compruebe que cada grupo está dentro de un elemento nav.
Si hay varios nav, compruebe que cada uno tiene un nombre diferente.
Con NVDA, pulse D para saltar entre zonas. Cada menú debe anunciarse como «navegación» con su nombre.

Ejemplo

Menú principal y menú del pie de una sede web, cada uno con su propio nombre.

<nav aria-label="Principal">
  <ul>
    <li><a href="/tramites">Trámites</a></li>
    <li><a href="/noticias">Noticias</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>
...
<nav aria-label="Pie de página">
  <ul>
    <li><a href="/accesibilidad">Accesibilidad</a></li>
    <li><a href="/aviso-legal">Aviso legal</a></li>
  </ul>
</nav>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H97 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Documentos HTML que contienen enlaces relacionados.

Descripción

El objetivo de esta técnica es agrupar los enlaces de navegación mediante el elemento nav de HTML. El elemento nav es uno de los varios elementos de seccionamiento de HTML. El uso de este marcado puede facilitar que los usuarios de tecnologías de asistencia, como los lectores de pantalla, localicen los grupos de enlaces y los salten. El uso de estructuras semánticas permite emplear hojas de estilo personalizadas para cambiar la presentación de los grupos de enlaces conservando su relación. Cuando el elemento nav se emplea más de una vez en una página, distinga los grupos de navegación mediante un atributo aria-labelledby o aria-label.

No todos los grupos de enlaces necesitan marcarse con el elemento nav. Por ejemplo, los enlaces pueden agruparse en otras estructuras, como listas, o usar marcado ARIA si no representan una sección diferenciada de la página.

Ejemplos

Enlaces de navegación dentro de un elemento nav

Este ejemplo usa un elemento nav para agrupar los enlaces de navegación de un plan de estudios sobre accesibilidad.

<nav>
  <ul>
    <li><a href="/web-accessibility.html">Web Accessibility</a></li>
    <li><a href="/doc-accessibility.html">Document Accessibility</a></li>
    <li><a href="/mobile-accessibility.html">Mobile Accessibility</a></li>
  </ul>
</nav>

Varios elementos `nav` y `aria-labelledby`

El siguiente ejemplo muestra un enfoque recomendado para añadir regiones (landmarks) a un documento HTML cuando hay dos o más regiones del mismo tipo en la misma página. Por ejemplo, si un elemento nav se usa varias veces en una página, cada instancia puede tener una etiqueta única especificada mediante aria-labelledby:

<nav aria-labelledby="site-nav-heading">
  <h2 id="site-nav-heading">Site</h2>
    <ul>
      <li><a href="...">nav link 1</a></li>  
      <li><a href="...">nav link 2</a></li>
      <li><a href="...">nav link 3</a></li>
    </ul>
</nav>
<nav aria-labelledby="related-nav-heading">
  <h2 id="related-nav-heading">Related Topics</h2>
    <ul>
    <li><a href="...">topic link 1</a></li>
    <li><a href="...">topic link 2</a></li>
    <li><a href="...">topic link 3</a></li>
  </ul>
</nav>

Varios elementos `nav` y `aria-label`

El siguiente ejemplo muestra un enfoque recomendado para añadir regiones (landmarks) a un documento HTML cuando hay dos o más regiones del mismo tipo en la misma página y no existe en la página un texto al que pueda hacerse referencia como etiqueta:

<nav aria-label="Site">
  <ul>
    <li><a href="...">nav link 1</a></li>
    <li><a href="...">nav link 2</a></li>
    <li><a href="...">nav link 3</a></li>
  </ul>
</nav>
<nav aria-label="Tags">
  <ul>
    <li><a href="...">tag link 1</a></li>
    <li><a href="...">tag link 2</a></li>
    <li><a href="...">tag link 3</a></li>
  </ul>
</nav>

Pruebas

Procedimiento

Comprobar que los enlaces que están agrupados visualmente y representan una sección de la página están contenidos en un elemento nav.

Resultados esperados

La comprobación n.º 1 es verdadera.

Recursos

HTML - nav element (el elemento nav).

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H97 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.