Content Comparison

...

Références

• Material Design : https://material.io/components/tooltips

• Bootstrap : https://getbootstrap.com/docs/5.0/components/tooltips/

• Ant Design : https://ant.design/components/tooltip/

• Fluent UI : https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip

Alias : tooltips, inline dialog, popover

Les infobulles sont dites « simulées en ARIA » lorsqu’elles ne sont pas construites sur la base du code HTML standard prévu pour ces éléments par la spécification : l’attribut title.

HTML

CSS

JS

<a
    class="lien"
     href="[url du lien]"
     aria-describedby="[id de l'élément tooltip]"
>
   [Intitulé du lien]
</a>​<diva>
​<div
    class="infobulle"
    role="tooltip"
    id="[id de l'élément tooltip]"
    aria-hidden="[true/false]"
>
  [Contenu de l'infobulle]
</div>

...

RÔLES, ÉTATS ET PROPRIÉTÉS ARIA

...

Dans le cas où l'infobulle est utilisé avec une abréviation, il faut aussi :

• Prévoir Puisque la première mention de l’abréviation est toujours accompagné du texte complet, prévoir que l'infobulle soit caché pour les lecteurs d'écran (aria-hidden="false" ) en tout temps. Seul l'abréviation sera lu.

• Ajouter l'attribut tabindex="0" pour permettre le focus sur l'élément <abbr />.

...