ARIA

ARIA significa Accessible Rich Internet Applications, esto quiere decir que es una herramienta que podemos y debemos utilizar para mejorar la semántica de nuestra web haciéndola accesible para personas con alguna grado de discapacidad. Veamos un ejemplo simple sobre semántica.

Semántica

Mala

<body>
  <div>Bienvenido a ddiaalv.com</div>
  <span>Aprende algo más sobre ARIA</span>
  <div>Existen varios tipos de ARIA...</div>
  <div>copyright</div>
</body>

Buena

<body>
  <header>
    <p>Bienvenido a ddiaalv.com</p>
  </header>
  <main>
    <section>
      <h1>ARIA in HTML.</h1>
      <p>Existen varios tipos de ARIA...</p>
    </section>
  </main>
  <footer>copyright</footer>
</body>

Como podemos apreciar utilizamos etiquetas nativas con semántica para proporcionar una mayor información a nuestro usuario y la navegación sea lo más amigable posible.

Aunque existen diversos atributos para mejorar la compatibilidad, no todos son compatibles con los dispositivos utilizados por personas con discapacidad. Los dispositivos más comunes son:

  • Lectores de pantalla
  • Apuntadores
  • Teclados
  • OCR
  • Conmutadores

Aquí podemos ver la compatibilidad con lectores de pantalla:

WAI-ARIA Screen reader compatibility

ARIA Roles

Existen varias etiquetas HTML que tienen semántica de forma nativa como pueden ser: button, header, aside, footer, etc. ¿Pero que pasa fuera de esas etiquetas?.

Existen otros medios de mejorar la accesibilidad como asignar un rol a una etiqueta sin semántica (<div>) .

Un ejemplo podría ser al utilizar un menú:

<nav>
  <ul role="menu">
    <li>
      <a role="menuitem"> Overview </a>
    </li>
  </ul>
</nav>

Estos atributos se dividen en seis categorías

  1. Document structure roles:

Se utilizan para mostrar información sobre una sección de contenido. Ejemplos: toolbar, tooltip...

  1. Widget roles:

Son aquellos que se utilizan para mostrar información sobre elementos interactivos. La mayor diferencia entre los Widget y Document structure es que los Widget son elementos que utilizan Javascript. Ejemplos: searchbox, scrollbar...

  1. Landmark roles

Provee una forma fácil de organizar y estructurar nuestra web, digamos que son etiquetas que nos permiten identificar en que zona de la web nos encontramos. Ejemplos: banner, contentinfo...

  1. Live region roles

Definen elementos cuyo contenido puede cambiar de forma dinámica, se utilizan para personas con visibilidad reducida. Ejemplo: alert, log...

  1. Window roles

Elementos que se muestran “sobre la pantalla principal”, un buen ejemplo es un pop up o un modal. Ejemplo: alertdialog, dialog...

  1. Abstract roles

Este tipo de roles nunca se deben usar por nosotros en HTML, solo lo utilizan los navegadores para ayudar con la linea de tiempo y organizar el documento. Ejemplos: window, command...

Hay que recordar que muchos de estos roles tienen ya una etiqueta en HTML de forma nativa. Un ejemplo es: role=”banner” es el equivalente a <header> por lo que se prioriza la utilizacion de este último.

Si quieres saber cuantos roles existen échale un ojo al siguiente enlace:

WAI-ARIA Roles - Accessibility | MDN

Estados y propiedades

Existen varios atributos de ARIA que podemos añadir a las etiquetas de nuestro HTML que tienen la funcionalidad de apoyar a los roles:

Estados

Los estados cambian dependiendo de la interacción del usuario con un elemento:

  • aria-busy
  • aria-checked
  • aria-disabled
  • aria-expanded
  • aria-grabbed

Propiedades

Las propiedades por otro lado proveen información adicional al elemento:

  • aria-activedescendant
  • aria-atomic
  • aria-autocomplete
  • aria-controls
  • aria-describedby

Éstos se aplican directamente en un elemento o mediante Javascript por medio de una interacción con el usuario. Lista de roles, estados y propiedades:

Using ARIA: Roles, states, and properties - Accessibility | MDN

Conclusión

Las web deberían utilizar esta tecnología para que las personas con cierta discapacidad puedan disfrutar de la navegación. Desgraciadamente no existe una guía de como deberíamos estructurar nuestros ARIAS, pero siempre podemos utilizar de los testimonios de éstas personas para mejorar nuestro desarrollo.

Stories of Web Users