Landmarks y accesibilidad

¿Qué son los landmarks?

Son los elementos de un website que dan la estructura que define las diferentes secciones (o regiones) navegables por las aplicaciones de lecturas como NVDA (Windows) o Voice Over (iOS), esta estructura provee tecnología de asistencia (AT) a los usuarios que necesiten orientarse por si mismos utilizando solo el teclado.

Los landmarks se identifican por los HTML tags mas communes como header, main, nav y footer y acompañados de otro tag llamado ARIA o ROLE complementan toda la estructura del website para que sea navegable y accesible. Regularmente main es la sección o region desde donde la mayoría de los lectores de pantallas inician la navegación de la web e identifican las principales o mas importantes secciones para mostrarles al usuario dónde se encuentra y hacia dónde puede navegar.

¿Cuáles son las mejores practices para un sitio web accesible?

1. Implementar los heading titles incrementando en orden (h1, h2, h3…) nunca desde h1 a h3, si se diera el caso, utilizar h2 class=h3
2. Incluir texto alternativo (alt) a todas las imágenes y además que la imagen tenga un nombre de archivo amigable.
3. Los links deben incluir texto descriptivo. (Ej: “Click aquí para leer…” debe leers como “Para leer mas acerca de nosotros click aquí”
4. Evitar el uso de table, utilizar el grid si es posible
5. Establecer un orden con tab-index cuando sea necesario para que el TAB navegue en orden por las secciones
6. Utilizar ARIA solo cuando sea necesario, HTML5 contiene tags equivalentes que sustituyen este landmark. (Ej: utilice label en vez de aria-label, <button> en vez de aria-button=”role”)
7. Utilizar ARIA en las páginas SPA que muestren contenido dinámico y secciones o filtros.
8. Utilizar ARIA en modales, popups, in-page updates, etc.
9. Utilizar section para dividir los elementos de una página

Códigos a implementar

Para tener nuestro website accesible a los screen readers, debemos agregar los siguientes html tags en nuestro html, los cuales van a crear la estructura correcta para que las herramientas de accesibilidad validen correctamente nuestro sitio web.

Header

Cuando usamos header como primer elemento, puede usarse como un área de banners que incluye el logo, el nombre del sitio, y el posiblemente el primer menú. El header puede utilizarse dentro de otras secciones y en este caso no es utilizado como landmark debido al orden en que se encuentra.

<div role="banner"> o su equivalente en HTML5 <header>.

Main

Identifica el primer contenido de la página, cada página debe incluir este landmark.

<div role="main"> o su equivalente en HTML5 <main>.

Ejemplo:

    <div role="main">
      <h1>Título del main content</h1>
    </div>

En caso de tener varios en la misma página, podemos diferenciarlos utilizando aria-labelledby.

    <div role="main" aria-labelledby="title1">
      <h1 id="title heading 1">
          Lorem ipsum
      </h1>
      Main content area 1
    </div>

    <div role="main" aria-labelledby="title2">
      <h1 id="title heading 2">
          Lorem ipsum 2
      </h1>
      Main content area 2
    </div>

Footer o Contentinfo

Utilizamos este landmark para identificar la sección donde colocaremos información importante en cada página. Usualmente llamado footer, incluye información importante como contacto, copyrights, menus, etc.

<div role="footer"> o su equivalente en HTML5 <footer>.

Navigation

Identifica los grupos o listas de enlaces que son navegables en el website o una página. Si tenemos varios menus, debemos identificarlos con aria-labelledby.

<div role="navigation"> o su equivalente en HTML5 <nav>.

Ejemplos:

    <div role="navigation">
      <h2 id="nav1">
         Nav title 1
      </h2>
    </div>

Si tenemos mas de un menu:

    <div role="navigation" aria-labelledby="nav1">
      <h2 id="nav1">
         Nav title 1
      </h2>
    </div>
    <div role="navigation" aria-labelledby="nav2">
      <h2 id="nav2">
         Nav title 2
      </h2>
    </div>

Aside o Complementary

Contenido que complementa el contenido principal, regularmente se encuentran al lado izquierdo o derecho.

    <div role="complementary"> o su equivalente HTML5 <aside>
    Ejemplos si hay más de uno:
    <div role="complementary" aria-labelledby="comp1">
       aside content 1
    </div>
    <div role="complementary" aria-labelledby="comp2">
       aside content 2
    </div>

Forms

Un form define la región que contiene los items para capturar/enviar datos. Podemos utilizar el role search cuando nuestro form es de búsqueda.

<div role="form" aria-labelledby="formname"> o su equivalente en HTML5 <form>.

Si tenemos un buscador:

    <form role="search">

Region

Utilizado normalmente para desplegar contenido resumido que resulta ser muy importante para los usuarios y así puedan llegar a dicho contenido fácilmente.

<div role="region" aria-labelledby="region1"> o su equivalente en HTML5 <section aria-labelledby="region1">

Ejemplos:

    <div role="main">
      <div role="region" aria-labelledby="region1">
        content region 1
      </div>
    </div>

Podemos utilizar también:

    <section aria-label="title of the region section 1">
      content
    </section>

Uso correcto de los headings

Los headings deben ir incrementando 1 en 1, debajo los casos de uso para respetar los landmarks.

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>

Si encontramos el caso donde el siguiente Heading no aplica en la secuencia podemos utilizar:

    <h1>Heading 1</h1>
    <h2 class="h3">Heading 3</h2>

De esta manera, los screen readers saben identificar correctamente el orden de los títulos sin importar su tamaño.