Bonjour la liste,

Un de mes "clients" souhaite ajouter des tooltips (sorte d'infobulle) pour donner des infos complémentaire. Celui proposé par bootstrap n'étant pas accessible, ils ont récupéré un autre qui après modification donne :

<div>
    <span aria-labelledby="boutonAide" class="glyphicon glyphicon-question-sign ..." tabindex="0"></span>
    <span id="boutonAide" class="tooltip hidden tip1" role="tooltip">
        Le libellé concerne les utilisateurs de plus de 45 ans
     </span>
</div>

Entre le premier span, il y a une ghyphicon bootrap :
  • tabindex="0" lui permet de recevoir le focus,
  • le tooltip s'affiche bien aussi bien au clavier qu'à la souris,
  • en tabulant encore et donc en sortant de l'élément déclencheur le tooltip disparait
  • il disparaît également avec la touche Escape de mon clavier.
  • Avec NVDA sur firefox, IE et même chrome, le message du tooltip est bien vocalisé.
Bref, tout semble OK sauf que le design pattern du tooltip (https://www.w3.org/TR/2016/WD-wai-aria-1.1-20160721/#tooltip) réclame la propriété aria-describedby au lieu de aria-labelledby.
Mais, si je le remplace, le tooltip n'est plus vocalisé.

Cela fonctionne si je remplace le span par un bouton (ou en lui ajoutant un role button) ou par un lien, mais du coup le vocalisateur donne vocalise le fait qu'on est sur un bouton ou un lien (bof) ou si je surcharge avec aria-labelledby (mais je ne sais pas si sous jaws il ne serait pas vocalisé deux fois).

Par conséquent, je ne sais pas qu'elle solution préconiser.
Sinon je pourrais toujours ajouter une dérogation, mais je préfère éviter au maximum ce type de palliatif que je risque de  trainer sur tous les projets qui risquent d'utiliser ce même tooltip.

Quel est votre avis ou avez vous une autre solution à proposer ?

Par avance merci

Cordialement,

DGFiP Giuseppe ROSA
Inspecteur Analyste
Expert Accessibilité et RGAA

Atelier SODA - bureau SI-1A

Site SI-1A :
SODA : http://si1a.intranet.dgfip/soda
RGAA : http://si1a.intranet.dgfip/rgaa
tel : 01.573.36.997
pièce : 2387
 



Adoptez l'éco-attitude.
N'imprimez ce mail que si c'est vraiment nécessaire

_______________________________________________
liste_gta mailing list
liste_gta@list.accessiweb.org
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org

Répondre à