ARIA sin sobreuso: fundamentos

Cuándo usar ARIA, cuándo no, y cómo evitar que una capa extra rompa semántica nativa.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Reglas de decisión para usar ARIA con precisión y evitar sobreuso.

Regla cero

No uses ARIA si un elemento HTML nativo ya resuelve la necesidad.

Roles y estados

Si declaras un rol interactivo, debes mantener estados y teclado coherentes.

aria-expanded

Solo tiene sentido cuando existe un contenido controlado y visible/oculto.

aria-label y aria-labelledby

Úsalos para nombrar controles sin texto visible o cuando el texto no sea suficiente.

aria-live

Ideal para feedback dinámico sin mover foco en operaciones asíncronas.

Error habitual

Poner `role="button"` en un `div` sin gestionar teclado ni foco.

Aplicación en proyectos reales

Cómo limpiar sobreuso de ARIA en código heredado.

Busca primero componentes custom con roles forzados y comportamiento incompleto.

Simplifica: sustituye estructuras artificiales por elementos nativos siempre que puedas.

Deja ARIA para casos donde semántica estándar no cubre interacción avanzada.

Audita componentes con `role` y verifica que cada uno sea necesario.
Sincroniza estados ARIA con el estado visual real del componente.
Valida interacción con teclado para cualquier rol no nativo.
Documenta patrones permitidos y anti-patrones en guía de frontend.

Patrón de código

Ejemplo de botón que controla panel con estado ARIA consistente.

Control expandible mínimo

<button id="faq-btn" aria-expanded="false" aria-controls="faq-panel">¿Qué incluye?</button>
<div id="faq-panel" hidden>
  Incluye soporte y recursos descargables.
</div>

1 Claves teóricas 2 Aplicación en proyectos reales 3 Patrón de código

🧪 Aprende probando

Ejemplo Demo guiada Activa un panel y observa sincronía entre estado visual y ARIA.

⌄

🏁 Retos

Reto Reto práctico Sincroniza aria-expanded con la visibilidad real de un bloque.

⌄

🧰 Recursos

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 11

Tablas accesibles con scope y caption

Lección 13

Dialog y popover accesibles

›