Navegación

Estructura básica

El elemento <nav> se utiliza para agrupar enlaces de navegación. Para identificar el tipo de navegación se añade el atributo aria-label.

<nav aria-label="Principal">
  <a href="/">Inicio</a>
  <a href="/servicios/">Servicios</a>
  <a href="/contacto/">Contacto</a>
</nav>

No es necesario incluir la palabra ‘navegación’ en el texto de la etiqueta, ya que los lectores de pantalla la anuncian automáticamente.

Uso de listas

Las listas permiten ofrecer información adicional al usuario, indicando a las tecnologías de asistencia cuántos enlaces hay y en qué orden se encuentran.

<nav aria-label="Principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/servicios/">Servicios</a></li>
    <li><a href="/contacto/">Contacto</a></li>
  </ul>
</nav>

Para la ruta de navegación, también conocida como migas de pan (del inglés breadcrumbs), se recomienda usar una lista ordenada, ya que los enlaces siguen un orden jerárquico.

<nav aria-label="Ruta">
  <ol>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Ventas</a></li>
  </ol>
</nav>

Ubicación

La navegación debe indicar al usuario en qué página se encuentra. Esto se consigue mediante pistas visuales y mediante el atributo aria-current.

<nav aria-label="Principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/servicios/">Servicios</a></li>
    <li><a href="/contacto/" aria-current="page">Contacto</a></li>
  </ul>
</nav>

El atributo aria-current admite distintos valores (page, step, date...) según el tipo de elemento que representa el enlace.