Des ressources sur l'accessibilité (a11y) et YesWiki?

Support
#1

Hello !
Je fais partie d’une équipe (cc @mrflos) qui veut utiliser YesWiki pour un client dont c’est une préoccupation (et c’est tout à son honneur).

Avant de chercher par moi-même à analyser YesWiki, j’aimerais savoir s’il existe des ressources au sujet de l’accessibilité dans YesWiki.
Merci !

1 « J'aime »
#2

Hello again !
Je vous fais un retour après une première passe sur un YesWiki qui utilise le thème margot.

Voici une liste de ce qui va pas. Elle n’est pas complète, c’est une première passe.

Si des personnes s’en emparent, ça m’intéresse de continuer à chercher des éléments inaccessibles et à travailler à améliorer l’accessibilité de YesWiki.

Le bouton réglages

  • A comme texte associé un emoji. À voir si les lecteurs d’écrans lisent le nom de l’emoji ou pas.
  • N’est pas surligné quand on passe dessus. Il faut donc deviner qu’il a le focus pour cliquer dessus au clavier.

La barre de navigation

Pas de bouton caché « Passer au contenu » accessible et visible à la première tabulation, qui permet de passer la barre de navigation

Les notes de bas de page

Pas de lien en fin de phrase pour resauter là où on en était dans le texte.

Les images

Les images sont par défaut des liens cliquables vers l’image en question. Ce serait mieux qu’elles ne soient pas des liens par défaut.

Les accordéons

Ne sont pas activables au clavier.
Quickfix : les ouvrir tous par défaut…

Les popins (fenêtres modales)

  • Elles ne sont pas accessibles au clavier ni par le lecteur d’écran. Quand une popin/iframe s’ouvre, le focus devrait arriver dessus. Là il continue sur la partie en arrière-plan.
  • Les croix pour les fermer ne sont pas accessibles au clavier.
  • Appuyer sur Échap ne les ferme pas.

Les filtres

  • Accessibles au clavier mais le CSS ne change pas quand ils sont focus par le clavier : on ne voit pas ce qu’on focus.
  • Il n’y a écrit nulle part que ce sont des filtres. Sans les répères visuels (avec un lecteur d’écran), on ne peut pas comprendre ces boutons.

Les sous-barres de navigation

  • Ne sont pas des éléments « nav ». Le lecteur d’écran va donc les présenter comme des liens mais pas comme une barre de navigation.
  • Une meilleure solution serait peut être d’avoir un menu principal déroulant (en veillant à ce qu’il reste accessible)

Les images « progress bar »

le alt="" de la barre devrait contenir le pourcentage. exemple : alt=« 70% »

Pages dans le menu des paramètres :gear:

Doc de YesWiki intégrée

  • Barre de navigation pas accessible, rendant une grosse partie des pages inatteignables

Présentation YesWiki

  • Caroussel pas accessible
2 « J'aime »
#3

Merci @ppom pour cet audit détaillé, j’espère que dans la communauté, on trouvera de la ressource pour dégrossir ce chantier!

#4

Pour les fenêtres modales, edit : il conviendrait mieux d’utiliser l’élément <dialog>, qui inclut déjà presque toutes les propriétés nécessaires pour une accessibilité correcte (voir la doc MDN)

1 « J'aime »
#5

J’ai fait un commit pour le pourcentage dans les alt d’images.
Et je note que dans les nouvelles installations de yeswiki , il y a un titre « Roue crantée » pour le bouton roue crantée cf. https://github.com/YesWiki/yeswiki/blob/b72a2917356b03e57c7bdf4918dab5e4bae1be44/setup/sql/default-content.sql#L605 , est ce suffisant?

1 « J'aime »
#6

Super pour le alt, bravo !
Chouette aussi pour la roue crantée. On peut peut-être trouver un message plus explicite, en même temps c’est imagé. Là pour le coup je saurais pas dire, faudrait peut-être demander à une personne aveugle de naissance si la métaphore est connue. En tout cas c’est bien mieux que quand y’avait rien. Je vois que c’est toi aussi d’ailleurs qui avait ajouté ça :wink: