Técnica HTML WCAG 2.2

H97Agrupar enlaces relacionados con el elemento nav

En resumen

Esta técnica propone envolver los grupos de enlaces de navegación (menú principal, navegación secundaria, enlaces de pie) en un elemento nav, y distinguirlos con aria-label o aria-labelledby cuando haya varios en la misma página. Así quienes usan lectores de pantalla pueden localizar cada bloque de enlaces o saltárselo de un salto. Úsela para cualquier conjunto de enlaces que forme una sección propia de la página.

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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H97 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.