← Laboratorio

Monitor de anuncios aria-live

Lo que un lector de pantalla «diría», visible en pantalla · sin dependencias

Las aplicaciones actuales anuncian cambios mediante regiones dinámicas (aria-live, role="alert", role="status"…), pero ninguna herramienta de desarrollo te enseña qué se anuncia, cuándo y con qué cortesía. Este monitor lo registra en un panel superpuesto: hora, assertive/polite, rol, elemento y texto.

⬇︎ Arrástrame a la barra de marcadores— luego ábrela en cualquier página y se activará el monitor.(El código se sirve de este mismo sitio; se construye el enlace al cargar.)

Demo en vivo

Activa el monitor aquí abajo y dispara anuncios de prueba. Un alert se anuncia al insertarse (assertive); un estado polite se anuncia cuando cambia su contenido.

Activar monitor aquíLanzar un alertActualizar estado (polite)

Errores típicos que este monitor delata

• Anuncios en cascada: una sola acción genera cinco anuncios (validación + estado + foco…). El usuario con lector lo sufre entero.
• Contenido cargado antes de existir la región: el texto se inyecta y después se marca aria-live → nunca se anuncia.
• Assertive por defecto: usar alert para trivialidades interrumpe la lectura en curso.
• Anunciar lo invisible: cambios en contenedores ocultos que nunca debieran emitirse.

Herramienta hermana del mismo laboratorio: verificador de contraste. Para agentes e integración: disponible también como herramienta MCP.