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

[Denis Chenu <denischenu AT april.org>]

Bonjour Philippe,

Merci pour ces retours.

Concernant les outils, je m'était servi à l'époque de Tanaguru, Frédéric
m'a conseillé sa nouvelle version Asqatasun. Je prend l‘extension.


Concernant les fieldset : j'avais durant un temps testé ceux ci, mais
ils entrainent de grosse difficultés avec pas mal de questions. Je suis
donc passé aux role="group" et role="radiogroup" avec les
aria-labelledby et aria-descibedby.  Les 2 outils précédents semble bien
les reconnaitre.

Sur les contrastes : il semble que bootstrap soit en cause … Frédéric et
moi avons déjà corrigé les erreurs les plus flagrante, mais cela dépend
réellement du thème bootstrap au final. Pas évident à corriger au global.

Sur les accesskey : lors de la révision du modèle, je me suis posé la
question de leur réelle utilité : certain conseils de les supprimer
puisqu'il remplace ceux de l'utilisateur …
Je vais déjà corriger les doublons (ceux ci ne sont pas dans la version
de base).

Sur les boutons radio : le role="radiogroup" et le aria-labelledby ne
remplace t'il pas ce système (Voir ma première remarque sur les
fieldset) ?
En fait : si limesurvey passait au fieldset : il ne serait plus utilisé
par une majorité des utilisateurs … par exemple l’élément legend
n'accepte que des contenu inline, et des utilisateurs ajoutent des
tableaux, des élément bloc, et au minimum des paragraphes …

Concernant les tableaux : chaque ligne possède son role="group" et ses
labelledby me semble t'il.

Sur les aides à la saisie : je pense que sur la première version ils
sont sous-utilisés. C'est l'un des buts du travail actuel sur la 2ème
version (utilisation de aria-invalid dynamiquement). Le deuxième (encore
en cours) et de trouver le moyen le plus efficace concernant les
questions masquées sous condition …
Le travail en cours est ici :
https://questionnaires.april.org/index.php/876591?newtest=Y

Denis

 Le 01/11/2018 à 12:02, Philippe Vayssière a écrit :
> 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
> 
> 
> 
> --
> 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
>

Attachment: signature.asc
Description: OpenPGP digital signature