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:
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.
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:
De esta forma estamos ayudando a la navegación de la página al haber definido una navegación primaria en HTML5 accesible.
