WAI-ARIA Accesibilidad Digital

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Otros sitios
Logo Accesibilidad Digital   Accesibilidad Digital
Accesibilidad Digital

WAI-ARIA

Introducción

WAI-ARIA (Web Accessibility Initiative - Accesible Rich Internet Applications) es una especificación del W3C, recomendación desde el 20 de marzo de 2014. La versión actual es la 1.1.

WAI-ARIA (ARIA y los controles desarrollados con Ajax, HTML, Javascript y sus tecnologías relacionadas.

WAI-ARIA (ARIA en adelante) está pensado para hacer más accesible el contenido dinámico –principalmente JavaScript y Ajax- transmitiendo a las APIs de accesibilidad de los navegadores web información sobre el comportamiento de la interfaz y su estructura, para que los productos de apoyo puedan acceder a dicha información.

Ejemplos de componentes que necesitan atributos WAI-ARIA son los cuadros modales, carruseles, áreas interacticas en las que se recarga el contenido dinámicamente, menús desplegables, etc.

En los siguientes apartados se describen los principales atributos y propiedades de WAI-ARIA.

 

Tabindex

Es conveniente recordar que en HTML sólo pueden recibir el foco del teclado los enlaces, botones y elementos de formulario.

Por el contrario los elementos HTML tales como listas, párrafos, capas div o span, etc nunca recibirán el foco del teclado al tratarse de elementos con un propósito diferente: marcar y maquetar el contenido.

Por este motivo, no se debe incluir nunca eventos javascript tales como onclick u onkeypress en elementos de mara y maquetación, puesto que estaríamos dejando fuera a los usuarios que acceden sin ratón, como pueden ser usuarios de lectores de pantalla o el robot de búsqueda de Google

Veamos un ejemplo: si incluímos un evento onclick en un elemento div:

<div onclick="alert('¡Saludo!');">Púlsame</div>

Lo que estamos haciendo es crear una capa div que simula el comportamiento de un enlace o un botón, que no es su propósito y además, jamás se podrá acceder por teclado ya que este elemento nunca recibirá el foco.

Por esta razón, no deberíamos agregar eventos javascript a elementos que no sean enlaces, botones u elementos de formulario.

Dicho lo anterior, en ocasiones se hace necesario utilizar elemensots de marca y maquetación como div o li para realizar acciones dinámicas, en estos cosas podemos utilizar el atributo de WAI-ARIA tabindex  para informar a los navegadores web que ese elemento puede recibir el foco y por tanto, ejecutar eventos como onclick.

siguiend el ejemplo anterior del div con onclick, le añadiríamos el atributo tabindex con el valor 0 para indicar que el elemento puede recibir el foco:

<div onclick="alert('¡Saludo!');" tabindex="0">Púlsame</div>

De esta manera, si en un navegador web, vamos pulsando la tecla TAB de nusetro teclado, el foco se irá colocando sobre los enlaces, botones, elementos de formulario y los elementos marcados con tabindex="0".

El atributo tabindex puede utilizarse para varios cometidos dependiendo del valor que le asignemos:

  • tabindex="0": como hemos visto en el ejemplo permite que un elemento de marca o maquetación como div, p, li, ..., que no pueden recibir el foco por defecto, puedan recibirlo. De esta forma se podrá acceder con el tabulador hasta él y el orden en el que se incorpora en la página es el lugar que ocupa en el código HTML.
  • tabindex="-1": se diferencia del caso anterior en que no podremos tabular hasta el elemento. Lo que permite es que pueda coger el foco mediante JavasScript con la función focus(), para hacer scroll a una parte de la página.
    • Un ejemplo de uso real sería para un cuadro de diálogo DIV (<div id="cuadro-modal" tabindex="-1">...</div>): al pulsar el botón de abrir diálgoo, el foco deberá moverse al elemento que hemos marcado con tabindex="-1" y al cerrarla deberá volver al enlace o botón que la abrió.
  • tabindex=”x” donde x es un número entero. Define un orden de tabulación explícito: 1,2, 3, etc. Esto quiere decir que si ponemos un elemento <div tabindex="1">...</div>, aunque el código en la página HTML esté al final, cuando pulsemos tabulador será el primer elemento que recibe el foco del teclado.
    • No se recomienda su uso pues puede crear confusión.

 

Roles

Incluir información sobre el rol o función de un elemento de nuestra página mediante ARIA es tan sencillo como añadir a la etiqueta del elemento role=”[nombre_del_rol]”.

Por ejemplo:

<div role=”progressbar”>
<ul role=”tree”>,
<li role=”treeitem”>
<ul role=”nav”>
<div role=”application”>

No se debe cambiar dinámicamente el rol de un elemento, este es fijo. Si se quiere cambiar habría que eliminar del DOM el elemento y crear uno nuevo con el nuevo rol.

Puedes consultar todos los roles en Roles of AI-ARIA 1.1 (en inglés) .

Existen dos tipos de roles, aquellos que definen elementos de la interfaz (árboles, alertas, sliders, etc.) y los que definen la estructura de la página (cabecera, navegación, pie).

Landmark roles

Dentro de los que definen la estructura de la página se distinguen los landmark roles, que se usan para identificar áreas separadas de la pagina y transmitir la naturaleza de las mismas.

Se trata de añadir características útiles de navegación global, consistentes en cualquier documento (X)HTML, que transmiten información de la estructura de la página e información semántica sobre estas zonas.

Los roles de estructura y su función son:

  • role=”banner”. Sólo debe existir uno en la página y es para marcar generalmente la cabecera de la página web donde se encuentra el título, logo, etc.
  • role=”navigation”. Se de utilizar para marcar los elementos que que forman un menú, por ejemplo una lista ul.
  • role=”main”.Marca donde está el contenido principal de la página.
  • role=”complementary”. Contenidos que no son imprescindibles el contenido, por ejemplo un slider, barra lateral con publicidad, etc.
  • role=”contentinfo”. Para marcar una zona en la que hay información sobre la página y que se repite en todas, por ejemplo la informaicón legal, enlaces de navegación de un sitio y demás información que generalmente se ubica en la parte inferior de la página web..
  • role=”search.Para marcar las zonas donde hay un buscador en la página.
  • role=”form”. Para marcar las zonas donde hay formularios.
  • role=”application”. Se marca esta zona si hay una aplicación web interactiva, como juegos y similar que cambian las reglas del uso normal del teclado.

En geneal, es recomendable utilizar las etiquetas nativas de HTML5 para marcar zonas de un sitio web como puede ser <nav>, <header, ....

Pero si las utilizamos, no se debe poner la etiqeuta y role juntos por redundcia, por ejemplo:

<nav role="navigation">...</nav> MAL

Por último, y no menos importante, para los roles de estructura, es necesario incluir el atributo aria-label (que veremos a continuación) para indicar el título de la zona. Por ejemplo:

<div role="navigation" arial-label="Menú principal"><ul>...</ul></div>

 

Aria-label, aria-labelledly y aria-describedby

Estos atributos nos permiten dar un nombre accesible, etiquetar o dar una descripción a los elementos HTML que lo necesiten. En la referencia puedes encontrar todos los atributos y su propósito (en inglés) .

Aria-label

Sirve para dar nombre accesible a un elemento. Debe usarse sólo en ocasiones que lo requieran, por defecto el nombre de un elemento debe ser su contenido.

Ejemplo, si tenemos un enlace que cierra un cuadro modal y lo escribimos con una X, el nombre accesible debería ser cerrar.

<a href="#" aria-label="Cerrar">x</a>

Aria-labelledby

Como aria-label, sirve para dar un nombre a un elemento HTML, la diferencia es que con aria-label indicas directamente el texto y con aria-labelledby el id/ids del elemento/s de la página que actúa/n como contenido.

Ejemplo:

<p id="titulo-informe">Descargar el informe de accesibilidad en: 
<a aria-labelledby="titulo-informe pdf" href="pdf.pdf" id="pdf">PDF</a> | 
<a aria-labelledby="titulo-informe docx" href="word.docx" id="docx">Word</a> | 
<a aria-labelledby="report-title pptx" href="ppt.pptx" id="pptx">Powerpoint</a></p>

Aria-describedby

Por otro lado, aria-describedby permite asociar una descripción larga a un elemento indicando el id del elemento que proporciona la descripción.

Aria-describedat

Similar a aria-describedby, pero permite incluir la URL de la página que describe al elemento.

 

Estados y propiedades

Los elementos dinámicos cambian de estado, por ejemplo un menú desplegable puede estar plegado o desplegado. ARIA permite definir las propiedades y estados de los elementos.

<li role="treeitem" aria-expanded="false" tabindex="0" onclick="a()" onkeypress="a()">Lenguajes</li>

En este ejemplo se indica que el elemento del árbol "Lenguajes" está plegado. Cuando el usuario lo despliegue deberás cambiar dinámicamente su estado mediante javascript para que los productos de apoyo puedan transmitir el cambio al usuario.

$id.attr('aria-expanded', 'true');

Por tanto, el rol es fijo, no se cambia, los estados y propiedades son dinámicos.

Lo más importante, y que no debes olvidar, es que no solo tienes que indicar el estado y propiedades iniciales, sino que debes modificarlos dinámicamente por javacript cuando estos cambien, de modo que el usuario de productos de apoyo conozca siempre su estado actual. Los roles no se actualizan, los estados y propiedades sí.

 

 

Live regions: aria-live

aria-live permite identificar una zona dinámica de nuestro contenido que se actualiza automáticamente, de esta manera los cambios se anunciarán al usuario de los productos de apoyo. En función de su valor (off, polite, assertive) indicaremos cuándo queremos que se anuncie la actualización.

Se combina con aria-atomic para indicar si queremos que se anuncie toda la región o solo las partes que cambian, y con aria-relevant para indicar el tipo de actualización que queremos que se anuncie.

 

Conclusiones

Para finalizar, se listan unas recomendaciones y buenas prácticas para aplicar WAI-ARIA que se encuentran en la referencia oficial de WAI-ARIA 1.1 del W3C:

  • Usa marcado nativo cuando sea posible. Si puedes usar <input type=”checkbox”> o <button> úsalos en vez de <div role=”checkbox”> o <div role=”button>. Ten en cuenta que el rol ARIA anula el rol nativo. Puedes consultar la lista de elementos nativos que deberías intentar usar antes que su rol equivalente en una referencia rápida en "What is WAI-ARIA, what does it do for me, and what not?", marcozehe.de, marzo 2014; o en su totalidad, con ejemplos de malas prácticas y errores comunes en Using WAI-ARIA in HTML, W3C.
  • Usa los roles adecuados según la especificación y recuerda que el rol no se debe cambiar dinámicamente.
  • Forma grupos lógicos (por ejemplo con role=”group”, role=”toolbar”); incluye landmark roles para facilitar la navegación por teclado; define las live regions (zonas que cambian dinámicamente sin intervención del usuario)
  • Construye relaciones donde sea necesario.

 

Referencias