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

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.0 y se está elaborado 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 información sobre el comportamiento de la interfaz y su estructura, para que los productos de apoyo puedan acceder a dicha información.

 

Tabindex

Hay que recordar que en HTML 4 y XHTML solo pueden recibir el foco los enlaces y elementos de formulario. No sucede lo mismo con los eventos, puesto que en todos los elementos se pueden incluir eventos.

Por ejemplo en un elemento LI de una lista, si incluimos los eventos onclick y onkeypress no podremos acceder al elemento mediante el teclado –como pueden ser los usuarios de lectores de pantalla- porque nunca recibirá el foco.

Para que un elemento, que no sea un enlace o control de formulario, pueda recibir el foco se utiliza el atributo tabindex. A continuación se listan los posibles valores que puede tener:

 

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 WAI-ARIA 1.0 (Categorization of Roles) (http://www.w3.org/TR/wai-aria/roles#roles_categorization )

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)

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. De esta manera añadimos 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.

 

Estados y propiedades

Los elementos dinámicos cambian de estado, por ejemplo un elemento de un árbol 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.

Podéis encontrar el listado y descripción de todos ellos en ARIA 1.0 (Supported States and Properties): (http://www.w3.org/TR/wai-aria/states_and_properties )

Algunos ejemplos de uso

 

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.

 

aria-label, aria-labelledly y aria-describedby

Tanto aria-label como aria-labelledby permiten etiquetar un elemento.

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

Ejemplo de aria-label:

<div id="leftnav" role="navigaton" aria-label="Menú principal">
<ul><li>...una lista de enlaces ...</li></ul> </div>
<div id="rightnav" role="navigation" aria-label="Menú sencundario">
<ul><li>...una lista de enlaces ...</li> </ul></div>

Ejemplo de aria-labelledby:

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

Hay que tener cuidado con su uso. aria-label pueden ser desatendida si se usa con aria-labelledby y anula otras formas nativas de etiquetado como ALT en las imágenes o <label> en los campos de formulario. Por tanto hay que usarlas cuando estas otras formas de etiquetado nativo no pueden usarse, como en los ejemplos anteriores, y no en vez de ellas.

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

Uno de las novedades previstas en la versión WAI-ARIA 1.1 será la inclusión de aria-describedat que permitirá incluir la URL de la página que describe al elemento.

 

Otros estados y propiedades

aria-autocomplete y aria-activedescendant permiten mejorar la accesibilidad de las sugerencias en los campos de formularios.

Sugerencias en la caja de búsqueda de Google. Aria-activedescendant to add focus to child elements. This alert screen readers to read suggestions aloud.

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

Pasos y buenas prácticas para aplicar WAI-ARIA

 

Buenas prácticas

En el documento del W3C, WAI-ARIA 1.0 Primer, se nos indican los pasos y buenas prácticas para aplicar WAI-ARIA.