Qué es ARIA y cómo afecta a la accesibilidad

La norma ARIA o WAI-ARIA, acrónimo de Accessible Rich Internet Applications es una norma que añade sintaxis semántica a los elementos HTML e informa sobre su accesibilidad. Esta norma ofrece información sobre el funcionamiento de algunos elementos a las personas que empleen tecnología asistencial como un lector de pantalla.

Muchos roles y atributos ARIA de la norma están implícitos en algunos elementos interactivos como botones, radio buttons y checkbox, entre otros. Sin embargo, otros elementos que a priori no están diseñados para un comportamiento determinado, puede ser que necesiten de estos atributos y roles para hacerlos más accesibles.

La accesibilidad es una de las grandes olvidadas en el diseño web. Primeramente en el desarrollo de una página o una aplicación web todo el mundo se fija en el funcionamiento y diseño, pero características como la accesibilidad suelen quedar en segundo plano.

Esto es un error bastante común. Mimar la accesibilidad cumpliendo la norma ARIA tiene dos grandes beneficios:

1. Mejora el acceso y funcionalidad de la web o aplicación a personas con discapacidad.
2. Te ayudará a subir posiciones en buscadores, ya que mejorará tu SEO.

Qué hace ARIA

Aunque lo ideal es siempre emplear elementos de HTML nativos que tengan un comportamiento definido como:

• <menu>
• <article>
• <button>
• …

No siempre es posible, ya sea por diseño, por desarrollo; o ambas. Es por ello que es necesario indicarle a las aplicaciones de asistencia la funcionalidad que tiene ese elemento definida.

Un ejemplo muy frecuente, es el menú de una web. Actualmente, los menús se realizan empleando listas no ordenadas <ul>. A su vez, estas listas están compuestas por otras sublistas en las que están los submenús de cada apartado. En este caso concreto, la solución suelen pasar por seguir la norma ARIA. Los atributos darán la información necesaria para que la tecnología de asistencia sepa que es cada elemento.

Ejemplo de menú siguiendo norma ARIA

<div class="menu-button-links">
  <button type="button"
          id="menubutton"
          aria-haspopup="true"
          aria-controls="menu2">
    WAI-ARIA Quick Links
    <svg xmlns="http://www.w3.org/2000/svg"
         class="down"
         width="12"
         height="9"
         viewBox="0 0 12 9">
      <polygon points="1 0, 11 0, 6 8"></polygon>
    </svg>
  </button>
  <ul id="menu2"
      role="menu"
      aria-labelledby="menubutton">
    <li role="none">
      <a role="menuitem" href="https://www.w3.org/">
        W3C Home Page
      </a>
    </li>
    <li role="none">
      <a role="menuitem" href="https://www.w3.org/standards/webdesign/accessibility">
        W3C Web Accessibility Initiative
      </a>
    </li>
    <li role="none">
      <a role="menuitem" href="https://www.w3.org/TR/wai-aria/">
        Accessible Rich Internet Application Specification
      </a>
    </li>
    <li role="none">
      <a role="menuitem" href="https://www.w3.org/TR/wai-aria-practices/">
        WAI-ARIA Authoring Practices
      </a>
    </li>
    <li role="none">
      <a role="menuitem" href="https://www.w3.org/TR/wai-aria-implementation/">
        WAI-ARIA Implementation Guide
      </a>
    </li>
    <li role="none">
      <a role="menuitem" href="https://www.w3.org/TR/accname-aam-1.1/">
        Accessible Name and Description
      </a>
    </li>
  </ul>
</div>

Atributos de rol ARIA

Los atributos ARIA siempre suelen venir ligados al atributo rol, que indica el comportamiento con el que está funcionando. En ele ejemplo anterior podemos observar roles en algunos enlaces <a> como role=”menuitem”. A las tecnologías asistenciales este atributo les dice que ese link es parte de un menú.

Puedes ver la tabla completa aquí. La documentación sobre ARIA puede ser muy densa, por ello también puedes empezar a familiarizarte con la norma en ARIA APG (Authoring Practices Guide), que es un buen sitio para aprender y ver los atributos ARIA de los “widgets” más comunes de una web.

Uso correcto

Tal como comentamos al principio, existen elementos que implícitamente ya tiene su cometido, por lo que indicar su rol es una redundancia, además de un error, por ejemplo: <input type=”checkbox” role=”checkbox”>. A continuación te indicamos los errores más frecuentes que se realizan empleando reglas ARIA.

• Utilizar valores de [role] o [aria-*]no válidos. Los valores están tipificados y no podemos salirnos de la norma. Un [role=”desplegar”], no es válido por muy bien que nos suene.
• Que los atributos [aria-*] no coincidan con los roles que deben tener. En la tabla anterior te hemos puesto cuáles serían los indicados. Cada [aria-*] tiene unos valores de [role] determinados, y tampoco podemos inventar lo que nos dé la gana.
• No seguir la estructura ARIA. En la definición de cada [role] hay un orden establecido, de forma que un tipo padre, debe tener obligatoriamente unos hijos concretos. Por ejemplo, un [menuitem], tiene que estar contenido dentro de un [menu], si no está así, esto provocará un error.
• No emplear ARIA IDs únicos.

Normativa y SEO

Una de las principales ventajas, además de hacer tu web más accesible, es el aumento del SEO, lo que provocará una subida en los resultados de búsquedas. No obstante, aunque la adición de estos atributos visualmente no influyan, debes tener cuidado, porque estás añadiendo código a la web, y una de las comprobaciones que hace Google es la proporción texto-código que existe en cada página. Intenta no pasarte e introducir atributos en los elementos que realmente lo necesiten.

Herramientas de medición

Existen varias herramientas online que te permiten conocer si necesitas definir atributos ARIA en tu web. Normalmente, suelen ser funcionalidades integradas en otros sistemas que miden la accesibilidad, y entre sus atributos observan los atributis ARIA.

Lighthouse

Esta herramienta de Google se ofrece como una extensión, aunque actualmente ya está integrada en Chrome. Únicamente tienes que pulsar F12 y buscar la pestaña LightHouse. Acto seguido ejecuta un diagnóstico de accesibilidad y en caso de tener algún error o faltarte algún atributo ARIA, te lo notificará.

HRC-Favelets

Si tu navegador de referencia es Firefox, también tienes disponible una extensión para la revisión de los atributos ARIA de la web en cuestión. Esta herramienta observará la accesibilidad de tu página y te dirá las mejoras pertinentes que puedes llevar a cabo.

Conclusión

Cumplir con las normas ARIA hará tu web mejore mucho su accesibilidad. Es una tarea bastante delicada, en la que existen varias soluciones posibles (atributos y roles admitidos). Por ello ármate de paciencia y haz un análisis de tu web comprobando si cumples el estándar.