{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Feedback dinámico con aria-live

Cómo anunciar cambios de estado sin mover foco y sin saturar a quien usa lector de pantalla.

Los cambios asíncronos deben anunciarse, porque visualmente se ven pero por lector no siempre se perciben.

aria-live permite avisar sin robar foco ni interrumpir una tarea en curso.

Elegir `polite` o `assertive` depende del impacto del mensaje.

Este tema trata calidad de feedback: ni silencio absoluto ni ruido constante.

  • Cuándo y cómo anunciar estados dinámicos de forma útil.
  • Cómo diseñar estrategia de mensajes en interacciones asíncronas.
  • Prioriza acciones con latencia: guardado, filtros, carga de resultados y validaciones remotas.
  • Define un catálogo de mensajes cortos por estado: cargando, éxito, error, sin resultados.
  • Coordina con UX writing para que cada mensaje indique acción siguiente cuando corresponda.

Claves teóricas

Cuándo y cómo anunciar estados dinámicos de forma útil.

Aplicación en proyectos reales

Cómo diseñar estrategia de mensajes en interacciones asíncronas.

Prioriza acciones con latencia: guardado, filtros, carga de resultados y validaciones remotas.

Define un catálogo de mensajes cortos por estado: cargando, éxito, error, sin resultados.

Coordina con UX writing para que cada mensaje indique acción siguiente cuando corresponda.

  • Centraliza utilidades de anuncio para evitar inconsistencias entre componentes.
  • Resetea mensajes antiguos cuando dejen de ser relevantes.
  • Evita usar assertive como valor por defecto.
  • Prueba mensajes con lector real, no solo con inspección de DOM.

Patrón de código

Región de estado y actualización tras acción asíncrona.

Accesibilidad Web
14

Feedback dinámico con aria-live

Cómo anunciar cambios de estado sin mover foco y sin saturar a quien usa lector de pantalla.

¿Cuánto sabes de Accesibilidad Web?

Código del tema: aria-live status

📘 Teoría

Claves teóricas

Cuándo y cómo anunciar estados dinámicos de forma útil.

1

aria-live polite

Para mensajes informativos que pueden esperar al final de la locución actual.

2

aria-live assertive

Solo para mensajes críticos que requieren atención inmediata.

3

role status y role alert

`status` suele ser equivalente a avisos suaves; `alert` a notificaciones urgentes.

4

Evita duplicados

No anuncies el mismo mensaje por varios canales a la vez.

5

Mensajes concretos

“Guardado correcto” aporta; “Operación completada” suele ser demasiado ambiguo.

6

Error frecuente

Actualizar contenido visual sin tocar la región aria-live.

Aplicación en proyectos reales

Cómo diseñar estrategia de mensajes en interacciones asíncronas.

Prioriza acciones con latencia: guardado, filtros, carga de resultados y validaciones remotas.

Define un catálogo de mensajes cortos por estado: cargando, éxito, error, sin resultados.

Coordina con UX writing para que cada mensaje indique acción siguiente cuando corresponda.

  • Centraliza utilidades de anuncio para evitar inconsistencias entre componentes.
  • Resetea mensajes antiguos cuando dejen de ser relevantes.
  • Evita usar assertive como valor por defecto.
  • Prueba mensajes con lector real, no solo con inspección de DOM.

Patrón de código

Región de estado y actualización tras acción asíncrona.

🧪 Aprende probando

Ejemplo Demo guiada Simula guardado y anuncia progreso y resultado.
⌄

🏁 Retos

Reto Reto práctico Añade feedback anunciado para una búsqueda sin resultados.
⌄

🧰 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 13
Dialog y popover accesibles
Lección 15
Tabs y accordion accesibles
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com