Accesibilidad web: ARIA y su composición

¿Qué es ARIA?

Una forma en que podemos usar ARIA es agregándolo a nuestro HTML. Es posible que ya esté familiarizado con los elementos semánticos en HTML, como navegación, botón o encabezado.

Muchos elementos se pueden hacer dinámicos añadiendo JavaScript y teniendo en cuenta la CSS para darle apariencia a cada uno de los elementos.

Pero para las personas que usan lector de pantallas no es tan fácil, y por eso, se aplican los Roles ARIA, que es lo que permite a estas personas saber de qué información se trata. Aquí es donde el navegador expone a la API de accesibilidad la información que es y el lector de pantalla la anuncia a las personas usuarias.

ARIA y su composición

 

Por tanto, ARIA se puede definir como un conjunto de atributos que se añaden a las etiquetas HTML, para que los agentes de usuario (navegadores y productos de apoyo), comprendan el funcionamiento de las etiquetas y actúen de manera consecuente.

Roles ARIA

Los roles ARIA permiten indicar la función de un elemento de la interfaz. Se asigna con el atributo role. Hay 81 roles clasificados por categorías:

  • Abstract: widget, window, section, input, etc. Sirven para definir tipos de roles generales.
  • Widgets: Menu, menuitem, tree, treeitem, tablish, tab, tabpanel, button, grid, etc.
  • Document structure: Definen la estructura para organizar el contenido en una página. No suelen ser interactivos: heading, table, img, tooltip, toolbar, list, presentation, etc.
  • Landmarks: Permiten definir las grandes zonas de la página igual que las etiquetas semánticas en HTML5.
  • Live region: Definen las zonas “vivas” de la página, es decir, las que cambian automáticamente sin la intervención de las personas usuarias: alert, log, marquee, status y timer.

role="alert": contiene información relevante y se anuncia con “alerta”. Debería ser aria-live=”assertive”

role="log": donde la información se agrega en orden significativo y la antigua puede desaparecer, debería ser aria-live=”polite”

role="marquee": información no relevante que cambia con frecuencia, debería ser aria-live=”off”

role="status": advertencia no lo suficientemente importante para justificar una alerta, debería ser aria-live=”polite”

role="timer": contador numérico del tiempo transcurrido o restante

  • Window: Para definir los mensajes de las ventanas: dialog y alertdialog.

Atributos de ARIA: Estados y propiedades

¿Qué es un estado?

Un estado es una propiedad dinámica que puede cambiar según la intervención de las personas usuarias, pero no siempre. Y cambian con menor frecuencia que las propiedades.

¿Qué son las propiedades?

Atributos que son esenciales para determinar el cambio en la presentación de un objeto. Estas cambian con más frecuencia debido a la interacción de las personas usuarias.

Tanto los estados como las propiedades, en la práctica, no es necesario diferenciarlos, y todos empiezan por aria-.

Existen 48 estados y propiedades y se dividen en cuatro categorías:

  • Atributos de Widgets: aria-checked, aria-disabled, aria-required, aria-selected, aria-reandoly, aria-expended, aria-label, etc
  • Atributos de Live region: Permiten definir cuando se producen los cambios en los productos de apoyo; aria-live, aria-atomic, aria-revelant, aria-busy.

aria-live

Indica que un elemento se modifica y se actualizará dinámicamente.

Esta propiedad tiene tres valores: “off”, “assertive” y “polite”.

aria-live=”off” Indica que es un valor predeterminado, que los cambios se anunciarán a las personas usuarias sólo cuando el foco esté en esa región.

aria-live=”assertive” Indica la prioridad de los cambios, los cambios que se deben presentar inmediatamente a las personas usuarias, con independencia de lo que estén haciendo en ese momento. Como es algo que puede ocasionar desorientación, sólo debe utilizarse para mensajes y advertencias importantes.

aria-live=”polite” Indica los cambios deben anunciarse sin interrumpir a las personas usuarias, por ejemplo, cuando terminan de escribir o de leer.

aria-atomic

Indica si las tecnologías de asistencia presentarán toda o solo las partes que han cambiado.

Esta propiedad tiene dos valores: true/false

Si aria-atomic se establece en “false”, sólo presentarán a las personas usuarias el nodo que ha cambiado. Si se establece en “true” presentarán el contenido completo.

aria-revelant

Con este atributo indicamos qué tipo de actualización de la live region deseamos que se anuncie al usuario:

Este atributo se compone de 4 valores: “additions”, “all”, “removals”, “text”

aria-revelant=”additions”, anuncia los elementos que se añaden al DOM.

Si el contenido que se añade es semánticamente relevante será importante anunciarlo. Sin embargo, si es meramente decorativo no tiene sentido que se anuncie.

aria-relevant=”all”: anunciará todo, es decir, los elementos añadidos, eliminados y las modificaciones de texto.

aria-relevant=”removals”: anuncia los elementos que se eliminan del DOM. Igual que en el caso anterior, es importante tener en cuenta si el elemento eliminado es relevante o solo decorativo. Por ejemplo, en un listado de amigos en línea, si un amigo se desconecta sería interesante anunciar que se ha eliminado de la lista.

aria-relevant=”text”: anuncia las modificaciones de texto.

aria-busy

Por defecto su valor es “false”. Este atributo se utiliza cuando muchas partes de un mismo elemento van a ser modificadas, entonces puedes poner el valor a “true” para que temporalmente no anuncie las modificaciones y, una vez que se hayan llevado a cabo, volver a ponerlo a “false” para que las anuncie.

  • Atributos Drag and Drop: aria-dropeffect y aria-grabbed. Son elementos obsoletos que pueden eliminarse en futuras versiones, pero se recomienda a los agentes de usuario que continúen admitiéndolos por compatibilidad con versiones anteriores.
  • Atributos de relaciones: Expresan relaciones entre los elementos que no se pueden determinar fácilmente a partir de la estructura del documento; aria-controls, aria-labelledby, aria-posinset, aria-setsize, etc

aria-controls: Identifica el elemento cuyo contenido están controlados por el elemento actual. Por ejemplo, un grupo de casillas de verificación puede controlar qué precios de productos básicos se rastrean en vivo en una tabla o gráfico. O una pestaña que controla la visualización de su panel de pestañas asociado.

aria-labelledby: Identifica el contenido que etiqueta el elemento actual. Proporciona a las personas usuarias un nombre reconocible del objeto.

El atributo aria-labelledby es similar a aria-describedby, porque ambos hacen referencia a otros elementos para poner una alternativa de texto, pero una etiqueta debe ser concisa, una descripción está destinada a proporcionar información más detallada.

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>

Otro ejemplo donde se puede aplicar aria-labelledby es con los formularios de búsqueda, en la etiqueta del botón adyacente:

Formulario de búsqueda con una caja de texto y un botón Buscar

<input name="search" type="text" aria-labelledby="btn"></input>
<input name="search" id="btn" type="submit" value="Buscar">

aria-posinset: Define el número o la posición de un elemento en el conjunto actual de elementos de lista o de árbol. Esta propiedad está relacionada con aria-setsize.

El siguiente ejemplo muestra los elementos del 5 al 8 en un conjunto de 16.

<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
  <li role="option" aria-setsize="16" aria-posinset="5"> apples </li>
  <li role="option" aria-setsize="16" aria-posinset="6"> bananas </li>
  <li role="option" aria-setsize="16" aria-posinset="7"> cantaloupes </li>
  <li role="option" aria-setsize="16" aria-posinset="8"> dates </li>
</ul>

Referencias:

  • Libro: Accesibilidad web WCAG 2.1 de forma sencilla, de Olga Carreras y Olga Revilla.
  • W3C WAI ARIA

Deja un comentario

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