ARIA: Accessible Rich Internet Applications, Roles, States
ARIA agrega información accesibilidad a UIs dinámicas vía roles, states, properties, para screen readers cuando HTML solo no es suficiente.
¿Qué es ARIA?
ARIA (Accessible Rich Internet Applications) es una spec W3C que añade información accesibilidad a páginas web y aplicaciones vía atributos HTML. Le dice a tecnologías asistivas (screen readers, voice control, switch devices) qué son los elementos UI dinámicos, su state y cómo se comportan, cuando HTML solo no transmite ese significado.
ARIA fue creado porque los elementos HTML como <button> son accesibles por default, pero widgets custom construidos con <div> son invisibles para tech asistiva sin ayuda.
Las tres categorías de atributos ARIA
| Tipo | Propósito | Ejemplo |
|---|---|---|
| Roles | Qué ES el elemento | role="button" |
| Properties | Atributos describiendo elemento | aria-label="Close" |
| States | State dinámico actual | aria-expanded="true" |
La primera regla de ARIA: no uses ARIA
<!-- MAL -->
<div role="button" tabindex="0">Submit</div>
<!-- BIEN -->
<button>Submit</button>Roles ARIA comunes
| Role | Para |
|---|---|
role="button" | Botones custom |
role="dialog" | Diálogos modal |
role="tablist" + tab + tabpanel | UI tabs |
role="menu" + menuitem | Menús aplicación |
role="combobox" | Inputs autocomplete |
role="tree" | Vistas tree |
role="alert" | Mensajes error |
role="status" | Updates status non-crítico |
role="navigation" | Regiones navegación |
role="main" | Contenido main |
Properties ARIA comunes
| Property | Uso |
|---|---|
aria-label | Nombre accesible |
aria-labelledby | Referenciar elemento que nombra esto |
aria-describedby | Referenciar descripción más larga |
aria-hidden="true" | Esconder de tech asistiva |
aria-haspopup | Elemento triggea popup |
aria-controls | Elemento controla otro |
aria-current | Item actual en un set |
States ARIA comunes
| State | Uso |
|---|---|
aria-expanded | ¿Disclosure abierto? |
aria-selected | ¿Tab/option seleccionado? |
aria-checked | State checkbox/radio |
aria-disabled | ¿Elemento deshabilitado? |
aria-pressed | State toggle button |
aria-busy | Elemento siendo updated |
aria-invalid | Field form inválido |
Live regions: anunciar updates dinámicos
<div aria-live="polite" aria-atomic="true">
{{ savedMessage }}
</div>
<div role="alert">Error: connection lost</div>Ejemplo real-world: tabs accesibles
<div role="tablist" aria-label="Account sections">
<button role="tab" aria-selected="true" aria-controls="profile-panel" id="profile-tab">
Profile
</button>
</div>
<div role="tabpanel" id="profile-panel" aria-labelledby="profile-tab">
Profile content
</div>Mejores prácticas ARIA
- Usar HTML nativo primero.
- No cambiar semántica nativa.
- Todo ARIA interactivo debe ser keyboard-accesible.
- No esconder elementos focuseables.
- Proveer labels visibles.
- Testear con screen reader.
- Seguir patterns APG.
- Actualizar states cuando UI cambia.
Pitfalls ARIA comunes
- ARIA incorrecto sobre HTML correcto.
- aria-hidden en elementos focuseables.
- States stale.
- Sobreuso de role="application".
- Live regions firing demasiado.
- Sin soporte teclado.
- aria-label conflictivo con texto visible.
FAQ: ARIA
¿Debería usar ARIA en cada elemento?
No, solo cuando HTML nativo no expresa la semántica.
¿Cuál es la "primera regla de ARIA"?
"No uses ARIA".
¿ARIA ayuda al SEO?
Indirectamente.
¿Qué es WAI-ARIA APG?
Authoring Practices Guide.
¿Puedo usar ARIA en SVG?
Sí.
¿Qué es aria-current?
Marca el item actual en un set.
¿Cómo testeo ARIA?
Tools automatizadas + manual screen reader testing.
Testea ARIA + accesibilidad con LoadFocus
LoadFocus corre auditorías Lighthouse desde 25+ regiones. Regístrate en loadfocus.com/signup.
Herramientas LoadFocus relacionadas
Lleva este concepto a la práctica con LoadFocus, la misma plataforma que potencia todo lo que acabas de leer.