keryanS
commented
5 months ago Bonjour Manu,
Merci pour cette recherche approfondie et cette proposition de modification. Nous en avons discuté avec l'équipe et notre partenaire Access42 expert en accessibilité.
Tu as raison sur certains points. Néanmoins, l'attribut title nous semble de manière générale le plus adapté :
- Le choix d'utiliser l'attribut title sur les liens est de donner également l'information aux personnes qui n'utilisent pas un lecteur d’écran (handicap cognitif par exemple ou personnes déficientes visuelles) pour expliciter des icônes qui ne le sont pas toujours.
- Sur les liens, utiliser une propriété aria-label comporte un risque d'erreur d'implémentation aux conséquences plus graves qu'un mauvais usage de l'attribut title. En effet, l'aria-label écrase le contenu visible.
On pourrait imaginer un lien :
<a href="" aria-label-"legifrance.gouv.fr - nouvelle fenêtre">legifrance.gouv.fr</a>Imaginons que son intitulé soit changé en :<a href="" aria-label-"legifrance.gouv.fr - nouvelle fenêtre">Légifrance, Le service public de la diffusion du droit</a>Il y a des probabilités importantes que l'aria-label ne soit pas correctement modifié et que l'information visible soit écrasée. On peut aussi imaginer des mauvaises implémentations du typearia-label="nouvelle fenêtre"sur le lien. - Il n'y a par ailleurs, pas de problème aux lecteurs d’écran avec l'attribut title. Si des utilisateurs décident de ne pas vocaliser la description du lien (avec l'indication d'ouverture de nouvelle fenêtre pour alléger la restitution), il s'agit de leur choix. Pourquoi leur forcer la restitution "intitulé + nouvelle fenêtre" ?
Tes remarques sur le title en mobile et navigation clavier sont par ailleurs pertinentes, mais systématiser le tooltip pour ces cas nous semble un peu extrême. Et s'imposer de ne jamais utiliser d'icône sans l'accompagner de texte, est d'un point de vue conception UI/UX, compliqué. Cela dit, ces cas doivent être limités aux icônes simples et couramment utilisées dans le contexte (burger menu, loupe de recherche, etc).
manuhabitela
yaaax
Bonjour :)
Je viens ici avec une micro PR d'exemple (et une méga description :see_no_evil:) pour commencer une discussion sur les attributs
titleutilisés sur les éléments interactifs du DSFR.À mes yeux ces attributs ne sont pas le mieux qu'on puisse faire pour deux raisons :
Je m'explique !
1. L'attribut
titleet les lecteurs d'écransQuand on utilise un lecteur d'écran audio (VoiceOver, NVDA, Jaws et autres), l'attribut
titlen'est pas souvent le plus adapté.Par exemple, sur les liens s'ouvrant dans une nouvelle fenêtre, le DSFR conseille d'écrire du HTML comme ceci :
Ceci peut avoir plusieurs résultats différents suivant le lecteur d'écran, sa configuration utilisateur, ou son usage. Avec ce code, voici ce qui est peut être vocalisé :
Par exemple, avec NVDA ou JAWS, si je navigue pas à pas avec les flèches et que j'arrive sur un lien, le
titlen'est pas vocalisé. Il l'est en naviguant sur le lien via la touche Tabulation, ou en naviguant de lien en lien par exemple. On peut argumenter que cet usage n'est pas le principal (peut-être), mais on peut aussi argumenter de faire un truc supporté au mieux, plutôt que partiellement, pour répondre à tous les usages.Avec VoiceOver, le
titlen'est pas vocalisé directement mais avec un temps d'attente sur le lien. Rien n'indique cependant avant d'attendre qu'une info supplémentaire est disponible.Avec JAWS et NVDA, quand le
titleest vocalisé, il l'est directement après le contenu : le contenu est donc répété. Cependant si letitleest strictement identique au contenu, alors il ne sera pas forcément [*] vocalisé.[*] je dis "pas forcément" car c'est le cas la plupart du temps dans mes tests, mais suivant le sens du vent et des planètes, des fois il répète quand même l'info. Oui, grosse étude scientifique fiable de mon côté effectivement…
2. L'attribut
titlesans lecteur d'écranLes attributs title dans le DSFR ne semblent pas utilisés qu'à des fins d'usages pour lecteurs d'écran. Notamment sur les boutons icone de recherche, menu, on double le contenu du bouton avec un title :
On a relevé plus haut que dans ce cas précis de
titlestrictement identique au contenu, letitlene pose pas forcément problème avec un lecteur d'écran. Cependant il n'est pas nécessaire pour le lecteur d'écran, car le contenu texte à l'intérieur de la balise suffit.Je suppose donc que ceci est fait afin de donner un contexte supplémentaire aux utilisateurs de souris. C'est cet usage que je remets en question ici.
À mes yeux, tous ces éléments combinés font que, se reposer sur cette tooltip pour donner de l'info, n'est pas une solution satisfaisante.
Car la plupart des utilisateurs ne vont jamais en profiter. Soit parce qu'ils sont sur mobile. Soit parce qu'ils ne devineront pas qu'on peut attendre sur l'interface avec la souris, sans bouger d'un seul pixel (!), pour afficher de l'aide. S'ils ont conscience du fonctionnement des tooltip "title", c'est souvent qu'ils découvrent ça par hasard, ou parce que ce sont des utilisateurs plutôt avertis. Autrement dit : c'est très rare.
Je vous donne une stat inutile pas du tout objective juste pour pousser mon argument : perso, j'ai jamais vu quelqu'un essayer d'afficher une tooltip
titledans la vrai vie, sauf des développeurs qui savent que ça existe car c'est eux qui les codent :PUne autre façon de voir les choses est : si l'info supplémentaire donnée par le
titleétait vraiment nécessaire, on aurait surement mis en place de quoi rendre cette info disponible aussi au clavier et sur mobile, non ?Réponse au point 1 pour les lecteurs d'écran :
aria-labelÀ mes yeux, une meilleure façon de répondre au 1er problème serait d'utiliser l'attribut
aria-label:Cet attribut a un support lecteur d'écran bien plus stable et cohérent que
title. Ici, tous les lecteurs d'écran, quelque soit leur config, quelque soit l'usage, vocaliseront :Lien legifrance.gouv.fr - nouvelle fenêtre
Pas de risque que ce ne soit pas vocalisé. Pas de risque que ce soit vocalisé en différé après une attente sur l'élément. Pas de répétition déroutante du contenu du lien.
Et la tooltip du point 2 ?
Je suis d'avis de simplement : ne plus se reposer sur la tooltip des title pour des infos considérées importantes pour tout le monde. Et proposer des changements d'UX au cas par cas si besoin :
Bref vous l'avez compris, je ne suis pas convaincu par l'usage des tooltip en général pour donner de l'info importante, en particulier si cette tooltip est implémentée uniquement avec un attribut
title.Enlever ces
titledu DSFR c'est aussi décider de moins montrer cette pratique qui, on l'a vu, a un usage plutôt "sensible". Si je suis du genre à m'inspirer des bouts du DSFR pour coder mon app, à copier/coller des bouts de code ici et là, je peux facilement me mettre dans la tête que cet attributtitleest une bonne pratique fiable, alors qu'en réalité, pas trop.Conclusion
J'ai créé deux pages de tests un peu isolés : le DSFR actuel vs une version avec aria-label pour tester facilement avec lecteurs d'écrans.
Qu'en pensez-vous ? Si ça vous paraît intéressant, je serai ensuite ravi de continuer le travail sur cette PR pour peaufiner la documentation et autres choses nécessaires que je n'aurais pas vues.
Merci !