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.
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.
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.
