ARIA para Accesibilidad

ARIA (Accessible Rich Internet Applications) es una especificación del WAI (Web Accessibility Initiative) del W3C que proporciona una forma de hacer aplicaciones web interactivas más accesibles para personas con discapacidades, especialmente aquellas que utilizan tecnologías de asistencia como lectores de pantalla. ARIA permite agregar información adicional sobre el rol, el estado y las propiedades de los elementos HTML, facilitando la navegación y comprensión del contenido dinámico.
Imagina que una página web es como una biblioteca: el HTML define las estanterías y los libros, pero sin un buen sistema de catalogación (como los roles y etiquetas ARIA), es difícil encontrar lo que buscas. ARIA actúa como un sistema de organización que hace visible lo invisible, proporcionando contexto y estructura a quien no puede verlo.
En sitios de portafolio, ARIA permite describir carruseles o botones de alternancia de temas; en un blog, puede facilitar la navegación entre pestañas de contenido; en e-commerce, es clave para hacer filtros, menús y carritos accesibles; en noticias, mejora los avisos de actualización en vivo; y en una red social, puede ayudar a gestionar notificaciones y formularios.
En este tutorial aprenderás:

• Qué es ARIA y por qué es fundamental para la accesibilidad avanzada.
• Cómo integrarlo correctamente en diferentes tipos de sitios web.
• Mejores prácticas y errores comunes a evitar.
• Ejemplos prácticos para aplicar de inmediato.

Este ejemplo muestra un caso real en el que un div se utiliza como botón, algo común en interfaces modernas altamente estilizadas. Sin embargo, los elementos que no son semánticos (como div o span) no son accesibles por sí solos. Aquí entra ARIA para proporcionar significado.
role="button" define la función semántica del elemento. Un lector de pantalla interpretará este div como un botón, aunque visualmente no lo sea.
tabindex="0" hace que el elemento sea enfocable con el teclado (usando la tecla Tab), lo cual es esencial para la navegación accesible.
aria-pressed="false" indica el estado del botón: si está activado o no. Este atributo es muy útil en botones de tipo toggle, como el de cambiar tema, activar/desactivar sonido, etc.
Este patrón es útil cuando se quiere tener control total sobre el estilo del botón sin usar el tag <button>. Por ejemplo, en un portafolio personal, puede usarse para activar un modo oscuro.
Una duda común es: ¿por qué no usar simplemente <button>? La respuesta es que se debe usar ARIA solo cuando el HTML semántico no es suficiente. El objetivo no es reemplazar etiquetas estándar, sino complementarlas cuando se trabaja con estructuras personalizadas o componentes reutilizables creados con frameworks como React o Vue.
Este pequeño bloque de código demuestra cómo agregar significado y funcionalidad accesible a elementos no semánticos mediante el uso de atributos ARIA.

Este ejemplo aplica ARIA en una interfaz de pestañas, común en sitios de noticias, blogs o incluso paneles de administración en e-commerce. Las pestañas son componentes dinámicos donde el contenido cambia sin recargar la página, lo cual puede resultar confuso para usuarios con lectores de pantalla si no se proporciona información adicional.
role="tablist" indica que el contenedor agrupa un conjunto de pestañas.
aria-label="Secciones de noticias" proporciona un nombre accesible para el conjunto, útil para dar contexto.
role="tab" en cada elemento hijo informa que son pestañas individuales.
aria-selected="true/false" muestra cuál pestaña está activa actualmente.
tabindex="0" permite al usuario enfocarla con el teclado, mientras que -1 evita el enfoque automático en las pestañas inactivas.
id="tab-politica" sirve como punto de anclaje para conectar el contenido correspondiente.
role="tabpanel" define el área donde se muestra el contenido vinculado a una pestaña.
aria-labelledby="tab-politica" asocia el contenido del panel con la pestaña activa por medio del id.
Este patrón proporciona una experiencia clara y controlada para usuarios con discapacidades. Por ejemplo, en un portal de noticias, este sistema puede usarse para mostrar “Últimas noticias”, “Opinión” y “Cultura” sin perder contexto.
Este tipo de estructura se puede combinar con JavaScript para controlar el cambio de estados (aria-selected, aria-hidden) y con CSS para mostrar/ocultar contenido. El uso correcto de ARIA aquí garantiza que todos los usuarios, independientemente de sus capacidades, comprendan la relación entre pestañas y contenido.

Buenas prácticas esenciales:

1. Usar HTML semántico cuando sea posible: siempre prefiera usar <button>, <nav>, <section> en lugar de depender exclusivamente de roles ARIA.
2. Actualizar los estados dinámicamente: por ejemplo, cambiar aria-expanded o aria-pressed con JavaScript según la interacción real del usuario.
3. Mantener una estructura clara y consistente: use aria-labelledby, aria-describedby para crear asociaciones entre etiquetas e inputs.

4. Probar con lectores de pantalla y navegación por teclado: asegúrese de que la interacción sea comprensible sin mouse.
   Errores comunes a evitar:

5. Usar roles redundantes: no agregue role="button" a un <button>.

6. No manejar tabindex correctamente: elementos sin tabindex="0" pueden quedar inaccesibles para usuarios de teclado.
7. Vinculación incorrecta entre pestañas y paneles: si el aria-labelledby no coincide con un id válido, el lector de pantalla no entenderá la relación.
8. Olvidar cambiar los atributos dinámicamente: dejar aria-pressed="true" aunque el botón no esté activado confunde al usuario.
   Consejos de depuración:

• Use herramientas como axe DevTools, WAVE o Lighthouse para auditar accesibilidad.
• Active un lector de pantalla (como NVDA, JAWS, VoiceOver) y navegue con el teclado para evaluar la experiencia.
• Revise el DOM con las herramientas de desarrollo del navegador para confirmar los atributos ARIA en tiempo real.

Resumen y próximos pasos:
ARIA es una herramienta poderosa para garantizar que nuestros sitios web sean comprensibles y utilizables para todos, independientemente de sus capacidades. A lo largo de este tutorial, aprendiste cómo definir roles, estados y relaciones entre elementos dinámicos con atributos como role, aria-pressed, aria-labelledby y aria-expanded.
Estos conceptos se integran naturalmente con JavaScript, que puede modificar dinámicamente los valores de los atributos, y con CSS, que puede mostrar u ocultar elementos según el estado ([aria-hidden="true"] { display: none; }). La accesibilidad no es un accesorio: es parte fundamental de la experiencia del usuario.
Temas recomendados para continuar:

• ARIA live regions (aria-live, aria-atomic)
• Diálogos accesibles con aria-modal
• Formularios con validación accesible (aria-invalid, aria-describedby)
• Pruebas automatizadas de accesibilidad con Lighthouse y axe
  Como práctica, intenta mejorar un componente de tu sitio actual añadiendo roles y etiquetas ARIA. Revisa la experiencia sin usar mouse o con un lector de pantalla. La accesibilidad es un viaje, no un destino, y cada mejora cuenta.