Rol Punto de referencia

`navigation`

Un punto de referencia (landmark) que agrupa un conjunto de enlaces de navegación: nav principal, migas de pan, tabla de contenidos. El elemento <nav> incluye este rol de forma implícita. Es habitual y correcto tener varios nav en una misma página, pero cada uno debe tener un nombre accesible distinto.

Cuándo utilizarlo

Use <nav>. El elemento envuelve un conjunto de enlaces de navegación: navegación principal del sitio, tabla de contenidos de la página, migas de pan, enlaces de pie de página, paginación. Cada <nav> queda expuesto como un landmark de navegación.

A diferencia de banner y main, tener múltiples landmarks de navegación en una misma página es normal y esperado. La cabecera tiene un nav «Principal»; el artículo tiene un nav «En esta página»; el pie de página tiene un nav «Mapa del sitio».

role="navigation" sobre un <div> solo es apropiado cuando no es posible usar <nav> (CMS heredado).

No todo lo que «navega» es un nav. Una lista de tres enlaces en medio de un párrafo es solo texto — envolverla en <nav> generaría ruido innecesario. Reserve <nav> para colecciones importantes de enlaces que los usuarios realmente utilizan para navegar.

Cuándo etiquetar

Cuando haya más de un landmark de navegación en la página (casi siempre será el caso), cada uno DEBE tener un nombre accesible distinto mediante aria-label o aria-labelledby. De lo contrario, el menú de landmarks del lector de pantalla mostrará tres entradas «navegación» y el usuario no podrá distinguirlas.

Etiquetas convencionales: «Principal», «Secundaria», «Pie de página», «Migas de pan», «Paginación», «En esta página», «Saltar al contenido».

Errores frecuentes

Varios elementos <nav> sin etiquetas. Son indistinguibles en el menú de landmarks.
Envolver un solo enlace en <nav> — uso excesivo; basta con <a>.
aria-label="Navigation" — redundante. El rol ya es «navigation»; los lectores de pantalla anuncian «Navegación, navegación». Use una etiqueta significativa como «Principal» o «Migas de pan».
Nav principal renderizado como role="menu" o role="menubar". La navegación del sitio no es un menú de aplicación — consulte la página sobre menu.
Nav de migas de pan sin aria-label="Breadcrumb". Por convención se exige la etiqueta para que el rol sea reconocido correctamente.

Ejemplo

<header>
  <nav aria-label="Principal">
    <a href="/toolkit/">Kit de herramientas</a>
    <a href="/library/">Biblioteca</a>
  </nav>
</header>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/toolkit/">Kit de herramientas</a></li>
    <li aria-current="page">Estándares</li>
  </ol>
</nav>