ARIA

Accessible Rich Internet Applications (ARIA) es una colección de atributos que definen como realizar contenido y aplicaciónes web (especialmente las desarrolladas con Javascript) más accesibles para las personas con discapacidades.

Complementa HTML para que las interacciones y los widgets que se usan comúnmente en las aplicaciones puedan ser correctamente interpretadas por las tecnologías de asistencia cuando no existe otro mecanismo. Por ejemplo, ARIA habilita accesibilidad a widgets de JavaScript, sugerencias de formularios, mensajes de error, actualizaciones de contenido en vivo y más.

Advertencia: Muchos de estos widgets se incorporaron posteriormente a HTML5, y los desarrolladores deberían preferir usar el elemento HTML semántico correcto en lugar de usar ARIA, si tal elemento existe. Por ejemplo, los elementos nativos tienen incorporado accesibilidad de teclado, roles y estados. Sin embargo, si elige usar ARIA, es responsable de imitar el comportamiento equivalente del navegador en la secuencia de comandos.

La primera regla de ARIA es "Si puede usar un elemento o atributo HTML nativo con la semántica y el comportamiento que necesita ya integrado, en lugar de reutilizar un elemento y agregar un rol, estado o propiedad de ARIA para hacerlo accesible, hágalo".

Nota: Hay un dicho "No utilizar ARIA es mejor que utilizar una mala ARIA". En la encuesta de WebAim de más de un millón de páginas de inicio, encontraron que las páginas de inicio con ARIA presentes promediaron un 41 % más de errores detectados que aquellas sin ARIA. Si bien ARIA está diseñado para hacer que las páginas web sean más accesibles, si se usa incorrectamente, puede hacer más daño que bien.

Aquí está el marcado para una barra de progreso:

html

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"></div>

Esta barra de progreso se construye usando un <div>, que no tiene significado. Incluimos roles y propiedades de ARIA para agregar significado. En este ejemplo, el atributo role="progressbar" informa al navegador que este elemento es en realidad un widget de barra de progreso impulsado por JavaScript. aria-valuemin y aria-valuemax especifican los valores mínimo y máximo para la barra de progreso, y aria-valuenow describe el actual estado del mismo y por lo tanto debe mantenerse actualizado con JavaScript.

Además de colocarlos directamente en el marcado, los atributos ARIA se pueden agregar al elemento y actualizar dinámicamente usando un código JavaScript como este:

// Obteniendo la barra de progreso <div> en el DOM
var progressBar = document.getElementById("percent-loaded");

// Configurando estados y roles ARIA
// so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Función que se puede llamar en cualquier momento para actualizar
// el valor de la barra de progreso
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

Todo el contenido que está disponible para usuarios de tecnología no asistencial debe estar disponible para tecnologías asistenciales. Del mismo modo, no se deben incluir funciones dirigidas a usuarios de tecnología de asistencia que no sean accesibles para aquellos que no usan tecnologías de asistencia. La barra de progreso anterior debe diseñarse para que parezca una barra de progreso.

Habría sido mucho más simple usar el elemento nativo <progress> en su lugar:

html

<progress id="percent-loaded" value="75" max="100">75 %</progress>

Nota: El atributo min no está permitido para el elemento <progress>; su valor mínimo es siempre 0.

Nota: Los elementos de referencia HTML (<main>, <header>, <nav> etc.) tienen roles ARIA implícitos, por lo que no es necesario duplicarlos.

Soporte

Como cualquier otra tecnología web, existen diversos grados de soporte para ARIA. El soporte se basa en el sistema operativo y el navegador que se utiliza, así como en el tipo de tecnología de asistencia que interactúa con él. Además, la versión del sistema operativo, el navegador y la tecnología de asistencia son factores que contribuyen. Es posible que las versiones de software anteriores no admitan ciertas funciones de ARIA, solo tengan compatibilidad parcial o informen incorrectamente su funcionalidad.

También es importante reconocer que algunas personas que confían en la tecnología de asistencia son reacias a actualizar su software por temor a perder la capacidad de interactuar con su computadora y navegador. Debido a esto, es importante usar elementos HTML semánticos siempre que sea posible, ya que el HTML semántico es mucho más compatible con la tecnología de asistencia.

También es importante probar su ARIA creado con tecnología de asistencia real. Así como los emuladores y simuladores de navegador no son una solución efectiva para probar el soporte completo, las soluciones de tecnología de asistencia de emuladas no son suficientes para garantizar completamente la funcionalidad.

Tutoriales

Introducción a ARIA: Una introducción rápida a cómo hacer que el contenido dinámico sea accesible con ARIA. Véase también el clásico introducción a ARIA de Gez Lemon, de 2008.
Videos de lectores de pantalla usando ARIA: Vea ejemplos reales y simplificados de toda la web, incluidos videos de ARIA "antes" y "después".
Usando ARIA: Una guía práctica para desarrolladores. Sugiere qué atributos ARIA usar en elementos HTML. Las sugerencias se basan en las realidades de la implementación.

Mejoras simples de ARIA

Mejora de la navegación de páginas con referencias de ARIA: Una buena introducción al uso de los puntos de referencia de ARIA para mejorar la navegación de la página web para los usuarios de lectores de pantalla. Consulte también las notas de implementación históricas de ARIA y ejemplos en sitios reales (actualizado en julio de 2011).
Mejorando la accesibilidad de los formularios: ¡ARIA no es solo para contenido dinámico! Aprenda a mejorar la accesibilidad de los formularios HTML utilizando atributos ARIA adicionales.

ARIA para widgets con scripts

Escribir widgets JavaScript navegables por teclado: Elementos integrados como <input>, <button> etc. tienen accesibilidad de teclado integrado. Si 'falsifica' estos con <div>s y ARIA, debe asegurarse de que sus widgets sean accesibles desde el teclado.
Regiones en vivo: Las regiones activas brindan sugerencias a los lectores de pantalla sobre cómo manejar los cambios en el contenido de una página.
Uso de regiones en vivo de ARIA para anunciar cambios de contenido: Un breve resumen de las regiones en vivo, por los creadores del software de lectura de pantalla JAWS. Las regiones en vivo también son compatibles con NVDA con Firefox y VoiceOver con Safari.

Referencias

Funciones ARIA: Páginas de referencia que cubren todos los roles de WAI-ARIA discutidos en MDN.
Estados y propiedades de ARIA: Páginas de referencia que cubren todos los estados y propiedades de WAI-ARIA discutidos en MDN.rted por NVDA con Firefox y VoiceOver con Safari.

Esfuerzos de estandarización

Especificación WAI-ARIA: La propia especificación W3C.
Prácticas de creación de WAI-ARIA: Las mejores prácticas oficiales documentan la mejor manera de ARIA-ficar widgets e interacciones comunes. Un excelente recurso.