ARIA (Accessible Rich Internet Applications) proporciona atributos HTML para mejorar la accesibilidad de contenido dinámico y componentes personalizados.

Principios ARIA

No uses ARIA cuando los elementos HTML nativos funcionan. ARIA modifica el árbol de accesibilidad pero no el comportamiento. Primera regla: usa HTML semántico.

Roles y propiedades

role="button", aria-label, aria-expanded, aria-hidden, aria-live. Roles de landmarks (navigation, main, complementary).

Componentes dinámicos

Tabs, modales, acordeones, sliders necesitan roles y estados ARIA. aria-controls, aria-selected, aria-current, aria-valuenow.

Testing

Screen readers: NVDA (Windows), VoiceOver (Mac), JAWS. Herramientas: axe DevTools, Lighthouse, WAVE. Pruebas automatizadas con axe-core.