Contenido del Artículo
Fundamentos de ARIA
ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que mejoran la accesibilidad de contenido web, especialmente para aplicaciones dinámicas y controles personalizados. Cuando el HTML semántico no es suficiente, ARIA actúa como puente entre componentes y tecnologías asistivas.
Roles
Definen el tipo de elemento (button, menu, alert)
Propiedades
Características esenciales (aria-label, aria-describedby)
Estados
Condiciones cambiantes (aria-expanded, aria-checked)
Primera regla de ARIA: No uses ARIA si existe un elemento HTML equivalente y semántico
Roles ARIA Esenciales
Los roles definen la función de un elemento en la interfaz. Estos son algunos de los más importantes:
<div role="navigation" aria-label="Menú principal">
<!-- Elementos de navegación -->
</div>
<div role="alert" aria-live="assertive">
¡Cambios guardados correctamente!
</div>| Rol | Descripción | Uso Recomendado |
|---|---|---|
| button | Elemento clickable interactivo | Cuando no se puede usar <button> |
| dialog | Ventana modal o diálogo | Para pop-ups y ventanas emergentes |
| alert | Mensaje de alerta importante | Notificaciones urgentes |
| navigation | Conjunto de enlaces de navegación | Menús principales |
| tablist | Contenedor de pestañas | Interfaces con pestañas |
| status | Actualización de estado dinámico | Barra de progreso, notificaciones |
Propiedades ARIA Clave
Las propiedades establecen características esenciales de los elementos:
aria-label
Provee un nombre accesible cuando no hay texto visible
aria-labelledby
Referencia a elemento que sirve como etiqueta
aria-describedby
Vincula elementos con descripciones adicionales
aria-hidden
Oculta elementos decorativos de lectores de pantalla
<button
aria-label="Cerrar ventana"
aria-describedby="close-help">
X
</button>
<span id="close-help" hidden>Presione este botón para cerrar la ventana actual</span>Estados Dinámicos
Los estados comunican condiciones cambiantes en tiempo real:
<button
aria-expanded="false"
aria-controls="menu-content">
Menú
</button>
<ul id="menu-content" hidden>
<!-- Opciones del menú -->
</ul>| Atributo | Valores | Uso |
|---|---|---|
| aria-expanded | true/false | Menús desplegables, acordeones |
| aria-checked | true/false/mixed | Casillas de verificación |
| aria-selected | true/false | Elementos seleccionados (tabs, listas) |
| aria-disabled | true/false | Elementos no interactivos temporalmente |
| aria-invalid | true/false/grammar/spelling | Validación de formularios |
Regiones Live (aria-live)
Las regiones live anuncian cambios dinámicos en tiempo real para usuarios de lectores de pantalla:
aria-live="polite"
Anuncia cambios cuando el usuario está inactivo
aria-live="assertive"
Interrumpe para anunciar cambios inmediatos
aria-live="off"
Desactiva anuncios (valor por defecto)
<div
aria-live="polite"
role="status">
<!-- Contenido actualizado dinámicamente -->
</div>
Usa aria-live con moderación: demasiadas interrupciones pueden ser molestas
Patrones de Componentes Accesibles
Implementación de widgets comunes con ARIA:
<!-- Acordeón accesible -->
<div>
<h3>
<button
aria-expanded="false"
aria-controls="acordeon-content">
Sección 1
</button>
</h3>
<div
id="acordeon-content"
aria-hidden="true"
hidden>
Contenido del acordeón
</div>
</div>
<!-- Tabs accesibles -->
<div role="tablist">
<button
role="tab"
aria-selected="true"
aria-controls="panel-1">
Tab 1
</button>
<button
role="tab"
aria-selected="false"
aria-controls="panel-2">
Tab 2
</button>
</div>
<div role="tabpanel" id="panel-1">Contenido 1</div>
<div role="tabpanel" id="panel-2" hidden>Contenido 2</div>
Buenas Prácticas y Errores Comunes
Consejos para implementación correcta de ARIA:
Nunca uses role="presentation" o aria-hidden="true" en elementos interactivos o con contenido importante
| Mejor Práctica | Error Común | Solución |
|---|---|---|
| Usar HTML semántico primero | Usar ARIA redundante con HTML | Eliminar ARIA cuando existe equivalente HTML |
| Verificar con lectores de pantalla | Implementar sin probar con usuarios reales | Usar NVDA, VoiceOver, JAWS |
| Mantener simple | Sobrecargar con atributos innecesarios | Usar solo los atributos necesarios |
| Actualizar estados dinámicamente | Olvidar actualizar estados (aria-expanded) | Sincronizar con JavaScript |
Herramientas de Verificación
Recursos para validar implementación de ARIA:
Chrome DevTools
Inspeccionar árbol de accesibilidad
WAVE Evaluation Tool
Analizador de accesibilidad online
AXE DevTools
Extensión para pruebas de accesibilidad
Screen Readers
NVDA (Windows), VoiceOver (macOS/iOS)
Ejemplo: Menú de Navegación Accesible
Implementación completa con todos los atributos ARIA:
<nav aria-label="Navegación principal">
<button
aria-expanded="false"
aria-controls="menu-list"
aria-label="Menú">
☰
</button>
<ul id="menu-list" hidden>
<li>
<a href="/" aria-current="page">Inicio</a>
</li>
<li>
<a href="/servicios">Servicios</a>
</li>
<li>
<a href="/contacto">Contacto</a>
</li>
</ul>
</nav>
<script>
const menuButton = document.querySelector('button[aria-controls="menu-list"]');
menuButton.addEventListener('click', () => {
const expanded = menuButton.getAttribute('aria-expanded') === 'true';
menuButton.setAttribute('aria-expanded', !expanded);
document.getElementById('menu-list').hidden = expanded;
});
</script>
Recursos para Aprender Más
Materiales recomendados para profundizar en ARIA:
La accesibilidad web beneficia a todos los usuarios, no solo a personas con discapacidades
| Recurso | Tipo | Enlace |
|---|---|---|
| WAI-ARIA Authoring Practices | Guía oficial | w3.org/WAI/ARIA/apg |
| MDN ARIA Documentation | Documentación técnica | developer.mozilla.org/es/docs/Web/Accessibility/ARIA |
| WebAIM ARIA Cheatsheet | Hoja de referencia rápida | webaim.org/resources/quickref/ARIA |
| ARIA Patterns | Ejemplos implementados | aria-patterns.com |