ARIA Landmarks

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

Miguel Segura

Miguel Segura

ARIA Landmarks

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

Menú de nuestra página principalMenú de nuestra página principal

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 HTMLARIA Landmark
sectionregion
headerbaner
asidecomplementary
footercontentinfo
form"form" o "search"
mainmain
navnavigation

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:

  • aria-label: Esta etiqueta te permite darle un título especifico a una sección.
  • aria-labelledby: Define el título de la sección utilizando el contenido de la 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.

¿Cómo puedo saber visualizar la estructura de mi página web?

Puedes comenzar a emplear esta extensión que te permite ver la estructura de tu web de manera clara.

Sección de nuestra página principalSección de nuestra página principal
Ilustracion que representa como crece alguien profesionalmente

Entérate de las últimas novedades

Streamings, Noticias y Early Adopter bonus. Sé el primero en enterarte de todo.