Accesibilidad web con Roles ARIA.

Navegación accesible con roles WAI-ARIA

Una de las cosas importantes a tener en cuenta para la accesibilidad web es usar los roles ARIA. Para hacerles la vida más fácil a los usuarios que usan lector de pantallas hay que estructurar la navegación a través del sitio web.

roles ARIA

Ya comentamos que lo importante que es la estructuración del contenido en otra entrada y en la que di una serie de consejos.

Para orientarse a través de un sitio web, los usuarios que usan lector de pantallas van pulsando diferentes teclas para navegar por la web: listas, saltar entre encabezados, ojear las imágenes, etc.

Por ejemplo, para ojear los encabezados, siempre que tenga bien estructurados los encabezados, las personas que usen lector de pantallas, pulsarán la tecla “h” para ir navegando por ellos.

¿Cómo saltan entre los diferentes bloques de contenido?

Cuando hablamos de bloques de contenido hace referencia a la cabecera, la zona de navegación, el contenido principal, el cuadro de búsqueda y el pie de la página. Las WCAG 2.0, establece la especificación WAI ARIA, que consiste en establecer unos roles que sirven para crear contenidos web accesibles.

¿Qué es un rol?

La misión del rol es definir el papel que juegan los elementos dentro del documento web.

Landmark Roles

Los landmarks roles, que son los llamados puntos de referencia. Son los que identifican las diferentes partes o zonas de una página.

Si usamos los puntos de referencia, estaremos respetando la semántica de la estructura de la página. También es muy importante introducir los enlaces de “saltar contenido”.

Incluir el rol del elemento es muy sencillo, sólo hay que incluir el atributo
roleal elemento.

Por ejemplo, ponemos un div, seguido de la palabra role, y el rol que le asignamos al elemento en función de lo que corresponda. Un ejemplo:

 <div role=”landmark_role”>…</div>

Landmarks roles o puntos de referencia

Ahora vamos a ver los diferentes landmarks roles. Vamos a establecer cada una de las partes de un sitio para que sea accesible.

  • Banner
  • Complementary
  • Contentinfo
  • Form
  • Main
  • Navegation
  • Search
  • Region

 

Roles en HTML

Role=”banner”.

Este rol se utiliza para establecer la cabecera de la página, la que contiene el logotipo y el título principal. Sería el equivalente a la etiqueta <header> de HTML5. En la especificación de HTML5 también se admite el rol presentation.Este rol debe ser único en la página.

Role=”complementary”

Se trata de una sección complementaria del contenido principal. En HTML 5 sería el equivalente a la etiqueta <aside>. También puede tener el rol de search, note o presentation.

Role=”Contentinfo”

Es una sección que se coloca en la parte inferior de la página, lo que sería el pie de página. Su equivalente en HTML5 es la etiqueta <footer>. También puede tener el rol de presentation. Pero sólo deberíamos marcar un <footer> como contentinfo.

Role=”form”

Es el rol que se usa para establecer un formulario. En HTML5 se añadiría el rol a un elemento form o a un div. Si se trata de un formulario de búsqueda se usaría search.

Para hacerlo accesible para una persona que accede a nuestra web con un lector de pantalla hay que usar la etiqueta label.

Role=”main”

Este rol debe ser único por página. Se trata del contenido principal del documento. En HTML5 sería el equivalente a la etiqueta main.También admite el rol presentation.

Role=”navigation”

Es lo que en HTML5 se marcaría con la etiqueta <nav>, lo que sería un menú de navegación. Puede haber varios menús, por ejemplo, uno en la parte superior (el principal) y otro en la columna izquierda. También admite el rol presentation.

Si ponemos en el pie de página un menú, no hace falta marcarlo, ya lo hacemos con el rol contentinfo.

Role=”search”

Es lo que sería el cuadro de búsqueda de la página. En HTML5 no existe un elemento equivalente, por lo que se incluiría dentro de un div.

Role=”region”

Este rol, en recomendación de WAI-ARIA 1.1 pasó de los Document Structure Roles a los Landmark Roles. Se trata de una sección que contiene contenido relevante o específico. Debe tener una etiqueta label. Si una página incluye más de un region cada uno debe tener una etiqueta única.

Etiquetas con “aria-label” o “aria-labelledby”

ARIA nos proporciona unos mecanismos para agregarles etiquetas y descripciones a los elementos. Es la forma que tiene de proporcionar ayuda accesible o textos descriptivos.

Se puede hacer con los atributos “aria-label” y “aria-labelledby”.

aria-label

Con aria-label se pone la etiqueta dentro del atributo, lo que elimina el etiquetado nativo.

aria-label="Menú principal"

aria-labelledby

Se indica el ID del elemento que hace de título en esa zona.

<p id="report-title">Download 2012 Sales Report:
<a aria-labelledby="report-title pdf" href="pdf.pdf" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="word.doc" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="ppt.ppt" id="ppt">Powerpoint</a></p>

A tener en cuenta: Resumen

  • Usar el rol según la especificación, es decir, respetar si solo puede haber uno de un determinado tipo, o que el contenido de la zona se corresponda realmente con el rol asignado.
  • Que todo el contenido esté englobado dentro de elementos identificados con un rol, que no haya contenido que se quede huérfano. Así, el usuario de lector de pantalla puede navegar de forma segura de “landmark” en “landmark” sin perderse nada de la página.
  • Añadir “aria-label” o “aria-labelledby” para diferenciar varias zonas con el mismo rol asignado.
  • El primer contenido de una zona marcada con un landmark role debe ser lógico, por ejemplo, el primer contenido que esperas en un landmark “main” es un encabezado. Ten en cuenta que es lo primero que le anuncia el lector de pantalla de ese área.
  • Revisa en la versión móvil, si siguen teniendo sentido.

 

Criterios de conformidad de las WCAG 2.0 asociados

La inclusión de landmark roles en las páginas está relacionado con los siguientes criterios de conformidad de las WCAG 2.0

  • 1.3.1 Información y relaciones: La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto.
  • 2.4.1 Evitar bloques: Existe un mecanismo para evitar los bloques de contenido que se repiten en múltiples páginas web.
  • 4.1.2 Nombre, función, valor: Para todos los componentes de la interfaz de usuario (incluyendo pero no limitado a: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función pueden ser determinados por software; los estados, propiedades y valores que pueden ser asignados por el usuario pueden ser especificados por software; y los cambios en estos elementos se encuentran disponibles para su consulta por las aplicaciones de usuario, incluyendo las ayudas técnicas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *