search

GouvernementFR / dsfr

🇫🇷 Official french government's design system (Système de Design de l'État)
https://www.systeme-de-design.gouv.fr/
Other
236 stars 54 forks source link

♿️fix(logo): évite les arrêts de vocalisation de lecteurs d'écrans #903

Open manuhabitela opened 6 months ago

manuhabitela commented 6 months ago

:wave:

Suite à mon retour sur le slack de la communauté voici un commit concernant les logos.

Je recopie ici le message de commit :

Actuellement on utilise des <br> dans les logos pour que "République Française" ou autres termes s'affichent bien visuellement.

Par défaut, un lecteur d'écran peut avoir tendance à arrêter la lecture après un <br> quand on navigue pas à pas. C'est le comportement normal, c'est ce qu'on veut habituellement : il s'arrête pour marquer un passage à la ligne.

Cependant ici ça serait mieux que le lecteur ne s'arrête pas, le br étant utilisé uniquement pour l'aspect layout.

Masquer ces <br> de l'arbre d'accessibilité permet de rendre la vocalisation plus fluide (plus d'arrêts à cause des br) tout en gardant l'impact visuel.

Note : dans certains usages du logo, le problème n'était pas présent (le dom n'est pas tout à fait le même sur un "header minimal" et un "header sans navigation" par exemple). Cependant j'ai trouvé ça pas plus mal de garder cette idée de aria-hidden partout afin que tout copié/collé rapide du DSFR fonctionne.

Si ça vous dit de merger ça, ça serait peut-être intéressant de mentionner pourquoi ce fameux aria-hidden est présent dans la partie Accessibilité des composants concernés ?

Voici aussi une vidéo montrant la diff avant/après avec NVDA (le problème est aussi reproductible avec JAWS). Pas de son mais une boîte de dialogue affiche ce qui est vocalisé ;)

https://github.com/GouvernementFR/dsfr/assets/221253/48cc6fc2-6eac-421f-88ce-93d56b1db6ac

keryanS commented 6 months ago

Merci pour le retour Manu, Nous avions conscience de ce problème mais il est passé à la trappe. Ta PR me semble nickel, nous l'intégrerons dans la prochaine livraison. Je crée un ticket pour la partie doc. 🔥

keryanS commented 5 months ago

Après discussion avec l'équipe, l'utilisation de <br aria-hiden=true> n'est pas forcément la solution que nous recommanderons. En effet, en terme de structure html, le <br> n'est pas vraiment recommandé dans un contexte de layout. Il serait surement plus judicieux de scinder le contenu dans des sous élements (span par exemple) avec une propriété css permettant le passage à la ligne (display : block). Par exemple : 

<p class="fr-logo">
  <span class="fr-logo__row">Intitulé</span>
  <span class="fr-logo__row">officiel</span>
</p>
.fr-logo__row {
  display: block;
}
manuhabitela commented 5 months ago

Faudrait revérifier mais pour le coup pour l'usage dont je parle je pense que ça ne résout pas le problème ; le lecteur d'écran va voir deux blocs et donc faire une pause en plein milieu.

edit : effectivement au moins avec NVDA en faisant comme ça, ça repart à vocaliser en deux parties.

keryanS commented 5 months ago

Faudrait revérifier mais pour le coup pour l'usage dont je parle je pense que ça ne résout pas le problème ; le lecteur d'écran va voir deux blocs et donc faire une pause en plein milieu.

edit : effectivement au moins avec NVDA en faisant comme ça, ça repart à vocaliser en deux parties.

Je n'ai pas testé, mais à priori les span ne vocalisent pas de pause, si ?

manuhabitela commented 5 months ago

Bon c'est un peu overkill et c'est de la micro opti donc pas si grave si c'est pas géré hein, mais bon tant pis je suis lancé :P

NVDA regarde le CSS pour déduire comment vocaliser des éléments donc si, les span peuvent déclencher des pauses.

Le comportement est pas le même suivant les lecteurs d'écrans. J'ai fait une page de test pour donner une idée : https://codepen.io/leimi/pen/bGJqmrL :

En alternative au <br aria-hidden="true">, un <br role="presentation"> répare le problème pour tout le monde et identifie mieux le pourquoi on l'utilise que le aria-hidden="true" dans le code. De plus le RGAA a un cas prévu pour ça (à défaut du aria-hidden).

J'ai mis à jour mon code pour utiliser le role plutôt que le aria-hidden.

yaaax commented 5 months ago

Bonjour !

Merci @manuhabitela pour cette PR. J’étais aussi tombé sur ce problème, mais il est tombé aux oubliettes.

Je viens de tester la deploy-preview ci-dessus et sur Safari (version 16.6.1) / VoiceOver (version 10) les 2 mots sont désormais "collés", je pense que c’est un problème.

intitule-officiel-sans-espace
manuhabitela commented 4 months ago

oui bien vu, rajouter un espace avant la balise du br devrait régler le souci :ok_hand:

zellerbaptiste commented 4 months ago

Bon c'est un peu overkill et c'est de la micro opti donc pas si grave si c'est pas géré hein, mais bon tant pis je suis lancé :P

NVDA regarde le CSS pour déduire comment vocaliser des éléments donc si, les span peuvent déclencher des pauses.

Le comportement est pas le même suivant les lecteurs d'écrans. J'ai fait une page de test pour donner une idée : https://codepen.io/leimi/pen/bGJqmrL :

  • VoiceOver vocalise tout bien.
  • JAWS s'arrête au saut de ligne avec le code actuel. Et vocalise mal les solutions span+display block ou span+display flex, il semble ne pas comprendre qu'il y a un espace entre les mots et dit "républiqué française".
  • NVDA s'arrête au saut de ligne avec span+display block. Et dit aussi "républiqué française" en span+display flex.
  • pas testé sur mobile

En alternative au <br aria-hidden="true">, un <br role="presentation"> répare le problème pour tout le monde et identifie mieux le pourquoi on l'utilise que le aria-hidden="true" dans le code. De plus le RGAA a un cas prévu pour ça (à défaut du aria-hidden).

J'ai mis à jour mon code pour utiliser le role plutôt que le aria-hidden.

Bonjour Emmanuel, merci pour tout ces tests précieux qui aident à faire avancer notre reflexion.

Après en avoir re-discuté avec l'équipe et dans le but de fournir prochainement un correctif serait-il possible de tester également une structure avec les deux <span> en inline du type : 

<p class="fr-logo">
  <span>Intitulé</span>
  <span class="fr-logo__row">officiel</span>
</p>

et en ajoutant en CSS un retour à la ligne dans un pseudo element sur la classe 'fr-logo__row' : 

 .fr-logo__row::before {
  content: "\000A";
  white-space: pre-line;
}