Los atributos ARIA (Accessible Rich Internet Applications) permiten que los desarrolladores mejoren la accesibilidad de componentes dinámicos y personalizados cuando el HTML semántico por sí solo no basta. Con ARIA, los lectores de pantalla y otras tecnologías asistivas pueden interpretar correctamente la estructura, el estado y la interacción de la página.

¿Qué es ARIA?

ARIA es una especificación del W3C que define roles, states y properties que pueden añadirse a cualquier elemento HTML mediante atributos con el prefijo aria-. Su objetivo es cerrar la brecha entre la UI visual y la experiencia de los usuarios de tecnologías asistivas.

• Roles: describen la función del elemento (ej. button, dialog).
• States: indican el estado actual (ej. aria-pressed, aria-expanded).
• Properties: proporcionan información adicional (ej. aria-label, aria-describedby).

Comparativa: ARIA vs. Elementos HTML Nativos

Roles ARIA más usados y ejemplos en HTML

1. Botón personalizado

<div role="button" tabindex="0" aria-pressed="false" class="custom-btn">
  <span aria-hidden="true">🔔</span> Suscribirse
</div>

Este div actúa como un botón accesible: role="button" le asigna el rol, tabindex="0" lo hace enfocables, y aria-pressed comunica su estado toggle.

2. Menú desplegable

<button aria-haspopup="true" aria-expanded="false" id="menuBtn">Opciones</button>
<ul role="menu" aria-labelledby="menuBtn" class="dropdown" hidden>
  <li role="menuitem" tabindex="-1">Perfil</li>
  <li role="menuitem" tabindex="-1">Configuración</li>
  <li role="menuitem" tabindex="-1">Cerrar sesión</li>
</ul>

El atributo aria-haspopup indica que el botón abre un menú; aria-expanded refleja si está abierto; y cada li tiene role="menuitem" para que el lector de pantalla lo identifique como opción de menú.

3. Diálogo modal

<div role="dialog" aria-modal="true" aria-labelledby="modalTitle" class="modal" tabindex="-1">
  <h2 id="modalTitle">Confirmar acción</h2>
  <p>¿Estás seguro de que deseas eliminar este registro?</p>
  <button type="button" class="btn-primary">Sí</button>
  <button type="button" class="btn-secondary">Cancelar</button>
</div>

aria-modal="true" indica que el resto del contenido queda inaccesible mientras el modal está activo.

States y Properties esenciales

• aria-label – Proporciona una etiqueta accesible cuando no hay texto visible.
• aria-labelledby – Referencia a un elemento que actúa como etiqueta.
• aria-describedby – Asocia descripciones suplementarias.
• aria-live – Señala actualizaciones dinámicas ("polite" o "assertive").
• aria-busy – Indica que el contenido está cargando.
• aria-controls – Relaciona un control con el elemento que manipula.

Ejemplo de aria-live

<div aria-live="polite" id="status">Cargando datos...</div>

El lector de pantalla anunciará el mensaje cuando cambie el contenido del div.

Mejores prácticas y checklist de ARIA

1. Prioriza HTML semántico antes de añadir ARIA.
2. Usa role solo cuando el elemento nativo no provee el rol necesario.
3. Evita la redundancia: no combines role="button" con <button>.
4. Gestiona el foco: tabindex="0" para elementos interactivos y tabindex="-1" para contenedores de foco programático.
5. Actualiza los estados ARIA dinámicamente con JavaScript (p. ej., aria-expanded).
6. Prueba con lectores de pantalla populares (NVDA, VoiceOver, TalkBack).
7. Valida con herramientas como axe-core, WAVE o Lighthouse.

Resolución de problemas comunes

• Lectores de pantalla no anuncian cambios: verifica que el contenedor tenga aria-live y que el contenido se actualice mediante DOM, no solo CSS.
• Tabulación inesperada: revisa los valores de tabindex; evita valores mayores a 0.
• Roles incorrectos: usa la tabla de roles del WAI‑ARIA Authoring Practices para confirmar la compatibilidad.
• Conflicto entre role y aria-*: algunos roles ignoran ciertos atributos; revisa la especificación.

Compatibilidad, rendimiento y escalabilidad

Los atributos ARIA son soportados por todos los navegadores modernos (Chrome, Edge, Firefox, Safari) y por los principales lectores de pantalla. No impactan significativamente el rendimiento porque son simples atributos de texto. Sin embargo, una sobrecarga de atributos innecesarios puede dificultar el mantenimiento a gran escala.

Para proyectos grandes, considera crear componentes accesibles reutilizables (p. ej., con Web Components o frameworks como React) que encapsulen la lógica ARIA y garanticen consistencia.

Conclusión

ARIA es una herramienta poderosa para cerrar las brechas de accesibilidad en interfaces ricas y dinámicas. Cuando se usa de forma responsable —priorizando siempre el HTML semántico—, mejora la experiencia de usuarios con discapacidades sin penalizar el rendimiento ni la mantenibilidad del código.

Implementa los ejemplos, sigue el checklist y valida con herramientas automáticas y pruebas manuales. Así garantizarás que tu sitio sea inclusivo, conforme a WCAG 2.2 y preparado para el futuro.