Exemple de base de données accessible (RGAA ou AccessiWeb) ?

Bonjour !

Documentaliste stagiaire auprès d'une Maison départementale de l'autonomie (ex-MDPH), il m'a été confié une mission d'évaluation de l'accessibilité des contenus Web générés par le logiciel documentaire utilisé, notamment vis-à-vis du RGAA (il ne s'agit pas d'un audit mais d'une présentation de solutions envisageables).
Le problème identifié de non-accessibilité concerne des interfaces de consultation et de recherche de bases de données, comprenant donc des formulaires.

Dans le cadre de mon travail, j'ai cherché à étudier (autant que faire se peut... je ne suis pas informaticienne et ne maîtrise qu'un HTML de base) des bases de données exemplaires en la matière. Mais je tombe toujours sur des sites qui se déclarent accessibles, et dont les formulaires d'interrogation des BDD ne comportent cependant pas d'étiquette de champ, pour ne citer que ce critère-là du RGAA :

a écrit :
Formulaires [Formulaires] 11 Absence d'élément de formulaire sans étiquette associée. Niveau A.

Exemple représentatif : ce formulaire de recherche, d'un site pourtant labellisé AccessiWeb Argent, ne contient pas d'étiquettes de champs d'interrogation :

http://www.correspondance-delacroix.fr/correspondances/

D'où ma question : quelqu'un aurait-il l'amabilité de me signaler une interface de recherche parfaitement accessible ? Ou bien est-ce moi qui comprends mal le critère en question ?...

Merci pour votre aide !

Bonjour,
J'ai trouvé ce petit site : http://www.rgaa.net/spip.php?page=all =°
Il référence les différents tests à effectuer le valider selon le rgaa...

Pas trop mal fait, tu peux cliquer sur le test. Par exemple :
Thématique 3 : Formulaires
3.11 – Absence d’élément de formulaire sans étiquette associée (A)

Et le lien t'amène ici : http://www.rgaa.net/Absence-d-element-de-formulaire, 29.html une page qui indique la procédure à effectuer afin de valider le test.

Donc en gros, pour ce test, il faut que le champ ait soit un attribut title décrivant précisément sa fonction, soit un id et qu'il soit précédé d'un élément label ayant un attribut for désignant l'id du champ.

Voici donc deux exemples valides:

<input type="text" title="nom" name="nom" />
<label for="prenom">Prénom</label><input type="text" id="prenom" name="prenom" />

Modifié par Gothor (04 Jun 2012 - 16:40)

Hello,

Ellis a écrit :
Exemple représentatif : ce formulaire de recherche, d'un site pourtant labellisé AccessiWeb Argent, ne contient pas d'étiquettes de champs d'interrogation : http://www.correspondance-delacroix.fr/correspondances/
[…]
Ou bien est-ce moi qui comprends mal le critère en question ?…

Je crois qu'il doit y avoir une petite confusion, car les étiquettes sont bien présentes dans ton exemple, au moyen de la balise <label>, et correctement reliés à leur champ en utilisant les attribut for/name…

Effectivement, mais le site comporte plein d'autres problèmes d'accessibilité, ça se donne comme des petits pains ces certifications?

J'ai donc ma réponse en moins d'une heure : j'ai mal compris un des rares critères que je croyais avoir saisi... Merci pour votre réactivité en tout cas !

Je pensais qu'"étiquette" signifiait texte alternatif, qui apparaît au passage de la souris, comme pour des images... Je l'ai vu sur d'autres BDD, mais qui par ailleurs n'en comportaient pas de façon systématique, comme ici :

http://www.ctnerhi.com.fr/ctnerhi/pagint/centre_doc/base_donnees/saphir.htm
(Site sans label mais se déclarant accessible)

Comme je n'ai décidément pas les compétences pour identifier une BDD conforme aux critères d'accessibilité, il me faudrait absolument pouvoir partir d'une BDD vraiment accessible... Si tant est que ça existe !

Kustolovic, le label Accessiweb peut ne pas être renouvelé d'une année sur l'autre s'il ne répond plus aux exigences du label

Ellis a écrit :
http://www.ctnerhi.com.fr/ctnerhi/pagint/centre_doc/base_donnees/saphir.htm
(Site sans label mais se déclarant accessible)

Ce site a bien des labels devant ses champs Oo

Après, les labels ne font pas toute l'accessibilité =° (Je ne savais même pas qu'ils en faisaient partie... Ils semblent tellement évidents...)

Ah, par contre ils ont un label associé à la mauvaise checkbox (pour 2000-20005 relié à 2006-2010)
Modifié par Gothor (04 Jun 2012 - 16:44)

Label d'accessibilité voulais-je dire, comme AccessiWeb.
(Je crois que je vais devoir passer chacun de mes messages au validateur de Non-ambiguïté informatique, je me couvre de ridicule...)

Ah, non, pour le coup, c'est moi qui n'ait pas compris, ta phrase était tout à fait correcte, mais j'étais resté dans l'histoire des formulaires =°

Du coup, tu aurais un exemple de BDD qui te paraisse conforme au RGAA en tous points ? Pour le moment, je suis incapable d'en juger seule, et je dépends des retours des informaticiens maison...

Salut,

Ellis a écrit :
J'ai donc ma réponse en moins d'une heure : j'ai mal compris un des rares critères que je croyais avoir saisi...

En cas de mauvaise compréhension, la meilleure solution consiste à se former à l'évaluation de l'accessibilité des sites Web, avec le RGAA ou avec le référentiel Accessiweb.

Je n'en doute pas, mais je ne suis que stagiaire et mon stage prend fin dans un mois... Peut-être dans ma future vie professionnelle (j'espère !)...

Gothor a écrit :
J'ai trouvé ce petit site : http://www.rgaa.net/spip.php?page=all =°
Il référence les différents tests à effectuer le valider selon le rgaa...

C'est la version HTML du PDF du RGAA que P. Bourlon a mis en ligne sur un site dédié (plus exactement l'Annexe 2 du RGAA qui concerne les tests, le PDF à respecter quand on est responsable d'un site public).
Parce qu'on peut faire des liens vers des pages HTML alors que vers le contenu d'un PDF de plusieurs centaines de pages ... c'est moins évident Et les ouvrir dans plusieurs onglets, etc

kustolovic a écrit :
Effectivement, mais le site comporte plein d'autres problèmes d'accessibilité, ça se donne comme des petits pains ces certifications?

Accessiweb labellise des sites comme des petits pains ? Faut pas insinuer des trucs quand on sait pas en mettant un point d'interrogation à la fin pour se couvrir, vraiment.

Quels autres problèmes d'accessibilité as-tu détecté ? Si tu es sûr de ton coup :
- si tu sais quel test/critère du référentiel Accessiweb 2.1 est invalidé,
- sur quelle page
- et que le niveau Bronze, Argent ou Or - A, AA ou AAA - correspond bien à la labellisation du site, c'est-à-dire qu'un site labellisé au niveau Argent qui ne respecte pas tous les critères de niveau Or c'est normal : il n'est pas labellisé au niveau Or (niveau AAA des WCAG 2.0)
alors tu peux utiliser le canal de plainte que l'association Accessiweb met en place pour chaque site labellisé. Tu peux aussi détailler dans ce Salon si tu n'es pas sûr.
Modifié par Felipe (08 Jun 2012 - 12:20)

Ellis a écrit :
Du coup, tu aurais un exemple de BDD qui te paraisse conforme au RGAA en tous points ?

Dans les sites labellisés par Accessiweb, toutes les pages parlant de formulaire sont des exemples conformes au RGAA (parce qu'Accessiweb est soit équivalent, soit un pouième plus exigeant que le RGAA)

Ellis a écrit :
Pour le moment, je suis incapable d'en juger seule, et je dépends des retours des informaticiens maison...

Cela demande une connaissance minimale d'HTML et CSS pour beaucoup d'aspects mais certains d'entre eux sont tout de même testables par tout un chacun (ne serait-ce que les contrastes de couleur ...).
Tu peux débuter par les "Recommandation" qui débutent chaque thématique du référentiel Accessiweb, elles sont un excellent résumé je trouve. Exemple :

Thématique formulaire d'Accessiweb 2.1

a écrit :
Recommandation :

Associer pour chaque formulaire chacun de ses champs à son intitulé, grouper les champs dans des blocs d'informations de même nature, structurer les listes de choix de manière pertinente, donner à chaque bouton un intitulé explicite. Vérifier la présence d’aide à la saisie, s’assurer que le contrôle de saisie est accessible et que l’utilisateur peut contrôler les données à caractère financier, juridique ou personnelles.

Ensuite les autres PDF du RGAA (RGAA, Guide d'accompagnement, Annexe 1 ... pas Annexe 3 qui est une grille de correspondance Annexes 1 vers 2 et 2 vers 1, càd entre critères de succès et Tests) sont de bonnes lectures qui expliquent à quoi servent les thématiques, donnent des exemples de code corrects et des contre-exemples et un truc utile dans ton cas les Profils. "Intégrateur et développeur" ça cause technique (et ça va être le cas des formulaires a priori), "Graphiste et chef de projet" moins.
Modifié par Felipe (08 Jun 2012 - 12:21)

Merci pour ces conseils de lecture, mais... je crois qu'à part me permettre de réciter du RGAA ou du AccessiWeb, si ce n'est du WACAG 2.0, je ne pourrai plus tirer grand-chose de tous ces référentiels (annexes comprises).

J'ai quand même pu obtenir quelques informations techniques de la part d'un informaticien malvoyant, qui m'a expliqué ce qu'étaient cette fameuse étiquette, les name, title, id et autres label for... C'est un poil plus clair, même si je encore très loin de pouvoir inspecter et valider un code source !

Du coup, et comme je n'avais pas de réponse à ma question ici (ahem), il m'a suggéré de prendre un chemin de traverse : télécharger la version d'évaluation de ZoomText, et tester en mode empirique les formulaires sélectionnés ! Je crois qu'à mon niveau, et même avec un risque de diagnostic biaisé, c'est la seule chose que je puisse faire...

</thank you>

Ellis a écrit :
Je pensais qu'&quot;étiquette&quot; signifiait texte alternatif, qui apparaît au passage de la souris, comme pour des images... Je l'ai vu sur d'autres BDD, mais qui par ailleurs n'en comportaient pas de façon systématique, comme ici :

http://www.ctnerhi.com.fr/ctnerhi/pagint/centre_doc/base_donnees/saphir.htm
(Site sans label mais se déclarant accessible)

Au passage de la souris, c'est une infobulle (tooltip) qui affiche le texte de l'attribut title. Je parle pas de l'élément title qui est le titre de la page mais bien de ces infobulles jaunes).
- Pas de title sur les éléments img, là il y faut un alt (vide ou pas mais présent en tout cas)
- des title sur les liens seulement si nécessaire. Si c'est pour répéter ce qu'il y a déjà dans le texte du lien, non. Sauf si c'est un petit picto pas trop clair, là moi je conseille même si selon les normes d'accessibilité c'est pas autorisé ... Le title doit reprendre grosso modo l'intitulé du lien et y ajouter une ou des informations (le fait que le lien s'ouvrira malheureusement dans une nouvelle fenêtre).
- des title sur les éléments de formulaire, c'est autorisé selon WCAG 2.0 et donc RGAA et Accessiweb à la place des étiquettes textuelles associées à ces éléments (l'élément label associé à un input via le couple d'attributs for et id). Mais mieux vaut une vraie étiquette texte (label) qu'un title, c'est vraiment si le graphiste laisse pas le choix, etc

Pour tester si des étiquettes (label) sont bien associées à leur champ, c'est très simple : prendre la souris et cliquer sur chaque étiquette tour à tour. Le curseur doit alors se positionner dans le champ, magique (et pratique pour tout le monde pour des cases à cocher et boutons radio !).
Notes :
- les select (listes de choix) et textarea (champ multiligne) doivent aussi avoir une étiquette. Et aussi pour "envoyer un fichier" (type='file'), etc Pas les boutons de soumission évidemment.
- si 2 champs ont la même étiquette, alors il faut les regrouper via fieldset/legend pour bien pouvoir les différencier. Ex : adresseS de facturation et de livraison. Ou 10 questions à choix multiples avec toujours les mêmes réponses. Oui non Oui oui non euh ... de quelles questions parlaient-on déjà ?

S'il y a des champs obligatoires, les indiquer avec un * et rajouter (avant le 1er champ du formulaire) ce que signifie *. Préciser et expliquer (expliciter) tout ce qu'il faut savoir avant de remplir le formulaire (dans quelle BDD cherche-t-on, limite de temps, coût, délai, nombre de pages d'un formulaire multi-pages, que sais-je encore).
Si un formulaire est mal rempli, réafficher la page avec de préférence le mot erreur quelque part dans l'élément title de la page et avant le formulaire une indication compréhensible de la ou des erreurs commises, en plus de cette indication juste à côté du ou des champs ayant posé problème. Plein de solutions possibles et demandant modifications lourdes du CMS souvent mais "MSGERR 53" n'est pas explicite

Pour l'aide à la saisie, qui précède les erreurs de saisie (ça permet de les éviter justement ), ça euh va me prendre trop de temps à expliquer désolé. Ca peut être un exemple de format valide ("ex: 28/04/2012" pour une date) ou une explication de ce qui est valide ou pas
Modifié par Felipe (08 Jun 2012 - 12:47)

Felipe a écrit :

Accessiweb labellise des sites comme des petits pains ? Faut pas insinuer des trucs quand on sait pas en mettant un point d'interrogation à la fin pour se couvrir, vraiment.

C'était effectivement une question. Un peu gratuitement provoc, je te l'accorde, mais une question. Merci d'y avoir répondu.

a écrit :
Quels autres problèmes d'accessibilité as-tu détecté ?

http://www.correspondance-delacroix.fr/correspondances/bdd/correspondance/283/police/grande

Alors il y en a un assez énorme, le texte en blanc sur vert. Le blanc sur foncé est hautement illisible pour beaucoup de personnes soufrant de troubles cognitifs, ou de la concentration, et lorsque le texte est en gras, c'est encore pire. Si on peut améliorer un peu les choses, ce n'est pas le cas ici.
Il y a l'image et le zoom. C'est dommage parce qu'en naviguant avec tab, j'ai réalisé qu'il y avait une image aggrandie en lien (en pressant enter lorsque le focus disparait de l'écran en quelques clicks). S'il est sympathique d'avoir pensé à fournir l'image en grande taille aux aveugles, il est dommage que tous les autres ne puissent pas en profiter (oui de nouveau j'éxagère je sais).
Il y a quelques problèmes autres, mais très mineurs. Liens indiscernables (Eugène DELACROIX sous auteur), des labels séparés de leur valeur par un span (là c'est de l'ultra-mineur). Hormis le premier point c'est suffisamment mineur pour que le site soit «accessible»
Si le premier point est en accord avec accessiweb (il l'est, mais j'ai toujours de la peine à le croire), cela rend la norme assez peu intéressante.
L'inversion de couleur se fait régulièrement chez des mal-voyants, avec une augmentation des contrastes. Mais au nyveau du système. Ce qui fait que sur ce genre de site, l'effet s'inverse et c'est toujours un grand plaisir de se faire exploser les yeux.

Ahh mille mercis pour cette mini-synthèse limpide !

Le truc du clic sur l'intitulé pour vérifier si le curseur se place dans le champ, ça va beaucoup me servir.

Et euh en ce qui concerne votre débat sur le site que j'ai fourni, d'après Colour Contrast Analyser, tous les couples de couleurs (sauf un en page d'accueil) passent effectivement le test des WCAG 2.0 niveau AA...

Oui en effet désolé de venir pourrir ce topic avec un débat un peu HS, car c'est en effet un débat de fond, qui est pour ma part une remise en cause des normes telles que WCAG.

Mais c'est en effet en respect avec ces normes.

Hem, désolée, c'est encore moi...

J'ai une question concernant précisément la technique du clic sur l'intitulé : ça ne marche pas quand il y a plusieurs champs de réponse, comme ici :

http://www.lasalle-beauvais.fr/-Contact-Admission-

(A la rubrique Date de naissance).

C'est "normal" et en accord avec le RGAA ?