Re: [Accessibilite] Vos retours/remarques sur l'accessibilité d'un questionnaire concernant l'émission de radio de l'April « Libre à vous ! »

[Philippe Vayssière <philippe AT vayssiere.fr>]

Bonjour,

merci pour tout ce travail sur LimeSurvey, en particulier si je compare 
à certaines solutions commerciales que je peux être amené à croiser et 
qui sont à pleurer…


Il y a une extension appelée aXe pour Firefox 
<https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/> et Chrome 
qui est utile car fiable (pas de faux positif : quand elle affiche une 
erreur c'est réellement une erreur d'accessibilité).
F12, onglet aXe, bouton Analyze et c'est parti.


Pour aller plus loin, la DInSIC, qui est l'organisme public s'occupant à 
présent de l'accessibilité numérique pour les autres administrations via 
le RGAA 3 (Référentiel Général d'Accessibilité pour les Administrations) 
<http://references.modernisation.gouv.fr/referentiel/>, a publié de 
nombreux guides très bien faits pour chaque profil de personnes pouvant 
intervenir dans la vie d'un site ou d'une application web, entre autres :

* Défauts d’accessibilité : Impacts sur les utilisateurs 
<https://disic.github.io/guide-impacts_utilisateurs/>
* Guide du concepteur <https://disic.github.io/guide-concepteur/>
* Guide de l'intégrateur <https://disic.github.io/guide-integrateur/>
* Guide du développeur <https://disic.github.io/guide-developpeur/>

Et précédant ces guides, il y a l'initiative AcceDeWeb 
<https://www.accede-web.com> d'Atalan avec des notices également par 
profils.


Voici quelques retours pas exhaustifs mais ça peut permettre de démarrer :-)

Sur la page d'accueil :

Il manque un élément main à la page : ça pourrait être soit 
#outerframeContainer soit un nouvel élément parent de .top-container et 
#outerframeContainer (je ne sais pas à quoi sert le 1er donc je ne peux 
pas être plus précis).

Les liens dans le texte (de labeur et seulement ceux-là mais sur la page 
d'accueil il n'y en a pas vraiment d'autres) devraient être soulignés 
pour qu'ils soient plus facilement distinguables du reste du texte.
Ou sinon que le rapport de contraste entre la couleur du texte et la 
couleur des liens soit d'au moins 3:1 mais pfff mieux vaut les 
souligner ! ( https://app.contrast-finder.org est parfait pour ce genre 
de mesure de contrastes ET de conseils de couleurs quand ce n'est pas 
conforme, en plus du logiciel Colour Contrast Analyser 
<https://developer.paciellogroup.com/resources/contrastanalyser/> – 
Windows et Mac seulement)

Après avoir commencé le questionnaire, 1ère page :

En naviguant au clavier (touche Tab), lorsque la dropdown en haut à 
droite obtient le focus, il n'est pas visible comme peut l'être le lien 
qui précède.

Il y a une Alert sur fond jaune : le bouton permettant de la fermer a 
pour intitulé "x" ce qui n'est pas explicite mais heureusement il y a un 
attribut `aria-label="Close"` qui corrige le tir ; par contre il 
faudrait traduire ce texte en français (il doit y avoir bien d'autres 
occurences de ce type de bouton à traduire également).

Les attributs accesskey au nombre de 5 ont 2 doublons. "p" et "n" sont 
définis 2 fois chacun.

Formulaire, le gros morceau :

Chaque question avec des boutons radio devrait être balisée par un 
élément fieldset avec son élément legend (il faut que ce soit le 1er 
enfant direct du fieldset) afin de regrouper les informations de même 
nature.
Ici .question-container devrait être un fieldset ou avoir pour 
descendant direct un élément fieldset à créer.
La question serait l'élément legend.
Cf 
http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-11-5

Les étiquettes sont bien associées aux radio avec les attributs for/id, 
nickel.

Il y a un tableau à la question 21 qui doit je suppose être assez 
complexe à remplir avec un lecteur d'écran mais ce n'est peut-être pas 
la priorité de refondre le tout et n'étant pas concerné au 1er chef, ce 
n'est qu'une supposition de ma part.
Pour ce qui est du code HTML, il y a des cellules d'entête TH à gauche 
et en haut, parfait.
Une amélioration serait d'ajouter un attribut scope sur chaque TH avec 
comme valeur soit col soit row : `scope="col"` en 1ère ligne et 
`scope="row"` à droite. Cela permet d'associer à coup sûr les cellules 
de données aux cellules d'entête.

Concernant les messages d'aide à la saisie, pour commencer ils existent 
ce qui place LimeSurvey dans le top 10% en matière de formulaire !
Ce serait bien d'avoir des retours d'utilisatrices et utilisateurs 
d'aides technique pour savoir s'ils sont bien perçus et lus et si non, 
une piste est dans le test 11.10.8 du RGAA 
<http://references.modernisation.gouv.fr/referentiel/criteres.html#test-11-10-8>.
Avec les boutons radio, il n'y a pas une étiquette mais 3 ou 10 et le 
message est situé entre la question et les réponses, à tester.

Plus de l'ergonomie que strictement de l'accessibilité : ce serait bien 
de savoir où en est l'avancement du questionnaire avec une information 
telle que "Page 4/10". Je pensais en effet que la page "Questions vous 
concernant" commençant par la question "Êtes-vous membre de l'April ?" 
pourrait être la dernière mais nan, il y en avait encore quelques unes 
ensuite.
Ce n'est cependant pas forcément possible s'il y a des pages 
"conditionnelles" n'apparaissant que lorque l'on répond d'une certaine 
manière à certaines questions et demandant des précisions supplémentaires.


Bon appétit,
Philippe

Le 01/11/2018 à 09:08, Frédéric Couchet a écrit :
> Bonjour,
>
> je suis en train de mettre en place, avec LimeSurvey, un questionnaire
> concernant l'émission de radio de l'April. Je suis aidé par Denis Chenu,
> qui est inscrite à la présente liste, qui fait partie des personnes qui
> développent LimeSurvey. Nous sommes preneurs de vos tests, retours,
> remarques concernant l'accessibilité du formulaire.
>
> Vous trouverez une prévisualisation du questionnaire à l'adresse
> suivante :
>
> https://questionnaires.april.org/index.php/447812
>
> Précision : les réponses ne seront pas sauvegardées, c'est un mode
> prévisualisation qui permet d'interagir avec les questions.
>
> Librement,
> Fred.
>
>
> --
> Pour connaître la configuration de la liste, gérer votre abonnement à la 
> liste accessibilite et vos informations personnelles :
> http://listes.april.org/wws/info/accessibilite