¿Qué es WAI-ARIA y cuándo debo usar atributos ARIA?

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) es una especificación técnica del W3C diseñada para hacer que el contenido web y las aplicaciones web, especialmente aquellas con interfaces de usuario complejas o componentes personalizados construidos con JavaScript, sean más accesibles para personas con diversidad funcional.

Funciona proporcionando un conjunto de atributos HTML (principalmente el atributo role y diversos atributos aria-*) que puedes añadir a tus elementos para darles un significado semántico adicional que las tecnologías de asistencia (AT), como los lectores de pantalla, puedan entender e interpretar. ARIA no cambia la apariencia ni el comportamiento de los elementos para los usuarios que no usan AT, solo afecta al «árbol de accesibilidad» que usan estas tecnologías.

¿Cuándo debes usar atributos ARIA?

La regla de oro es la primera regla de ARIA: «No uses ARIA si puedes usar HTML nativo». Esto significa:

1. Prioriza el HTML semántico nativo: Si existe una etiqueta HTML (<button>, <nav>, <input type="checkbox">, <details>, etc.) o un atributo HTML (como required, hidden, checked) que ya proporciona la semántica y el comportamiento que necesitas, ¡úsalo! El HTML nativo es inherentemente más accesible y robusto.
   • Por ejemplo, es mucho mejor usar <button>Un botón</button> que <div role="button" tabindex="0">Un botón</div>.

Debes usar atributos ARIA principalmente en las siguientes situaciones, cuando el HTML nativo no es suficiente:

2. Para componentes de interfaz de usuario personalizados (widgets):
   Cuando construyes componentes interactivos complejos con JavaScript y elementos genéricos como <div> o <span> (por ejemplo, carruseles, menús desplegables, selectores de fecha, controles deslizantes, paneles de pestañas, diálogos modales) que no tienen un equivalente HTML directo con la semántica adecuada.
   • En estos casos, usas role para definir qué es el componente (ej. role="tablist", role="dialog") y atributos aria-* para sus estados y propiedades (ej. aria-selected="true" para una pestaña, aria-expanded="false" para un menú contraído, aria-hidden="true" para un diálogo oculto).
   <div role="tablist">
<div role="tab" aria-selected="true" aria-controls="panel1" tabindex="0">Pestaña 1</div>
<div role="tab" aria-selected="false" aria-controls="panel2" tabindex="-1">Pestaña 2</div>
</div>
<div id="panel1" role="tabpanel">Contenido de la Pestaña 1...</div>
<div id="panel2" role="tabpanel" hidden>Contenido de la Pestaña 2...</div>
3. Para describir relaciones y estructuras complejas:
   Cuando la relación entre diferentes partes de la interfaz no es obvia solo con el DOM, ARIA puede ayudar (ej. aria-controls, aria-labelledby, aria-describedby).
4. Para indicar estados y propiedades dinámicas:
   Cuando el estado de un componente cambia debido a la interacción del usuario (ej. un acordeón que se expande y contrae, un checkbox personalizado que se marca/desmarca). Necesitas usar JavaScript para actualizar los atributos ARIA correspondientes (como aria-expanded o aria-checked).
   <button aria-expanded="false" aria-controls="menu-contenido"> Menú </button>
<div id="menu-contenido" hidden> </div>
5. Para regiones vivas (Live Regions):
   Para informar a los usuarios de tecnologías de asistencia sobre cambios de contenido importantes que ocurren dinámicamente sin que la página se recargue (ej. mensajes de error, notificaciones de chat, actualizaciones de estado). Se usan atributos como aria-live (con valores como polite o assertive), aria-atomic, y aria-relevant.

Importante:

• ARIA no añade comportamiento: Si usas role="button", eres responsable de añadir la interactividad de teclado (Enter, Espacio) y la lógica con JavaScript. ARIA solo comunica la semántica.
• «No ARIA es mejor que mala ARIA»: Usar ARIA incorrectamente puede empeorar la accesibilidad. Si no estás seguro, es mejor usar HTML nativo y simple. Prueba siempre con tecnologías de asistencia.

En resumen, WAI-ARIA es un complemento poderoso al HTML semántico, diseñado para cubrir los vacíos de accesibilidad en aplicaciones web ricas e interactivas, pero siempre debe usarse con conocimiento y priorizando las soluciones nativas de HTML.