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.