WAI-ARIA: haciendo la web más accesible
No hace tanto que diseñar un sitio web accesible era sinónimo de soso o aburrido. Había que eliminar cualquier adorno que no cumpliese con la estricta semántica dada por HTML.
Por suerte hoy en día esto ya no es así (aunque hay quién aún lo piensa). WAI-ARIA nos ayuda a dar significado a esas partes de nuestro código que se salen de la semántica de HTML, dando apoyo a las aplicaciones de accesibilidad para que las personas que las usan comprendan nuestra web o aplicación.
¿Pero qué es en realidad WAI-ARIA?, ¿se debe usar en todas las etiquetas de HTML?, y aún más importante ¿qué es lo que no se debe hacer con esta tecnología?. A estas y seguramente otras preguntas voy a tratar de responder, en lo que pretende ser una aproximación a la accesibilidad web. ¿Te apuntas?.
¿Qué es WAI-ARIA?
WAI-ARIA (Web Accessibility Initiative – Accesible Rich Internet Applications), es una especificación de la W3C cuyo propósito es dar significado a aquellos elementos que no lo tienen, estableciendo roles para cada elemento, relacionándolos entre ellos, informando de su estado y facilitando los controles a través de teclado, dando así soporte a las APIs de accesibilidad.
Roles ARIA
El rol o funcionamiento de un elemento se añade al marcado HTML de igual forma que cualquier otro atributo, y define el tipo de elemento y para que sirve.
El nombre del rol debe ser uno de los definidos por la especificación WAI-ARIA y debe usarse de forma correcta. En el siguiente ejemplo, sugerimos que el contenido del elemento proporciona algún tipo de información sobre el elemento en el cual se encuentra contenido, lo que viene a ser un pie de página:
<div role="contentinfo">
Esta web está diseñada por un alienígena loco por el CSS.
</div>
Atributos ARIA
Un atributo ARIA proporciona información específica sobre un objeto concreto y forma parte de la definición de la naturaleza de los roles. Tiene un comportamiento dinámico (no como el rol que no cambia), permitiendo definir las propiedades y estados de los elementos.
Realmente estos atributos se dividen en dos tipos: propiedades y estados. Sin embargo su diferencia es muy sutil, como tantas otras a las que tan acostumbrados nos tiene la W3C. La mayor diferencia es que las propiedades cambian menos que los estados. Si quieres profundizar un poco más puedes consultar el documento WAI-ARIA 1.0 (Propiedades y Estados Soportados).
Un ejemplo muy claro de los atributos ARIA, en este caso un estado, sería su uso para una checkbox, ya que esta posee dos estados: seleccionada y no-seleccionada. Para este ejemplo creamos una checkbox indicando que su estado por defecto es seleccionada:
<span role="checkbox" aria-checked="true">
</span>
ARIA también tiene reglas
Lo principal a tener siempre en mente es que no debemos usar WAI-ARIA para todo, de hecho cuanto menos WAI-ARIA uses mejor. Su finalidad está muy clara, por tanto esto es lo que debes hacer:
Usa elementos semánticos de HTML siempre que sea posible
Elementos de HTML5 como nav, header o footer llevan implícitos los roles ARIA role="navigation", role="banner" y role="contentinfo" respectivamente. Por tanto no hagas lo que yo he hecho en los ejemplos anteriores y en vez de <div role="contentinfo">, mejor usar footer. Es mucho más correcto. Eso sí, no hagas sobre-marcado, no es necesario añadir ningún role porque ya está implícito.
Para saber que roles lleva asociado cada elemento o que roles, estados o propiedades podemos usar en él siempre puedes consultar esta tabla de la W3C sobre las reglas de uso de los atributos ARIA.
Por ejemplo, vamos a hacer un botón con un elemento span y le daremos significado semántico mediante el rol apropiado:
<span class="boton" rol="button">
</span>
Con esto sólo conseguimos que por ejemplo un screenreader anuncie el elemento span como si fuese un botón, sin embargo para el navegador no tiene significado alguno. Lo que quiero decir con esto es que a fin de cuentas no es un botón real, falta darle el aspecto necesario para que se asemeje a uno, lo que haríamos con CSS. Pero hay más, porque tampoco es accesible desde teclado, con lo cual deberemos usar el atributo tabindex="0" para que este elemento pueda coger el foco. Lo lógico sería usar la etiqueta button y problema resuelto.
Un sólo rol por elemento
Un elemento de HTML sólo puede tener un rol. Un rol tiene un significado semántico de una u otra forma, por tanto un elemento no puede ser dos tipos de objetos diferentes. ¿Acaso puede una cabecera ser también un pie de página?.
Usa los roles con cabeza y elige siempre aquel que se aproxime más al funcionamiento de tu elemento.
No cambies la semántica de un elemento
Nunca (salvo casos excepcionales) uses un rol para contrarrestar el efecto del rol que lleva un elemento de forma implícita. En su lugar usa un elemento apropiado a lo que buscas, o sino es posible, siempre es preferible anidar elementos HTML.
Por ejemplo, pongamos que tengo una imagen como único elemento de la cabecera principal de una web, como puede ser un logo. Bien podría pensar en hacer lo siguiente:
<header rol="img">
</header>
Evidentemente no es correcto. Como comenté anteriormente no es posible tener más de un rol por elemento, por tanto el rol="banner" que implícitamente lleva asignado header queda reemplazado por el nuevo que le hemos asignado. Así de cara a cualquier tecnología de asistencia, header será anunciado como una imagen, mientras que para el navegador seguirá siendo una etiqueta header.
Lo correcto sería hacerlo hacerlo de la forma siguiente, donde queda claro que nuestra imagen, que es un logo corporativo, forma parte de la cabecera principal de la página.
<header>
<img src="logo.gif" alt="Logo" />
</header>
Para información más detallada a cerca de como usar WAI-ARIA en HTML siempre puedes consultar el documento de la W3C Notas sobre el uso de ARIA en HTML.