1174 sujets

Accessibilité du Web

Bonjour,

Après mes mésaventure avec la barre d’outils WAT, je me suis mis à rechercher d’autres outils sans vraiment trouver. Et c’est par hasard en lisant des articles sur le web et la couleur, que j’ai put prendre connaissance de deux outils : l’un est ligne, mais fonctionne correctement hors-ligne avec la page enregistré au format MHT, et l’autre est un ensemble de trois applications qui s’installent et ne nécessite pas d’accès au web (des outils de Fujitsu).

------------------------------------------------------------

Le premier outil, concerne la création de contrastes de couleurs acceptable : Color Constrast Checker.

Ce que j’ai apprécié, c’est la possibilité de faire varier à la fois la couleur de fond et la couleur de texte dans le même temps que ce recalcule automatiquement la conformité AA, AAA, etc.

upload/4742-color-const.png

------------------------------------------------------------

Les trois outils de Fujitsu, sont disponibles depuis une page qui porte un nom bien alléchant : Fujotsu Accessibility Assistance.

Je l’ai découvert en même temps que j’ai découvert la précédente page pour générer des contraste de couleur en les testant (il s’agissait de Color Selector)
, puis intéressé par le propos affiché des deux autres applications, je les ai testé également.

Aucun soucis à l’installation, ça ne sème pas n’importe quoi n’importe où, il n’installe rien d’autre en dehors de son répertoire. Par contre, faites bien attention à choisir un répertoire et ne pas laisser celui par défaut (il semble qu’il y ait un bug à ce niveau là, on des caractères Japonais dans le chemin par défaut).

------------------------------------------------------------

Le premier est Color Selector, sur lequel je ne m’exposerai pas plus, il est très similaire au précédent outil en ligne.

upload/4742-fujitsu-cs.png

------------------------------------------------------------

Le second est Color Doctor

Comme son nom le laisse deviner, il agit quand le mal est fait Smiley lol , c’est à dire qu’il permet de voir une image d’une page web *ou même de tout autre chose* du point de vue d’une personne ayant une des difficulté de perception de la couleur parmi les plus connus.

La copie d’écran avant les explications (car elles y font référence)

upload/4742-fujitsu-col.png

Explications : dans la moitié de droite, la page d’un site web, dont vous fournissez l’URL dans la barre du haut. Dans la liste déroulante de la barre du haut, se trouve une liste de choix des différentes perceptions des couleurs supportés. Un clique sur un bouton et vous obtenez dans le panneau de droite, une image de ce que verrais une personne concerné par la perception des couleurs choisi dans la précédente liste.

Remarque : il serait possible de se dire à l’usage, «ce n’est pas commode d’avoir à toujours cliquer sur le bouton pour générer une image chaque fois que l’on passe à une autre page ou défile une page». Eh bien c’est là que cet outil est génial : il permet de calculer l’image en temps réel. Par contre, je préfère souligner que le répondant n’est pas aussi fluide dans ce cas... ça rame légèrement, mais modérément.

Le premier plus : non seulement cette outil fonctionne sans dépendre d’un site internet, ce qui le rend plus maniable, plus fluide, et lui permet de tester un site web local, et même un page HTML simplement enregistré ou écrite sur votre ordinateur.

Le second plus : il permet même de tester n’importe quoi d’autres : images, application de bureau (pour les développeurs de logiciel qui s’intéressait aussi à l’accessibilité concernant les couleurs). Pour cela, une case à cocher dans la barre du haut vous permet d’indiquer que le panneau de gauche doit être transparent, et afficher ce qui se trouve en dessous de lui au lieu d’afficher une page web. Il vous suffit alors de le promener comme cela se ferait avec une loupe d’écran ou certaine pipette de couleur.

Remarque : dans le répertoire de cet outils, se trouve un programme nommé “uninstall.exe”. En fait, comme je le disais, ces utilitaires n’installant rien en dehors de leur répertoire, il ne s’agit pas d’un véritable dés-installateur (qui n’est pas nécessaire), mais d’un petit programme qui permet de nettoyer de la base de registre, les quelques clés de registre utilisées par cet outil.

------------------------------------------------------------

Le troisième est Web Accessibility Inspector : Waw Great ! Smiley biggrin J’ai été content de le trouver celui là Smiley biggrin

Bien qu’affichant ses résultats dans une page web, il fonctionne indépendamment de tout site web également, en créant les rapport dans le répertoire des fichiers temporaire.

Ce rapport contient des liens, qui renvoie vers une copie de la page testé à laquelle ont été ajouté des marqueurs pour rendre les erreurs visibles. À l’exception de quelques erreurs script dans lorsque que je clique sur ces liens qui s’ouvre dans Internet Explorer, tout fonctionnement parfaitement.

Remarque : cet outil permet de tester pour Web Content Accessibility Guidelines 1.0, donc pas de version 2.0, ou alternativement pour des règles d’accessibilité conçu par Fujitsu (il existe en effet beaucoup de référentiels différents au sujet de l’accessibilité, et tous ces référentiels mériteraient probablement un article tout entier pour les comparer).

upload/4742-fujitsu-web.png

------------------------------------------------------------

Après avoir lu ceci, vous n’avez pas d’excuses pour ne pas tester l’accessibilité, et au moins essayer de l’améliorer à défaut d’avoir un 20/20 dans ce domaine.
Modifié par hibou57 (03 Jul 2010 - 22:34)
Raphael a écrit :
Salut,

Merci pour ce sujet et ces ressources. Certaines sont déjà dans notre liste et il va falloir que je la mette à jour Smiley smile

Je te recommande le Web Accessibility Inspector, c’est une perle, même s’il ne peut pas remplacer d’autres outils comme MonOPQuast [*] (qui ce dernier, ne peut pas remplacer le premier non-plus au passage).

En explorant un peu l’outil, j’ai remarqué que l’on peut lancer le texte pour le contenu d’un répertoire et ses sous-répertoire. C’est commode, et surtout c’est rassurant : en effet, valider une page, c’est bien, mais rien ne dit que des erreurs ne se sont pas glisser dans d’autres pages. Là, c’est affaire régler.

La manière d’indiquer les éléments fautifs également est astucieuse : une bordure clignotante. Bien pratique quand le style d’une page fait qu’un simple cadre ne rend pas la distinction évidente, comme quand la page fait elle même usage de bordures similaires.

Et bien évidement, les liens vers les recommandation pour expliquer chaque erreur, car la doc est installée en local.

En passant un site dans cette moulinette, j’ai trouvé plusieurs erreurs que je n’avais corrigé ou pas assez bien remarqué (comme j’édite en XML, j’ai rarement les mains dans le HTML, ce qui fait d’autant moins d’occasion de découvrir ce type d’erreur naturellement)



[*] La limitation par rapport à un outil comme MonOPQuast, c’est que Web Accessibility Inspector ne réalise que l’équivalent des testes automatiques et ne permet pas de gérer les testes manuels. Par contre, il permet tout de même quelque chose qui s’apparente au testes semi-automatique, qui prenne la forme de warnings. L’outil indique alors bien qu’il y a suspicion et qu’un contrôle humain est nécessaire.
Modifié par hibou57 (02 Jul 2010 - 11:17)
À propos du Web Accessibility Inspector, un détail que j’expose pour épargner au gens qui rencontrerait le problème d’avoir l’impression de ne rien comprendre.

J’avais dans un formulaire, un INPUT et un LABEL, avec sur le INPUT un attribut ID repris dans l’attribut FOR du LABEL.

Mais je recevais étrangement des messages m’indiquant que je n’avais pas donné de ID au INPUT, et que je devrais le faire, afin de pouvoir associé un LABEL à ce INPUT... chose qui j’avais justement faite.

Alors pourquoi Web Accessibility Inspector ne voyait pas l’ID du INPUT ?

Simplement parce que l’attribut ID était précédé d’un attribut CHECKED, qui dans le source HTML, n’avait pas de valeur (en effet, en HTML, il n’est pas nécessaire de donner une valeur à un attribut booléen).

La présence d’un attribut sans valeur semble empêcher l’outil de lire correctement les attributs suivant.

Mon problème : le processeur XSLT, produit un HTML tellement conforme, qu’il me supprimait la valeur de l’attribut même si la feuille en indiquait un (CHECKED="checked" par exemple qui devenait simplement CHECKED en sortie).

Alors comment résoudre le cas malgré tout et sans donner de valeur à l’attribut : en plaçant simplement l’attribut ID avant l’attribut CHECKED.

Si les sources HTML que vous devez contrôler contiennent des attributs non-assignés à une valeur, assurez vous de toujours les placer en dernier, après les autres, pour ne pas empêcher leur lecture.

Je pense que cette outil à été plus conçus pour XHTML que pour HTML... (mais il fonctionne bien avec HTML tout de même)
Modifié par hibou57 (03 Jul 2010 - 22:37)
Deux autres choses à savoir, toujours au sujet de la même application.

Si vous utilisez consciencieusement les éléments HTML pour leur sémantique, vous allez surpris de constater que l’outil génère toujours un avertissement quand une page contient des élément Q ou CITE. Il est expliqué que trop de gens utilisant ces éléments à des fins de présentation, un avertissement est généré. Pour ne pas avoir vos résultats de contrôle « pollués » par ces avertissements, il existe un moyen. Plutôt que d’utiliser le bouton radio qui permet de choisir entre les trois niveaux WCAG, utiliser le bouton “Custom”, initialiser la liste avec l’un des boutons pour l’un des trois niveaux WCAG, puis décocher toutes les cases se trouvant sous 3.3 et 3.7 ; ces avertissements ne se produiront plus.

Attention tout de même à vous assurez que vous utilisez bien ces éléments pour ce qu’il sont avant de faire ainsi ! (c’est important de le rappeler, parce que pas tout le monde n’a la même approche de la création d’une page)

Ensuite, le deuxième point. Si vous utilisez pour créer vos couleur, la première application en ligne indiquée dans le premier message, c’est à dire Accessibility Color Constrast Checker, alors il se peut que même en créant des contrates de couleur texte/fond en ayant “YES” dans les trois cases WCAG, il se peut que vous trouviez encore des erreurs de contrastes avec Web Accessibility Inspector ; précisément des erreurs concernant les personnes avec une protanopie

Alors je ne sais pas si ce sont les WCAG qui ne sont pas conçus pour cette forme de vision des couleurs ou si c’est cette application en ligne qui a omit ce teste. Si des gens en savent plus sur ce point, ne soyez pas timides et parlez-en.

Remarque : je parle bien de l’outil de constraste de couleur en ligne, pas l’équivalent de Fujitsu (qui est moins fluide, raison pour laquelle je ne l’ai pas utilisé)

-- EDIT -- Les couleurs qui ne convenaient pas on été facile à corriger, il a suffit de faire varier un peu leur luminosité, d’environ 3 à 4%. C’est peut-être alors seulement une différence de manière de calculer en les deux.
Modifié par hibou57 (04 Jul 2010 - 04:29)
Bonjour,

J'ai une question à propos des outils l'accessibilité.

En effet, lorsque je veux valider le structure de mon site j'ai quelques outils type Xenu pour voir si tout va bien et si il n'y a pas de problème de 404 mais pas pour l'accessibilité.

J'aimerais un logiciel qui scan tout le site et me dit au moins quelques pages ne sont pas valides, quit a allé voir a la main ce qui ne va pas grâce à html validator, par exemple.


J'ai trouvé http://www.powermapper.com/products/sortsite/index.htm.

Avez-vous connaissance de ce genre d'outil ?


Merci d'avance Smiley smile