C’est s’assurer que toute information ou élément visuel qui apparaît ou change à la volée – au survol de la souris, au focus clavier, ou au clic – est accessible et compréhensible pour toutes et tous.
Cela inclut les infobulles, les menus déroulants, les messages d’aide qui s’affichent lors d’une interaction, ou tout autre contenu qui apparaît de manière contextuelle.
Bien que ces contenus additionnels soient souvent pensés pour être discrets et éviter une surcharge d’informations, ils se transforment paradoxalement en véritables obstacles.
Leur principale vulnérabilité réside dans leur dépendance exclusive à la souris : ils deviennent alors inaccessibles au clavier (ne se déclenchant pas au focus) et, par conséquent, invisibles pour les personnes naviguant sans souris.
Leur caractère éphémère représente également un défi, étant parfois trop fugaces pour les personnes ayant des difficultés de concentration.
En bref, les effets mal gérés ou l’absence d’annonce par les technologies d’assistance peuvent provoquer une réelle gêne, entraînant une perte d’information cruciale et une expérience utilisateurice frustrante.
Pour maîtriser ton contenu dynamique, assure-toi d’abord qu’il est déclenché non seulement au survol (:hover) mais aussi à la prise de focus (:focus) afin d’être accessible au clavier.
Le contenu supplémentaire doit rester visible et persistant jusqu’à ce que l’utilisateurice le rejette explicitement, et il doit être possible de déplacer le pointeur ou le focus sur ce contenu pour l’explorer. Prévois un mécanisme clair pour rejeter le contenu sans avoir à déplacer le pointeur (par exemple, un bouton ‘Fermer’ ou la touche Échap).
Pour les contenus ajoutés ou mis à jour dynamiquement, annonce les changements aux lecteurs d’écran en utilisant les zones aria-live ou des rôles appropriés (role=’alert’ pour les messages urgents, par exemple).
Enfin, utilise un balisage sémantique et des attributs ARIA adaptés à la nature de ton contenu : pour une infobulle, pense à associer un bouton ou un élément déclencheur avec aria-describedby ; pour un menu déroulant, utilise les rôles de menu, aria-expanded et aria-controls pour informer l’utilisateurice de son état et de sa gestion, etc.
N°1.
N°2.
N°3.
N°4.
