ARIA

WAI-ARIA — Accessible Rich Internet Applications — es una especificación del W3C que cubre una laguna específica: cuando los elementos HTML nativos no son suficientes para describir un control de interfaz personalizado, ARIA proporciona un vocabulario de roles, estados y propiedades que las tecnologías de asistencia (especialmente los lectores de pantalla) pueden interpretar.

Qué es y qué no es ARIA

ARIA es una capa sobre HTML. No añade comportamiento. Colocar role="button" en un <div> hace que un lector de pantalla lo anuncie como botón, pero no hace que el <div> sea enfocable, no añade la gestión del teclado ni agrega el estilo visual. Todo eso hay que añadirlo manualmente.

Esta es la fuente de la mayoría de los errores de ARIA en producción: los desarrolladores añaden el rol y se detienen, publicando así un «botón» que no responde a Intro ni a Espacio, no es alcanzable mediante Tab y carece de indicador de foco.

La primera regla de ARIA

Si se puede usar un elemento HTML nativo con la semántica y el comportamiento requeridos, hágase así.

Cada línea de ARIA que se escribe es una línea de semántica HTML que se ha decidido reimplementar manualmente. <button> ya se anuncia como botón, es enfocable, responde a Intro y Espacio, y tiene un anillo de foco —de forma gratuita—. <div role="button" tabindex="0"> con gestores de teclado personalizados lleva al mismo lugar, de forma frágil y con más código.

Las grandes categorías

ARIA define tres tipos de atributos:

• Roles — lo que el elemento es (role="button", role="dialog", role="navigation", role="alert"). La lista completa de roles supera las 80 entradas; la Guía de prácticas de autoría ARIA del WAI los agrupa en roles de punto de referencia (landmark roles), roles de componente (widget roles) y roles de estructura del documento.
• Estados — cuál es la condición actual del elemento (aria-expanded="true", aria-checked="false", aria-disabled="true"). Los estados cambian en tiempo de ejecución.
• Propiedades — cuáles son las relaciones del elemento (aria-labelledby="title-id", aria-describedby="help-id", aria-controls="menu-id"). Las propiedades son típicamente estáticas.

Las tres reglas restantes de ARIA

La secuencia de cinco reglas del W3C tras «usar HTML nativo cuando sea posible»:

2. No cambiar la semántica nativa, a menos que sea estrictamente necesario. (<h1 role="button"> confunde a los lectores de pantalla sobre si se trata de un encabezado o de un botón.)
3. Todos los controles ARIA interactivos deben ser utilizables con el teclado.
4. No usar role="presentation" ni aria-hidden="true" en un elemento enfocable.
5. Todos los elementos interactivos deben tener un nombre accesible.

Seguir estas cinco reglas elimina más del 80 % de los errores de ARIA.

Dónde consultar

La referencia operativa más útil es la Guía de prácticas de autoría ARIA (ARIA Authoring Practices Guide, APG), que ofrece patrones de implementación completos para los componentes más habituales —cuadros combinados, diálogos, vistas de árbol, pestañas— incluyendo tablas de interacción por teclado y ejemplos de DOM.