Bonjour Guiseppe,
Tu peux tout à fait adapter un DP pour prendre en charge l'absence de
support ou un problème de restitution.
C'est la raison pour laquelle le critère 7.1.3 comporte la condition
suivante :
"Le composant d’interface adapte un motif de conception
<cid:[email protected]> défini par l’API ARIA ;"
Avec la définition de glossaire :
"
L’API ARIA définit des motifs de conception, par exemple pour un système
d’onglet ou une fenêtre modale, destinés à assurer un comportement
homogène de référence des composants d’interface. Le respect de ces
motifs de conception est exigé par le référentiel RGAA.
Néanmoins il est possible d’adapter ces motifs de conception en
remplaçant une propriété mal supportée par une propriété équivalente ou
en enrichissant le composant de propriétés améliorant l’expérience
utilisateur ou sécurisant son comportement.
Il appartient à l’auditeur de vérifier que ces adaptations sont
cohérentes avec le motif de conception, ne modifient pas le
comportement, en termes d’expérience utilisateur, du composant et que le
composant adapté est correctement restitué par les technologies
d’assistance.
Si ces exigences sont respectées, le composant peut-être déclaré
"conforme" au motif de conception.
"
Donc tu peux conserver ton utilisation de labelledby.
JPV
Le 28/10/2016 à 14:44, ROSA Giuseppe (93) a écrit :
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
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
--
_____________________________________
Jean-Pierre VILLAIN - @villainjp - +33 (0)6 98 08 50 49
Expert senior, formateur et responsable du pôle R&D
Access42 : expertise, conseil et formation en accessibilité numérique
+33 (0)9 72 45 06 14 - access42.net - @access42net
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
