¿Son accesibles las animaciones de UI para lectores de pantalla?
Aprende cómo interactúan las animaciones de UI con lectores de pantalla: regiones aria-live, aria-expanded, aria-busy y gestión del foco.
Idea clave
Las animaciones de interfaz solo son accesibles para usuarios de lectores de pantalla cuando los cambios visuales van acompañados de atributos ARIA y gestión del foco adecuados. Los lectores de pantalla no perciben el movimiento de CSS ni Canvas, sino mutaciones en el DOM y anuncios de estado. La animación nunca debe retrasar los avisos sonoros ni desorientar el foco del teclado.
La ceguera de la tecnología de asistencia ante el movimiento CSS
Un lector de pantalla procesa el árbol de accesibilidad, no los píxeles de la pantalla. Transformar visualmente un icono de menú en una 'X' no significa nada para una persona ciega a menos que el botón subyacente actualice aria-expanded y su texto accesible pase de 'Abrir menú' a 'Cerrar menú'.
Gestión de regiones aria-live para avisos dinámicos
Cuando una notificación flotante aparece en pantalla, los usuarios visuales la ven al instante. Para comunicarlo a lectores de pantalla sin robar el foco del teclado, utiliza aria-live='polite'. Evita aria-live='assertive' salvo en alertas críticas del sistema.
- Actualiza aria-expanded en activadores de acordeones y modales
- Usa aria-live='polite' para mensajes de confirmación y toasts
- Aplica aria-hidden='true' a partículas decorativas, confeti e ilustraciones
- Nunca retrases la actualización de atributos del DOM para que coincida con el fin de la animación
Gestión del foco durante transiciones
Al abrir un modal o menú desplegable, traslada el foco del teclado al primer elemento interactivo en cuanto empiece el movimiento. No esperes a que termine una animación de 300 ms, ya que usuarios rápidos de teclado navegarán hacia el fondo sin querer.
El atributo aria-busy durante cargas asíncronas
Al animar un esqueleto de carga, aplica aria-busy='true' al contenedor. Esto indica a las tecnologías de asistencia que la sección se está actualizando, evitando lecturas prematuras de contenidos a medio cargar.
Principios clave para recordar
- Los lectores de pantalla interpretan estados semánticos (ARIA), no fotogramas
- Actualiza los atributos ARIA en el momento del clic, no al acabar la animación
- Mueve el foco del teclado tan pronto como un diálogo comience a abrirse
- Oculta animaciones decorativas del árbol de accesibilidad con aria-hidden