Navegación primaria en HTML5 accesible

Navegación primaria en HTML5

HTML5 incorporaba mediante el elemento nav la posibilidad de definir áreas de navegación semánticas. Hoy daremos un paso más y vamos a ver cómo podemos crear una navegación primaria en HTML5 accesible. Y es que cómo ya vimos a la hora de crear una navegación en HTML5 podemos crear múltiples navegaciones dentro de una página.

Por ejemplo, podríamos tener una página que tuviese estas dos navegaciones:

<header>
  <nav>
    <ul>
      <li>
        <a href="#Inicio">Inicio</a>
      </li>
      <li>
        <a href="#Resumen">Resumen</a>
      </li>
      <li>
        <a href="#Contacto">Contacto</a>
      </li>
    </ul>
  </nav>
</header>

<!-- Contenido de la Página -->

<footer>
  <nav>
    <ul>
      <li>
        <a href="https://lineadecodigo.com" alt="Aprende a Programar">Línea de Código</a>
      </li>
      <li>
        <a href="http://www.manualweb.net" alt="Manuales de Programación">Manual Web</a>
      </li>
      <li>
        <a href="http://w3api.com" alt="APIs de Programación">W3Api</a>
      </li>
    </ul>
  </nav>
</footer>

Y no solo dos, podríamos tener múltiples navegaciones dentro de la página. Ya que normalmente podremos encontrar como navegaciones la navegación del site, la ubicación o breadcrumbs, enlaces al contenido de la página o enlaces externos a la página.

Dar nombre a los menús de navegación

Si pensamos en consumir de una forma accesible el contenido de nuestra página deberemos de darle un nombre a cada menú para que podamos realizar la navegación de una forma sencilla.

Para ello contamos con el atributo aria-labelledby. Este atributo permite dar un nombre al cada menú de navegación. El valor del atributo aria-labelledby es el identificador de un elemento de texto.

<nav aria-labelledby="identificador">
<h2 id="identificador">Texto para la navegación</h2>
</nav>

Así, apoyándonos en el atributo aria-labelledby podremos definir una navegación primaria en HTML5 accesible.

Ejemplo completo

De esta forma deberemos de modificar el código de las navegaciones que hemos revisado al principio incluyendo lo siguiente:

<header>
  <nav aria-labelledby="menunavegacion">

    <h2 id="menunavegacion">Menú Navegación</h2>

    <ul>
      <li>
        <a href="#Inicio">Inicio</a>
      </li>
      <li>
        <a href="#Resumen">Resumen</a>
      </li>
      <li>
        <a href="#Contacto">Contacto</a>
      </li>
    </ul>
  </nav>
</header>

<!-- Contenido de la Página -->

<footer>
  <nav aria-labelledby="menuenlaces">

    <h2 id="menuenlaces">Enlaces</h2>

    <ul>
      <li>
        <a href="https://lineadecodigo.com" alt="Aprende a Programar">Línea de Código</a>
      </li>
      <li>
        <a href="http://www.manualweb.net" alt="Manuales de Programación">Manual Web</a>
      </li>
      <li>
        <a href="http://w3api.com" alt="APIs de Programación">W3Api</a>
      </li>
    </ul>
  </nav>
</footer>

De esta forma estamos ayudando a la navegación de la página al haber definido una navegación primaria en HTML5 accesible.