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.