Navegación primaria en HTML5 accesible

23/Oct/2018 HTML5 , , , 1 Comentario

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.

Vídeos sobre HTML5


Un comentario en “Navegación primaria en HTML5 accesible”

Víctor Cuervo

Santiago

Hola necesito ayuda, tengo un formulario de registro html y necesito que el boton de enviar me mande a otro template html de agradecimiento, Cuál seria el código que debo usar? Soy principiante y estoy un poco perdido.
Gracias.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.