Les animations d'interface sont-elles accessibles aux lecteurs d'écran ?
Découvrez comment les animations d'UI interagissent avec les lecteurs d'écran : zones aria-live, aria-expanded, aria-busy et gestion du focus.
À retenir
Les animations d'interface ne sont accessibles aux utilisateurs de lecteurs d'écran que lorsque les changements visuels s'accompagnent des attributs ARIA et de la gestion du focus appropriés. Les lecteurs d'écran ne perçoivent pas le mouvement CSS ou Canvas, mais les mutations du DOM et les annonces d'état. L'animation ne doit jamais retarder les annonces sonores ni égarer le focus clavier.
L'invisibilité du mouvement CSS pour les aides techniques
Un lecteur d'écran interprète l'arbre d'accessibilité, pas les pixels dessinés. Animer visuellement un burger pour former une croix ne transmet aucune information à une personne aveugle si le bouton sous-jacent ne met pas à jour aria-expanded et ne modifie pas son nom accessible d'Ouvrir le menu' à 'Fermer le menu'.
Gérer les zones aria-live pour les retours dynamiques
Lorsqu'une notification toast apparaît à l'écran, les utilisateurs voyants la repèrent immédiatement. Pour transmettre cette information aux lecteurs d'écran sans détourner le focus clavier, utilisez aria-live='polite'. Réservez aria-live='assertive' aux alertes système critiques.
- Basculez aria-expanded sur les déclencheurs d'accordéons et de modales
- Employez aria-live='polite' pour les messages de confirmation et toasts
- Appliquez aria-hidden='true' aux confettis, particules et illustrations décoratives
- Ne retardez jamais la mise à jour des attributs DOM pour attendre la fin d'une animation
Gestion du focus pendant les transitions
Lorsqu'un élément s'ouvre (panneau, menu ou dialogue), déplacez le focus clavier sur le premier élément interactif dès le début du mouvement. N'attendez pas la fin d'une animation de 300 ms, car les utilisateurs rapides navigueront accidentellement dans le contenu d'arrière-plan.
L'attribut aria-busy pendant les chargements asynchrones
Lorsque vous animez un écran squelette, appliquez aria-busy='true' au conteneur. Cela signale aux technologies d'assistance que la section est en cours d'actualisation, évitant des lectures prématurées et incomplètes.
Principes clés à retenir
- Les lecteurs d'écran lisent les états sémantiques (ARIA), pas les mouvements visuels
- Mettez à jour les attributs ARIA dès l'interaction, pas à la fin de l'animation
- Positionnez le focus clavier dès l'ouverture d'un dialogue
- Masquez les animations purement décoratives avec aria-hidden