Tooltip a11y et SEO
Objectif d'un « tooltip » accessible
L'idée de départ est de pouvoir concilier accessibilité, design et référencement avec les fameuses « infobulles » surgissantes sur les pages web.
Habituellement, ce type de présentation fonctionne sur les événements mouseover
et mouseout
, ce qui rend l'effet inopérant en navigation au clavier. De plus, les lecteurs d'écran n'interagissent pas (ou mal) avec ce type d'objet.
Bien entendu, la bonne pratique est d'alimenter le code avec l'attribut title
…
Le fonctionnement de ce tooltip
tente donc de concilier toutes ces petites choses.
Pour le markup :
<span class='button' data-tooltip title="Lorem ipsum dolore ">Passer la souris ici</span>
ce qui produit ceci :
ou si la notion de SEO n'est pas utile
<span data-tooltip="Le contenu de mon tooltip :<br/>(on peut y mettre du <strong <strong style='color:var(--red) !important'>CODE HTML</strong>)">Passer la souris ici</span>
ce qui produit ceci :
Toute proposition d'amélioration est bien sûr la bienvenue !
Ça se passe ici : contact
Les sources
- Javascript : /javascript/tooltip.js
- CSS : /styles/tooltip.css