[A11Y] Mise en conformité : blocs et recherche

[Olivia206]

Recherche

• [x] Le message restituant le nombre de résultats

  cette solution n'est pas correct et introduit en l'état une un nouvelle non conformité puisque par défaut la balise contient un <p> vide. Elle fait également doublons avec le texte visible sous le champ. Il faudrait donc :

  • ne pas avoir de <p> vide par défaut mais générer le <p> en meme temps que le texte
  • si possible ajouter en js un aria-hidden="true" sur le <p class="pagefind-ui__message svelte-e9gkc3">xxx résultats pour zzz</p> visible sous le champ ou alors une fois le texte généré dans la balise en aria-live si pas de mise à jour après 3 secondes le supprimer pour éviter le doublons avec le texte visible sous le champ
  • quand on supprime sa saisie complètement / vide le champ supprimer le <p> généré dans la balise en aria-live

Solution proposée :

• J'ajoute un écouteur d'événement sur l'input (donc déclenchement quand on écrit) qui permet 1) de vider la div avant de recréer un <p> pour éviter d'avoir "33 résultats pour 'xx', 18 résultats pour 'XXX'", 2) de supprimer le <p> vide si l'input a une valeur vide

• Présence d’une liste ordonnée sans contenu Déjà réparé https://github.com/osunyorg/theme/issues/678

Lightbox

les boutons ouvrant la modale d'agrandissement d'image sont en aria-hidden true tabindex -1 (si la logique est de dire que c'est parce que cela ne sert à rien pour les lecteurs d'écran cela n'est pas pertinent puisque on se retrouve alors avec une légende (figcaption) qui ne décrit rien puisque le lien contenant l'image est en aria-hidden true et que par ailleurs l'utilisateur clavier peut lui bien vouloir utiliser la modale comme un utilisateur souris

la modale d'agrandissement d'image comportent de nombreux problèmes (mais je suppose que c'est lié au point du dessus qui expliquerait pourquoi elle n'a pas été rendu accessible pour l'instant)

le contenu de la modale comporte également de nombreux problèmes (mais je suppose que c'est lié au point du dessus qui expliquerait pourquoi elle n'a pas été rendu accessible pour l'instant)

Quels nombreux problèmes ?

Figures

des role figure sur des <figure> sans légende

Je ne comprends pas ce point : l'élément figure n'a pas obligation d'avoir une légende (mdn), faut-il que le rôle en revanche soit donné uniquement si présence de légende ? Au nom de quoi ?

• [ ] Olivia discute avec Temesis pour comprendre

Carousel

sur le carrousel "Galerie — layout carrousel" et "Actualités — layout carrousel" il y a toujours des tabindex 0 sur les figure / article à remplacer par -1

• [x] Enlever le tabindex 0 ou le remplacer par -1 (vérifier avec Aurélien)

le carrousel témoignage les boutons pour changer de slide comporte toujours un aria-selected et les un intitulé Aller au slide x qui commence à 0 au lieu de 1 et idem autres carrousel

• [x] Commencer à 1

il faudrait prévoir que quand un titre est contribué il puisse etre associé à ces bouton et au bouton play / pause via un aria-describedby

• [x] Ajouter le aria-describedby

Les 2 pb suivants viennent de la même raison : si une image est visible de 3px, elle est considérée comme visible pour les TA

sur Galerie — layout carrousel quand on active le bouton > pour accéder à l'étape 3/8 ce figure devrait devenir complètement visible et prendre le focus au lieu de la 2eme figure

• [ ] Problème de détection de l'élément suivant (à cause des images à peine visibles)

le carrousel frise chrono de mon coté j'ai un bloc partiellement masqué qui est en aria-hidden false au lieu de true (sans doute lié au padding du bloc qui doit fausser le calcul)

• [ ] Corriger le aria-hidden

Bloc organisations

le composant Organisations — layout carte devrait présenter un mode d'affichage liste si il est utilisé pour afficher des POI car je suppose que vous ne pouvez pas rendre accessible la carte elle meme

Solution : ajouter une alternative en tableau

• [x] Intégrer cf Figma

Blocs utilisant l'accordéon

les blocs dépliables définitions de termes, la partie non visible n'est pas masqué en display none ou visibility hidden

L'élément html details est déjà masqué par les navigateurs (avec voiceover je n'ai aucun pb et l'article sur le sujet l'établit comme conforme, en dehors des aria roles : https://blog.learningtoo.eu/expanding-summary-details-accessibly)

• [x] fait mais ce serait top d'obtenir une confirmation / infirmation de Temesis pour comprendre

[alexisben]

Role figure

Cas 1 : image avec légende Ajout d'un rôle figure ou group et aria-labelledby vers le contenu de la légende soit aria-label qui répète le contenu

Cas 2 : image sans légende Pas d'ajout de role ni d'aria

Cartes (leaflet)

Si les contenus sont accessibles autrement que dans la carte, on peut aria-masquer la carte. Si on rend accessible la carte au clavier, il faut que les contenus soient bien en français.

Préco : ne pas rendre rendre les pins/marker accessibles au clavier (alt vide, pas de role="button"), traduire les intitulés +/- et title sur les liens leaflets à traduire. sur le container de la carte : ajout d'un role 'region' et aria-labelledby -> titre du block avec fallback aria-label "vue cartographique" aria-describedby -> un paragraphe expliquant qu'on peut se déplacer sur la carte en utilisant les flèches. -> masquer les markers de la carte aux lecteurs d'écran et à la navigation clavier.

Mettre la transcription au dessus (dans l'ordre du code html) avant la carte.

Lightbox

tabindex="0" sur le

"fermer" dans les petites popup de contenu.