¿Sabías que puedes tener un menú hacia las distintas secciones de tu página web para las personas que utilizan un lector de pantalla y que navegan utilizando el teclado?. En este post te mostraremos como hacerlo.
¿Sabías que puedes tener un menú hacia las distintas secciones de tu página web para las personas que utilizan un lector de pantalla y que navegan utilizando el teclado?. En este post te mostraremos como hacerlo.
Los ARIA Landmarks son los roles que le podemos asignar a nuestros elementos HTML para facilitar en nuestra página web la navegación a través del teclado para a aquellas personas que emplean lectores de pantalla, especificando la estructura de nuestra página web, permitiéndoles navegar de manera directa entre las distintas secciones.
Al crear una página web, solemos dividir nuestro contenido usando distintas etiquetas HTML que justamente describen la finalidad del contenido dentro de ellas. Por ejemplo, sabemos que la etiqueta header
hace referencia a un banner o que la etiqueta nav
contiene un área para navegar a través del sitio.
Etiqueta HTML | ARIA Landmark |
---|---|
section | region |
header | baner |
aside | complementary |
footer | contentinfo |
form | "form" o "search" |
main | main |
nav | navigation |
OJO: Los lectores de pantalla suelen darle mucho más soporte a las etiquetas de ARIA que sus elementos HTML equivalentes. Por lo tanto, se recomienda el uso de las etiquetas correctas junto con los roles adecuados para asegurar una buena funcionalidad a la mayor cantidad de usuarios.
Después de dividir nuestro sitio según las distintas áreas de interés, deberíamos asignarle un rol a cada una de ellas de la siguiente manera basándonos en la tabla anterior:
<section role="region"> <h2><h2> </section>
Y también deberás añadir un título o etiqueta a aquellas que se repitan múltiples veces en tú página:
<nav role="navigation" aria-label="Lista de Proyectos"> <ul>...</ul> </nav> <nav role="navigation" aria-label="Lista de Cursos"> <ul>...</ul> </nav> <!-- Notese que aria-labelledbay toma por valor el id de un elemento hijo que contiene su titulo. --> <section role="region" aria-labelledby="title"> <h2 id="title"> Plan de estudios <h2> </section>
Gracias a este tipo de etiquetas los usuarios tiene un menú de las distintas secciones de tu página facilitando su navegación por el sitio.
Puedes comenzar a emplear esta extensión que te permite ver la estructura de tu web de manera clara.