Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

2.2.2. Infobulles (tooltips)

Principe

Les infobulles simulées sont des contenus informatifs qui apparaissent à l’écran au survol et à la prise de focus d’un élément. Elles peuvent également apparaître lorsque l’élément est activé.

Elles sont dites “simulées”, car elles n’utilisent pas l’attribut title proposé par HTML, souvent pour des raisons esthétiques.

Remarque

En 2012, la technique à base d’ARIA proposée ici n’est pas exploitable par tous les lecteurs d’écran du marché. L’attribut aria-label devrait toutefois être correctement interprété dans un futur proche.

Dans l’attente d’une meilleure compatibilité, plusieurs solutions, au choix :

  1. Considérer que les contenus proposés dans les infobulles simulées sont secondaires (car accessibles par un autre moyen, par exemple), et mettre en place cette technique dès aujourd’hui.
  2. Considérer que les contenus proposés dans les infobulles simulées sont essentiels, et privilégier alors d’autres techniques, comme par exemple les recommandations associées aux fenêtres modales (pop-in), qui peuvent être adaptées facilement au cas des infobulles simulées.

Code HTML de base

Le code HTML de base pour une infobulle simulée accessible est très simple :

<a href="#" aria-label="Contenu de l'infobulle simulée">Intitulé du lien</a>

Attention

Sans JavaScript, le contenu proposé dans l’infobulle ne sera pas accessible pour les personnes qui n’utilisent pas de lecteurs d’écran.

S’assurer qu’un moyen d’accéder à ce contenu reste présent (par exemple, en proposant le contenu sur la page cible du lien) ou que ce contenu soit affiché dans la page initiale, dans le cas où JavaScript est désactivé.

Comportement avec JavaScript

Lorsque l’élément est survolé ou que le focus est positionné sur ce dernier :

  1. Un conteneur vide du type <span> ou <div> est créé dans le DOM. Ce conteneur servira d’infobulle.
  2. La valeur de l’attribut aria-label de l’élément est dupliquée dans le conteneur nouvellement créé.
  3. Les CSS sont utilisées pour positionner et styler l’infobulle tel qu’attendu.

Lorsque l’élément n’est plus survolé ou que le focus est perdu, le conteneur est supprimé du DOM.

Ce comportement peut éventuellement être appliqué lorsque l’élément est activé. La désactivation de l’élément aura alors pour conséquence de supprimer l’infobulle simulée du DOM.

Démonstration

notices/interfaces-riches-javascript/infobulles-tooltips.txt · Dernière modification: Le 24/01/2014 à 16:56 par Régis Lapeze
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :