Accessibilité

[viki53]

Contexte / Problème

Désolé pour ce titre très basique, mais l'issue remonte plusieurs points difficiles à décrire autrement. 😊

Après un rapide tour des principales pages publiques je me permets de faire quelques suggestions pour l'accessibilité.

Certains problèmes peuvent être testés rapidement avec tota11y (bookmarklet disponible en bas de page) si besoin. Attention avec le bookmarklet : les CSP actuelles du site ne permettent pas son fonctionnement complet, qui injecte du JS externe.

Propositions

• [x] Utiliser des <label> dans les formulaires : permet de décrire ce qui est attendu (le placeholder est souvent ignoré par les lecteurs d'écrans et manque de contraste pour les voyants) en plus d'augmenter la surface réactive. Le formulaire d'inscription n'en comporte que 2 pour les checkbox, aucun pour les champs précédents qui deviennent donc inaccessibles pour beaucoup. (✅ @arnaudpeich)
• [x] Ajouter des titres : la page d'accueil n'a actuellement que deux titres, alors qu'il y a plusieurs sections dans la page : un <h1> par page, suivi de <h2> puis <h3> en respectant l'ordre et la descendance. Cela permet une navigation plus efficace dans la page. Idem sur la page "Donateurs" qui n'a qu'un simple <h1>
• [x] Supprimer role="button" sur les liens de navigation : les utiliser déclenche une navigation, pas une action locale, ce sont donc bien des liens, il faut les laisser tel quel pour rendre leur comportement prévisible et éviter les surprises pour les utilisateurs.
• [ ] À l'inverse l'intitulé du dropdown de connexion et celui intitulé "Ils nous aident" pourraient être des <button> puisqu'ils ne déclenchent pas de navigation mais ouvrent des menus
• [ ] Augmenter les contrastes : certaines zones ont un texte (par exemple le footer et le bandeau Ulule) manquant de contraste par rapport à son environnement.
• [ ] Éviter les petits textes : certains blocs de texte sont petits (12.8px, par exemple le texte d'aide du formulaire ou le footer) et donc peu lisibles pour certains qui devront potentiellement recourir au zoom navigateur alors que le reste est à la bonne taille.
• [x] Déplacer le texte du formulaire de connexion sur les données : le texte en bas du formulaire est actuellement hors de la balise form, le joindre au reste rendrait plus évident le fait que le texte est lié au formulaire et à l'action de s'inscrire. (✅ @arnaudpeich)
• [x] Titres de la FAQ : la page commence par un <h3> au lieu d'un <h1>, puis un <h2> et des <h3> (qui sont eux corrects je pense). Idem pour l'inscription de professionnel de santé
• [ ] Accordéon de la FAQ : plutôt que d'utiliser des <button> dans les <h3>, la balise <details> aurait un comportement similaire tout en étant bien supportée (~96%, des polyfills existent sinon), les <h3> pouvant être mis dans les balises <summary> du coup

Priorité

• P2: Moyennement urgent, à résoudre rapidement

Je choisis ce label car l'accessibilité bénéficie à tous, y compris aux valides.

Rendre le site plus simple à naviguer rendra grandement service, autant le faire le plus tôt possible (sans que ce ne soit bloquant pour autant).

Précisions

C'est un premier retour rapide sur quelques pages sur le temps que j'ai dans l'immédiat, n'hésitez pas à me pinger/contacter si besoin de plus d'infos ou pour tester d'autres pages.

J'essaierai aussi de faire un tour du HTML pour voir si des balises pourraient être utilisées pour améliorer la compréhensions des pages.

Note : je ne suis pas (encore) expert en accessibilité, mais je m'intéresse de plus en plus au sujet (pour compléter ma certification Opquast), il manque probablement beaucoup de choses, n'hésitez pas à corriger/préciser si besoin ! 🙂

[cbldev]

Hello !

Top sujet ! Est-ce que cette issue peut être considérée comme une good first issue ? On se ferait un plaisir de contribuer avec @melvinTmk !

[adrienpoly]

@cyrildotcc ☝️ 😄

[arnaudriegert]

@viki53 Merci pour cette issue ! J'ai traité les points 1 et 7 si tu veux bien les cocher 🙂

[hmartinez69]

Je vais m'occuper de bosser sur les points manquants ;)

[hmartinez69]

Bon j'ai un peu avancé mais pas résolu l'ensemble des points avec ma PR #926 Normalement j'ai check les points 2, 3 et 8

[viki53]

Pour le point 3 je parlais des liens suivants (sur la page d'accueil) :

<a class="btn btn-light btn-large font-weight-bold" role="button" target="_self" data-behavior="smooth-scroll-anchor" href="#inscription">S’inscrire à Covidliste</a>

<a class="btn btn-light btn-large font-weight-bold" role="button" target="_self" data-behavior="regular-link" href="/partenaires/inscription">Trouver des volontaires à la vaccination</a>

<a class="btn btn-light btn-large font-weight-bold" role="button" target="_self" data-behavior="regular-link" href="/benevoles">Rejoindre l’équipe Covidliste</a>

Ils ont bien un href valide, ils servent bien à naviguer plutôt qu'à déclencher une action dans le document en cours, ce sont donc des liens pas des boutons.