Contenus au survol et à la prise de focus

Certains contenus sont temporaires et apparaissent au survol et à la prise de focus au clavier d’un élément.

Souvent ces contenus apparaissent sous forme d'infobulle pour expliquer le sens d'une icône ou d'une abréviation. Dans d'autres cas, des informations complémentaires, comme une définition de glossaire, ou un aperçu d'un lien sont proposées.

A quoi ressemblent les contenus au survol et à la prise de focus ?

Cette vidéo montre une entrée Wikipedia. Des contenus sont proposés lorsque la souris survole un lien ou lorsque le lien prend le focus au clavier.

Description vidéo

Sur la page Wikipedia sur Clara Schumann :

  • Un utilisateur tabule dans les liens de la page (des liens vers d'autres pages Wikipedia).
  • A la prise de focus, un pop-up avec un aperçu de l'article associé apparaît.
  • En cliquant sur le pop-up, le lien est activé.

Quelles sont les difficultés rencontrées par les utilisateurs face aux infobulles et aux contenus temporaires ?

Ces contenus posent souvent problème aux personnes mal-voyantes qui naviguent avec des logiciels d'agrandissement (proposés par le navigateur, le système d'opération ou des logiciels dédiés comme ZoomText ou SuperNova).

Des difficultés pour faire partir des contenus temporaires

Lorsqu'un utilisateur agrandit les contenus, seule une petite partie de l'écran est visible. Quand les infobulles apparaissent, elles risquent de masquer les contenus au-dessous. Il est donc important de pouvoir faire disparaître ces contenus.

En activant le zoom, le curseur ou focus se positionnent souvent au centre de la partie visible de l'écran. Les contrôles permettant de faire disparaître les contenus temporaires peuvent se trouver en dehors de l'écran, et en se déplaçant pour fermer l'infobulle l'utilisateur risque de perdre sa position, d'ou l'importance de proposer un moyen de la fermer, par exemple via la touche ESC.

Des contenus qui ne sont que partiellement visibles

La taille des contenus des infobulles peut être plus importante que celle des contenus de la page. Il est donc important, afin de pouvoir lire les contenus de l'infobulle, de pouvoir passer dessus sans pour autant que l'information disparaisse. Souvent les utilisateurs voient les contenus disparaître au moment de se déplacer pour mieux les lire.

Des contenus qui disparaissent subitement

Certaines informations temporaires ne s'affichent plus au bout d'un certain laps de temps. On doit laisser aux utilisateurs assez de temps pour pouvoir lire les contenus, et attendre une action de la part de l'utilisateur avant de faire disparaître (à l'exception des contenus qui ne sont plus d'actualité, type enchères en ligne).

Exemples

Les cas listés ici illustrent le type de difficultés rencontrées.

1 Handicap moteur : difficulté pour se positionner correctement

Certains utilisateurs ont du mal a contrôler les interactions à la souris nécessaires pour pouvoir accéder aux contenus et les lire correctement.

Description vidéo

Sur la page suédoise Particules dans l'air des espaces publics une graphique présente les taux de particules dans l'air des espaces publiques. En survolant des points précis sur la graphique, l'utilisateur a accès à des informations complémentaires.

  • Il n'est pas possible d’accéder aux contenus présentés dans l'infobulle au clavier.
  • Il n'est pas possible d’accéder aux contenus présentés dans l'infobulle à la souris car chaque mouvement implique la fermeture et l'ouverture de nouvelles infobulles.
  • Il n'est pas possible de choisir d'ouvrir ou fermer ces infobulles.

2 Les utilisateurs mal-voyants : la visualisation de l'ensemble des contenus au survol n'est pas possible

Pour les utilisateurs mal-voyants naviguant à l'aide de logiciels d'agrandissement, il est difficile de visualiser et lire l'ensemble des contenus affichés au survol ; ils ne peuvent pas être fermés à l'insu de l'utilisateur.

Description vidéo

Sur la page suédoise Particules dans l'air des espaces publiques, une graphique présente les taux de particules dans l'air des espaces publiques. En survolant des points précis sur la graphique, l'utilisateur a accès à des informations complémentaires. Dans cette vidéo un utilisateur visualise la graphique à l'aide d'un logiciel d'agrandissement.

  • L'utilisateur ne peut pas accéder aux textes de l'infobulle à la souris ;
  • Le mouvement de la souris fait vite disparaître et apparaître des infobulles ;
  • Il est difficile d'avoir une vue d'ensemble et de contrôler le comportement des éléments interactifs.

3 Handicap cognitif : difficultés pour lire et comprendre les contenus suite à un changement de contexte

Description vidéo

Sur la page suédoise Particules dans l'air des espaces publiques, une graphique présente les taux de particules dans l'air des espaces publiques. En survolant des points précis sur la graphique, l'utilisateur a accès à des informations complémentaires. Dans cette vidéo un utilisateur avec un handicap cognitif essaie de lire les contenus présentés dans la graphique.

  • L'utilisateur est perturbé par la réactivité des infobulles au survol et trouve que les contenus disparaissent très vite ce qui rend les contenus difficiles à lire.
  • L'utilisateur est également gêné par le fait que les infobulles viennent cacher des contenus de la page.
  • Il est difficile pour l'utilisateur d'avoir une vision d'ensemble et de contrôler le comportement des éléments interactifs.

Comment donner à l'utilisateur le contrôle de ces composants ?

Le nouveau critère WCAG 2.1 1.4.13 Contenus au survol et à la prise de focus (en anglais) est un ajout récent à la norme. Les avis ne sont pas encore tranchés sur la manière de rendre des contenus qui apparaissent au survol ou à la prise de focus accessibles.

Si les contenus apparaissent via CSS (avec les pseudo-classes a:hover et a:focus), la touche ESC peu ne pas fonctionner correctement lorsque le focus reste vers ou sur l'élément déclencheur. Elle peut marcher si le curseur survole le contenu et s'éloigne de l'élément déclencheur. Nécessiter l'activation d'un bouton permettant de fermer le pop-up est concevable, mais ne marcherait pas lorsqu'il s'agit de liens qui opèrent un changement de contexte.

Il est nécessaire d’expérimenter - les techniques relatives à ce critère sont en cours de développement. Une solution pourrait être d'afficher des contenus au survol ou à la prise de focus via des scripts plutôt que via des pseudo-classes CSS pour éviter que les contenus réapparaissent juste après avoir été fermés.

Comment créer des contenus au survol et à la prise de focus accessibles ?

  • Des contenus qui apparaissent exclusivement au survol ou à la prise de focus ne seront pas vus sur de nombreuses interfaces, comme pour exemple les écrans tactiles (téléphones portables, tablettes). Eviter de présenter des informations importantes exclusivement au survol et à la prise de focus. Penser permettre leur affichage via l'activation plutôt que le survol d'un élément déclencheur.
  • Faire en sorte que les contenus du pop-up apparaissent aussi bien au survol qu'à la prise de focus via le clavier (en tabulant). Afin de rendre ces éléments accessibles aux personnes naviguant au clavier, l'élément déclencheur doit pouvoir prendre le focus (comme un élément bouton ou un lien).
  • Utiliser le rôle tooltip pour les contenus présentés en infobulle.
  • Pour les infobulles qui expliquent le sens d'un symbole, utiliser aria-labelledby sur l'élément déclencheur. Un exemple serait le mot "paramètres" pour un symbole de pignon. Cela permet aux lecteurs d'écran de lire les contenus de l'infobulle lorsque l'élément déclencheur prend le focus (à noter : pour certains navigateurs aria-labelledby ne marchera pas sur des éléments (type div) qui ne sont pas nativement interactifs et n'ont pas de rôle approprié (type role="button").
  • Si une infobulle contient des informations complémentaires, proposer ces contenus via un texte caché et lié ces contenus via aria-describedby – voir l'article de Heydon Pickering au sujet des infobulles et des toggletips (en anglais).
  • Faire en sorte que le curseur peut s'éloigner des contenus pop-up, et l'élément déclencheur sans que les contenus disparaissent.
  • Implémenter des solutions qui permettent de faire partir ces contenus sans incidence sur la position du focus (via, par exemple, un raccourci clavier type ESC). Voir les indications à ce propos ci-dessus.

Pour aller plus loin (ressources en anglais)