Le blog de Philippe Poisse

Plantons le décor

Samedi j’ai participé à une réunion des membres de la communauté OpenStreetMap de Perpignan. Lors des discussions les arrêts de bus ont été évoqués. L’APF66 et son service accessibilité ont donc aussi été évoqués.

Deux remarques m’ont surpris :

• l’APF66 travaillerait avec Wheelmap.org ;
• la page sur l’accessibilité des arrêts de bus aurait disparu.

Vu l’origine de la première affirmation, je n’y crois pas trop. Par contre je suis allé vérifier la deuxième affirmation.
Et là, stupeur ! la page empire.

Le handicap expliqué aux ordinateurs

Une bonne vieille rengaine qui revient lorsqu’on ne veut rien faire, et par là justifier son incompétence, et de dire « tu comprends, les problématiques sont différentes d ’un handicap à l’autre ».
Partant de là, il est impossible de mettre en place un système satisfaisant tout le monde. La méthode est très efficace pour s’affranchir des normes techniques et du cadre législatif et réglementaire.
Cette méthode est très bien rodée chez les bénévoles de nombreuses associations. À tel point que je me demande pourquoi les élus ne l’utilisent pas.
Peut-être parce que ces mêmes bénévoles demandent aux élus de faire appliquer la loi.
Double discours ?
Non, simple recours à la facilité. Ce sont les autres qui doivent faire des efforts.
Depuis 6 ans je bosse dans le milieu associatif. Pas mal de SSII ont refusé de collaborer avec moi au motif que dans ce milieu les termes « professionnalisme » et « rigueur » ne font pas partir du vocabulaire. Il faut bien reconnaître qu’au service accessibilité de l’APF66 certains sont de très bons exemples de cette absence.

Malheureusement en informatique le professionnalisme est de rigueur. Un ordinateur ne pense pas, il se contente d’agir suivant la façon dont il a été programmé. Il est toujours possible de développer des systèmes de gestion ou de correction d’erreur, mais les erreurs étant majoritairement liées à l’utilisation des outils par « l’interface chaise-clavier », on comprend vite que le plus grand nombre d’erreur doit être anticipé. Le rôle du développeur, et notamment du développeur Web, et de faire en sorte que le moins possible d’erreur puisse être faites par l’utilisateur.
Hors l’informatique donne l’impression d’abolir la frontière entre professionnel et amateur (faite un tour dans les clubs photos où les adhérents sont souvent aussi bien équipés en logiciels que les photographes professionnels).
Mais un site Web doit fonctionner. La question ne se pose pas. Vous achèteriez un frigo qui ne marche pas ? L’internaute, qui doit recevoir le message véhiculer par le site Web, ne se soucie pas de savoir si le gestionnaire du site est un professionnel ou un amateur, s’il est salarié ou bénévole. L’internaute veut que le site marche.
Un point c’est tout !
Là où les personnes qui gèrent le site, qu’il soit celui d’une association ou d’une entreprise, doivent se mettre, au minimum, dans la position d’un intégrateur HTML.
Évidemment cela passe par un minimum de formation, un compréhension des problématiques liées au handicap et une connaissance des fondamentaux d’Internet (et par extension du Web et de l’informatique).
Il n’est donc pas possible de s’en sortir sans « travail » et sans « effort ».
À en croire Kant, sans effort, pas de Liberté.
Certains préfèrent-ils l’esclavage !?

Analyse points par points

Insulter à tout va peut faire un bien fou. Mais rien ne vaut un discours argumenté. L’analyse de la page sera donc détaillée, technique et les solutions à mettre en œuvre seront évoquées.

Référencement

titre de page et description

Constat :

La balise « title » est très importante pour deux raisons.
D’abord elle donne une information utile aux utilisateurs de synthèse vocale sur le contenu de la page.
Ensuite elle permet d’améliorer le référencement. La documentation de Google à ce sujet est assez claire. De plus en l’absence d’autres informations Google utilise le contenu de cette balise pour générer les extraits affichés dans les pages de résultats (les snippets). Dans le cas présent le titre (qui apparaît en haut de la fenêtre du navigateur) est « Accès Bus Aglo ».
Je passe sur la faute d’orthographe, tout le monde n’a pas de dictionnaire, de traitement de texte avec correcteur d’orthographe ou la présence d’esprit de se faire relire. De plus même cumulée ces trois méthodes n’assurent pas le zéro faute.
Attardons-nous plutôt sur deux points : la relation entre le texte du lien dans la barre de navigation et le titre ; le contenu sémantique du titre.

Le titre est un simple décalque du texte du lien (accès bus CTPM). Il faut être clair, aucun effort d’imagination n’a été fait. Ce titre n’apporte donc aucune information complémentaire ni au moteur de recherche (qui représentent 80 % du trafic du site en 2011-2012) ni aux internautes (pour qui le site a été réalisé).
De ce point de vue il est donc inutile.
L’analyse sémantique est assez intéressante car elle montre un problème assez basique et rapidement rencontrer lorsqu’on forme des gens sur le HTML : l’individu lambda ne sait pas définir ce qu’est un titre. D’ailleurs il ne sait pas non plus définir ce qu’est la sémantique. Donc quel est le sens de ce titre ? Aucun !
Sorti des bénévoles du service accessibilité peu de gens peuvent comprendre une telle suite de mots. De plus « accès » est un mot ambigu, un accès peut ne pas être accessible. Aglo, qui n’a pas de sens par lui même, n’apporte aucune information si ce n’est le fait que le rédacteur ne connaît même pas le nom des partenaires de son association, le communication officielle de « l’agglo » utilisant l’acronyme PMCA.

La balise « meta » servant à la description de la page est aussi importante pour les mêmes raisons.
Le texte est donc : Informations sur l’accessiblité des bus pour personnes se déplaçant en fauteuil roulant.
Quel est le mot le plus important de la phrase (bien que grammaticalement on ne puisse pas parler de phrase) ? Accessibilité !
Où est la faute d’orthographe ? Accessibilité !
Mais le problème n’est pas là.
Ce texte est un simple copier-coller de l’attribut « title » du lien qui permet d’accéder à la page. La présence de la même faute d’orthographe en est la confirmation. Cette description n’apporte donc aucune information complémentaire. De plus il ne s’agit même pas d’une phrase. Une phrase c’est le bon vieux triptyque sujet-verbe-complément. Je vous mets au défi de trouver un sujet. Là on est niveau école primaire.
À la rigueur, pour un titre ça pourrait faire l’affaire.
En passant, il ne faut pas trop oublier que les moteurs de recherche n’apprécient pas trop les copier-coller. Ils aiment l’originalité et la nouveauté.

Causes :

Le CMS qui permet de gérer le site impose que chaque page dispose d’un titre et d’une description. Les bénévoles, bêtement, remplissent donc les champs du formulaire sans se poser la question de leurs utilités.
L’absence de sens de la démarche abouti donc à un résultat médiocre. Que ce soit au niveau du référencement ou au niveau des informations communiquées aux utilisateurs de synthèse vocale.
Vouloir faire un site Web sans apprendre les bases du HTML finit forcément par faire apparaître ce genre d’erreur.
De plus les qualités rédactionnelles du service accessibilité sont assez faibles. En deux ans et demi je n’ai jamais eu de discussion à caractère littéraire avec qui que se soit.
Curieux ?

Solutions :

La meilleure solution serait d’avoir un rédacteur Web aveugle. Mais il ne faut pas trop rêver. Se poser la question « pourquoi je fais ça » avant d’agir serait aussi une bonne solution, mais là aussi il ne faut pas trop rêver.
Seule la connaissance de quelques règles simples de communication, certes appliquées au Web, peut résoudre ce type de problème.
Un titre doit pouvoir être compréhensible par lui-même : « accès bus aglo » n’a aucun sens ; accessibilité des transports en commun (sur le territoire de Perpignan Méditerranée Communauté d’Agglomération) a un sens facilement compréhensible par tout un chacun.
Pour la description, une « vraie » phrase serait de bon aloi.

Rédaction et qualité du code HTML

Le HTML dérive du SGML, qui dérive du GML, qui date des années 60. Ce qui est bien avec les nouvelles technologies c’est que, ramenées à l’échelle d’une vie humaine, elle sont souvent anciennes. Quarante-cinq ans pour le GML c’est très jeune, ou pas !
Bref les règles de rédactions Web ne sont pas si récentes que ça. Et de toute façon elle découle des règles de rédaction classiques. Celles qu’on apprend à l’école : faire un plan, utiliser des titres, etc.
Voilà pour l’introduction.

Au service accessibilité on est très augustinien, on pratique même une forme moderne de jansénisme. En gros on considère que seuls les personnes en fauteuil roulant auront accès à la Grâce. Les autres rentrent dans la catégorie « vaffan… » comme dirait Beppe Grillo.
Cela se caractérise par l’incapacité à penser comment communiquer les informations autrement que visuellement. Le code HTML est donc de très mauvaise qualité.
Le document contient 32 erreurs d’après le validateur W3C. La présence du BOM (le seul warning de la page) est dû à une modification du fichier gabarit sous Windows lors du rajout du lien vers la page sur les bus.
Le BOM prouve bien qu’on est jamais à l’abri d’un neuneu (parce que les gens qui pensent qu’on peut travailler proprement avec des outils Micro$oft vous les appelez comment vous?).
Heureusement que les fichiers techniques n’ont pas été modifiés de cette manière car sinon une bonne partie du site tomberait en carafe, parce Apache il n’aime pas le BOM, mais alors pas du tout.
Les erreurs viennent d’un copier-coller depuis un autre site, qui contenait la page originale. Je passe sur les détails, j’aurai trop de gens à critiquer. Le site de l’APF66 est écrit en XHTML1.0 avec un doctype « strict ». Le copier-coller vient d’un site écrit en HTML 4 avec un doctype « transitional ». Forcément quand on passe de l’un à l’autre sans rien réécrire ça fait un choc.
Il faut savoir que XHTML 1 est une recommandation W3C depuis 2000. Treize ans ça serait bien que tout le monde se mette à jour. Surtout qu’au vu de l’arrivé de Mozilla et de Canonical sur les marché des smartphone HTML5 va vite progresser.
En tout, heureusement que les navigateurs sont permissifs, parce que s’ils géraient le HTML à la manière du XML bon nombre de sites ne s’afficheraient tout simplement pas.
Les erreurs concernent surtout des balises de mise en forme, des trucs du genre « center » ; « font » ; etc. Donc on est face à des gens qui ne maîtrisent pas le concept de séparation entre le contenu et le contenant (la fond et la forme). Cette dichotomie est pourtant facile à appréhender dans le Web (elle est plus dure dans d’autre domaine) car il suffit de se dire que le contenu c’est le code HTML et que le contenant c’est le code CSS.
Quoi !? Vous ne connaissez pas le CSS ?!
Vous n’avez jamais entendu parler des feuilles de styles ! Ni dans Quark Xpress, ni dans Word, ni dans n’importe quel logiciel gérant du texte (et la liste est longue) !
Vous faites vos mises en page dans Excel ?
Quand on pense qu’en fac de science les étudiants sont obligés de travailler avec LaTex pour réaliser des documents et que cet outil utilise aussi des feuilles de styles. À Montpellier (dixit une amie qui y a fait son doctorant en biologie végétale) LaTex était déjà utilisé il y a vingt-cinq ans.
C’est vous dire si le concept est moderne.

Le reste du document est un peu sauvé parce qu’il a été mis en ligne grâce à CKEditor. Quand je fais un CMS sur mesure je n’utilise que le meilleur (jamais de viande roumaine). J’ai des principes.
Mais il faut reconnaître qu’aussi performant que soit cet éditeur opensource, il ne peut pas tout.
Le document ne contient donc aucun titre.
Et le « ACCESSIBILITE DES LIGNES DE BUS » me direz-vous.
Ce n’est pas un titre. Pas de bol.
C’est juste un paragraphe avec un texte écrit en capitale, même pas accentuées.
Pour une synthèse vocale c’est du texte banal, qui sera mal prononcé du fait de l’absence d’accent aigu à accessibilité.
Dire qu’il existe 6 balises pour les niveaux de titre en HTML (de h1 à h6). Ce texte devrait être dans une balise h1 (titre de premier niveau).
Le document devrait aussi disposer de balises h2, histoire de la structurer un peu. Au minimum le mot « information » devrait être dans une h2.
Remarquez, il y a bien des balises h3, mais en toute fin de document, sans que cela ait de sens (ni d’un point de vue sémantique ni d’un point de vue logique humaine).
On sent que la page est structurée pour des gens n’ayant aucun problème visuel. Une synthèse vocale ne pourra donner aucune information sémantique à l’utilisateur qui devra structurer lui-même le document. Ce qui est assez difficile.
Je ne parle pas des moteurs de recherche, qui analysent exactement de la même manière.

Un petit truc à ne jamais faire : une ancre avec un lien « mailto ».
Et après les gens se plaignent de recevoir du spam. Un robot repère déjà facilement les emails dans un texte, si en plus on lui donne de l’aide, où va-t-on ?
Par contre si vous regardez bien l’adresse email en question vous remarquerez qu’elle est fausse. Comparez la avec celle écrite dans le pied de page. Et oui, il y a un point entre dd et 66.
S’est bénévole depuis des décennies et ça n’est pas capable de retenir une adresse.
Le numéro de téléphone est correct par contre. Entre les chiffres et les lettres il fallait choisir.
Ce qui est amusant dans cette fin de page c’est qu’elle n’apporte rien. Elle reprend juste ce qui est écrit dans le pied de page. Là encore il s’agit d’un vulgaire copier-coller sans réfléchir.

Causes :

La plupart des gens pensent que c’est l’ordinateur qui travaille, pas l’opérateur. Partant de là on se repose sur le logiciel, qui ne ferait pas plus que ce qu’on lui demande.
Si l’opérateur n’a pas saisi de niveau de titre une synthèse vocale ne pourra pas restituer la structure sémantique du texte.
Il y a deux causes à ce problème : l’habitude de communiquer exclusivement de manière visuelle ; l’absence de connaissance du HTML et du CSS.

Solutions :

Une des jeunes qui participe au groupe animation m’a un jour dit « les valides sont plus cons que les handicapés ». Je ne peux lui donner tort.
Le code est pensé pour être interprété par des personnes n’ayant aucune déficience visuelle. Partant de là il ne peut être accessible.
Le problème serait le même si on construisait un immeuble en se disant que tous les utilisateurs sont valides. Les personnes en fauteuil roulant ne pourraient pas rentrer.
La solution est en deux temps : penser que l’utilisateur peut-être en situation de handicap ; connaître les bases du HTML et du CSS.
En 2011 j’ai amené un petit livre jaune, qui traîne toujours dans l’armoire du bureau du service accessibilité (HTML et CSS pour les Nuls). Sa lecture s’impose.

Images

Début février quelqu’un m’a dit que le problème en informatique c’est l’incapacité des gens à transposer leurs connaissances d’un univers à l’autre. Sans ordinateur ils savent faire, avec ils ne comprennent plus rien.
Un exemple bête : les formulaires. Vous donnez un formulaire papier, tout le monde arrive à le remplir. Le même sous forme numérique et c’est une catastrophe.
Pour les images, c’est pire.

Il y a quinze ans encore, avant l’arrivée des appareils photo numériques, les gens respectaient un tant soit peu les images, et les règles afférentes. Mais depuis le boom du numérique les règles de bases issues de la Renaissance passe à la trappe.
Se rajoute à ça un manque de connaissance sur le fonctionnement des navigateurs Web et des serveurs.

La page contient trois images, au format jpg. Les trois présentent les mêmes problèmes.
D’abord elles sont redimensionnées par le navigateur. C’est à dire que la taille du fichier ne correspond pas à la taille d’affichage. Erreur classique me direz-vous. Et je vous répondrez : bin ouais !
Un navigateur n’est pas un logiciel de traitement d’image, le fait de redimensionner à la volée des images n’offre pas la garantie d’un résultat de qualité (surtout avec une vieille version d’Internet Explorer). De plus la charge mémoire peut vite grimper, ce qui est une vrai gêne pour les internautes ayant un ordinateur ancien ou un terminal mobile peu puissant.
Sur cette page d’Action contre la Faim je suis monté à 600 Mo de charge mémoire pour Firefox, c’est pour dire. Vous noterez la présence d’un membre de Perpinux (on est partout) dans le diaporama.
Dans le cas présent les images sont « réduites » ce qui signifie que le fichier d’origine aurait pu être réduit. Ainsi le temps de téléchargement de la page aurait aussi était réduit. Quand on fait un site Web il faut bien se dire que tout le monde n’a pas une connexion à haut débit. Bien sûr, on peut faire des pages « lourdes » en se disant que ceux qui n’ont ni la fibre optique ni l’ADSL appartiennent à la catégorie « vaffan… ».
Pour la société inclusive on repassera.
Une deuxième erreur est l’absence de titre et de texte alternatif. Outre que c’est fort utile pour le référencement c’est aussi utile pour les gens qui naviguent en mode texte (ou avec une synthèse vocale) ou lorsque les images, pour une raison ou une autre, ne s’affichent pas.
Là encore on tape dans l’incapacité à rédiger des bénévoles.
La troisième erreur est sûrement la plus belle. Les images sont « anamorphosées ».
Si avec de la créativité et du travail il est possible de faire de superbes anamorphoses, sur cette page il n’y a ni créativité ni travail.
Comme je le disais, il y a quinze ans aucun photographe ou dessinateur n’aurait modifié une image sans respecter ses proportions. L’informatique permet de s’affranchir du respect des proportions, de la perspectives, et du bon goût. Dans les années 50 un élève en CAP photo qui aurait fait un tel travail aurait pris une baffe en pleine poire et n’aurait jamais recommencé.
Le plus intéressant est qu’il est impossible de faire une anamorphose par erreur en HTML, les dimensions d’affichage devant être saisies manuellement. Les trois anamorphoses sont donc volontaires.
Vu le résultat on peut dire que les bénévoles se sont attaqués à l’art et au bon goût, mais au sens militaire du terme « attaquer ». Vous pouvez voir deux exemples d’anamorphoses, le premier plutôt réussi, le deuxième franchement raté.
Anamorphose sur un site de design : http://design-graphique.blogspot.fr/2012/02/anamorphoses.html
La page d’accueil du site de l’association Nataph : http://nataph.pagesperso-orange.fr/

Causes :

La méconnaissance de quelques règles simples, comme la gestion des fichiers par les navigateurs, et le fait de croire que l’informatique affranchit des règles classiques sont ici aussi source d’erreur.

Solutions :

Il n’est pas nécessaire d’avoir fait les beaux-arts pour savoir qu’une image a quelques propriétés qui doivent être respectées. On ne doit pas redimensionner n’importe comment, il faut recadrer intelligemment. Pendant des décennies les chaînes de télévision ont diffusé des films au format cinémascope (16:9) sur des écrans cathodiques (4:3). Elles ne redimensionnaient pas, elles recadraient. Ce qui explique la présence de bandes noires en haut et en bas de l’écran.
Une bonne compréhension de l’ergonomie d’une site Web pousse aussi à l’optimisation des fichiers.
Mais cette optimisation passe par la maîtrise d’un logiciel de retouche d’image. Et d’un peu de travail.
Là encore un peu plus effort et de connaissance aurait évité ces erreurs.

Un fois les choses simples abordées on peut passer aux problèmes « sérieux » qui concernent l’accessible de façon plus précise.

Loi de Fitts

En 1954 le psychologue américain Paul Fitts publiait un article sur l’analyse du mouvement. Cet article a donné son nom à une loi qui décrit l’action de pointer et qui est la base de l’ergonomie dans l’industrie du logiciel. Cette loi exprime une compensation vitesse distance. En version raccourci : plus c’est gros et proche, plus c’est facile à utiliser.
Ça c’est pour la théorie.
Passons à la pratique.
Comme la page ne donne aucune information sur les règles concernant l’accessibilité des arrêts de bus (reconnaissant que le cadre réglementaire n’intéresse personne et que les normes de construction ne servent à rien) on peut penser que son seul intérêt est de permettre de télécharger la liste des arrêts de bus.
Au printemps 2012, face à la bêtise de certains bénévoles, j’ai refusé de m’en occuper. Au vu du désastre, j’ai eu tort.

La liste est contenue dans un tableau. Hors ce tableau n’a ni titre ni structure sémantique. Il est balancé directement, sans aucune explication. On espère juste que l’internaute aura envie de cliquer. On ne cherche pas à lui donner envie de cliquer.
À une époque un gugusse beugler « qu’on me donne l’envie », là c’est pas le cas.
Je passe sur les problèmes liés au handicap visuel (« beurk » diront certains), j’y reviendrais plus tard.
Chaque lien est dans une cellule. Les cellules sont, curieusement, beaucoup plus grandes que la zone cliquable. Zone qui correspond à l’espace occupé par le texte.
En terme d’occupation de l’espace ce n’est pas terrible.
Une simple application de la loi de Fitts pousse à se dire que la zone cliquable devrait occuper toute la cellule. Au lieu de cela la zone cliquable est très petite, elle ne couvre que trois caractères.
Si l’internaute à de bons yeux et un pointeur précis, pas de soucis. Dans le cas contraire les problèmes apparaîtront vite.
Là encore, mieux vaut ne pas être handicapé.

Comme je suis un gars prévoyant j’ai mis en place sur le site un outil d’analyse des clics, clickheat. La capture d’écran pour janvier 2013 est assez significative. Les clics se font surtout en limite des cellules. Les internautes cliquent rarement au milieu des liens.

Un dernier point à noter, aucun lien ne dispose d’un titre. Partant de là il n’y a pas d’infobulle ni d’information pour les synthèses vocales. En terme d’accessibilité et de référencement c’est plus que médiocre.

Causes :

Je vais me répéter, mais là aussi le problème est une mauvaise connaissance du comportement des internautes et des règles d’accessibilité et d’ergonomie. En plus de l’ignorance de l’existence du CSS.
Le code HTML du tableau est plus que médiocre. Il est surchargé par des balises inutiles et celles qui sont utiles sont absentes.
Penser que l’internaute clique toujours au bon endroit est une erreur fréquente, même chez des développeurs. C’est de cette manière que le taux de clics diminue et que les informations ne sont pas diffusées.
L’absence de titre s’explique par l’ignorance de l’existence de l’attribut « title ».

Solutions :

Cas 1 : on garde le tableau.
Par contre celui-ci doit avoir un titre générique (une légende) via une balise « caption ». La zone cliquable de chaque lien doit occuper l’intégralité de la cellule qui contient le lien. Cela est facilement réalisable avec 3 lignes de CSS (display, width et height). De plus les textes des liens doivent avoir un sens, « L1 » doit devenir « Ligne 1 », etc. Ainsi la zone de clic augmente même sans CSS et le contenu du tableau est plus facilement compréhensible.
Cas 2 : on supprime le tableau.
Quand on fait du webdesign on apprend vite une maxime simple : pas de tableau ! Des cadres !
La barre de navigation du site est composée de deux listes à puces toutes bêtes (des « ul »). Avec un peu de CSS on arrive à leur donner une toute autre allure.
Lorsque l’on veut faire une liste de liens le plus simple est encore d’utiliser une liste. Il n’y a plus qu’à la mettre en forme avec du CSS. Ce qui offre de grandes possibilités. À condition de travailler bien sûr.
Le tableau actuel contient 17 liens. Hors la CTPM a 30 lignes. Vue la taille du tableau 30 liens ne rentre pas. L’aspect visuel devra donc être retravaillé. L’utilisation de CSS permet de gagner pas mal de temps et de limiter les efforts. On va à l’efficience.
De plus utiliser les pictogrammes de la CTPM aurait permis de rendre la liste plus esthétique, sans toucher à son ergonomie et à son accessibilité. Là encore aller feuilleter le petit livre jaune dans l’armoire serait une bonne idée.

Couleur : physiologie, écran et vocabulaire

En dessous du tableau, et non pas au dessus comme le voudrait la logique de lecture occidentale (en Z) se trouve un texte qui explique où cliquer pour lire les évaluations des arrêts de bus. Le texte est agrémenté d’un « sans s’abimer les yeux » qui est une insulte à mon adresse, à celle des personnes ayant un problème quelconque de vision des couleurs et à celle qui défende la langue phrase (un accent à s’abîmer aurait été bien venu) , entre autres personnes.
Premier point, bien que très accessoire : dans une page Web le soulignement est réservé au lien hypertexte. Mais là aussi, à l’APF66, les règles, les normes, les usages, on s’en affranchi.

Attaquons le « kaki ».

Physiologie

Sur ce point je serait bref. Il n’y a pas grand chose à dire. En physiologie humaine il n’existe pas de valeur absolue, il n’y a que des moyennes. Personne ne voit les couleurs exactement de la même manière. Les couleurs sont aussi interprétées par le cerveau en fonction des contextes. Faites le test vous-même. Une ombre est noire, car le noir est dû à l’absence de lumière. Si la lumière n’est pas blanche (rouge par exemple) l’ombre ne sera pas noire mais de la couleur complémentaire à celle de la lumière (cyan dans l’exemple).

Écran

Selon le réglage de l’écran, sa luminosité, l’éclairage de la pièce, etc., les couleurs affichées ne sont pas exactement les mêmes. D’ailleurs d’un modèle à un autre et d’une marque à une autre les couleurs ne seront pas les mêmes. Il suffit de faire un tour dans un magasin pour s’en rendre compte. Les professionnels calibrent leurs écrans et il existe une norme iso pour l’imprimerie.

Vocabulaire

Tout le monde n’a pas une culture graphique et encore moins une culture de la couleur. Donc quand on choisit un jeu de couleur on fait attention à éviter toute forme d’ambiguïté.
Le kaki n’est pas à proprement parler une couleur, c’est plutôt une gamme. C’est aussi une couleur que peu de gens connaissent réellement, du simple fait qu’elle n’est pas très présente dans le quotidien.

Il est où le problème alors ?

D’abord il y en a deux.
Que contient le tableau ? Deux types de liens hypertextes. Des liens qui permettent d’accéder aux listes des arrêts de bus ; des liens morts qui aboutissent à des pages d’erreur 404.
Le choix entre l’un et l’autre type se fait en fonction de la couleur.
La présence de liens morts (les 2/3 des liens) est un problème en soit. Surtout pour les gens qui n’ont pas une bonne maîtrise de la navigation sur le Web. À l’APF66 on fait des sites pour une élite, pas pour la plèbe.
Mais le vrai problème est que la différence se fait par un code couleur. Et que se passe-t-il lorsque l’internaute ne voit pas correctement les couleurs ? (physiologie), a un écran mal calibré ? (écran) ou ne sait pas ce qu’est du kaki ? (vocabulaire) Et bien, il clique sur un lien mort.
Reprenez l’image issue de clickheat. La majorité des clics sont sur des liens « oranges » et non pas sur les liens « jaunâtres ».
En clair les internautes assimilent le kaki à la couleur du fruit du plaqueminier. C’est dire s’ils sont bêtes.
Bref, seule l’élite pour laquelle ce site est fait (c’est-à-dire les personnes se déplaçant en fauteuil roulant sachant ce qu’est le kaki) auront accès à la bonne parole. Les autres, et bien, « vaffan… »

Causes :

À part la bêtise, difficile de voir une cause en particulier. Il n’y a aucun intérêt à mettre sciemment des liens morts dans une page.
De plus l’utilisation d’un code couleur sans autre forme d’information signifie qu’on ne connaît pas l’existence de pathologie touchant la vision des couleurs.

Solutions :

La méthode la plus simple et la plus efficace est de supprimer les liens morts. Tous les autres problèmes en découlant. Cela permettrait aussi aux handicapés visuel de naviguer sans soucis sur cette page.
Toute fois il peut arriver qu’un code couleur soit nécessaire. C’est le cas pour le site Wheelmap.org. Il faut alors indiquer clairement la couleur, de préférence avec un pictogramme ou un rectangle coloré. Si cela est possible le texte peut aussi être de cette couleur.
Mais il faut bien se rendre compte que l’information ne doit jamais être uniquement accessible de façon visuelle. C’est une des bases de l’accessibilité, il faut pouvoir proposer des alternatives.

Handicap cognitif et de communication

Intéressons-nous un peu à ces listes maintenant que la page est décortiquée.

Cinq lignes, donc cinq pages, sont disponibles. Il s’agit des lignes 2, 4, 6, 7, 16.
D’abord les noms de fichiers, vu que ça c’est facile à gérer.
J’avais imposé comme règle (écrite dans le CMS, à la rubrique création de page) : pas de majuscule, pas accent, pas d’espace. Malheureusement cette règle étant en chinois, personne ne l’a comprise, ni ne l’applique on dirait. Les noms des fichiers sont donc en capitales (ou en majuscules pour ceux qui ne verraient pas la différence).
Et alors, me direz-vous ?
Et bien, Apache est sensible à la casse. Pour lui le fichier MONFICHIER.html est différent de monfichier.html.
Donc si l’internaute tape l’adresse en minuscule (la méthode la plus naturelle) il tombe sur une erreur 404. Faites le test, vous verrez.
Mais pourquoi Apache, ce crétin de serveur, est-il donc sensible à la casse ?
Pour la même raison que toutes les langues utilisant l’alphabet latin (dont le français) sont sensibles à la casse. Le mot « pierre » n’a pas le même sens que « Pierre ».
Là encore on est niveau école primaire.

Deux des pages ont un titre erroné. Là encore le manque de rigueur est flagrant. Il s’agit des lignes 2 et 7.
Au niveau des liens morts là aussi le manque de rigueur est flagrant. La page pour la ligne 2 en compte 16 ; la page pour la ligne 4 en compte un seul (curieux!) ; la page pour la ligne 6 en compte 24 ; la page pour la ligne 7 en compte 14 et la page pour la ligne 16 en compte 4.
À ces liens morts doivent se rajouter des liens qui ramènent sur la même page. L’internaute clique dessus et a l’impression que rien ne se passe. Là aussi, on est face à un bon exemple de bêtise.
On noterait aussi la présence de la petite image anamorphosée. Une vrai marque de fabrique.
Au fait, l’APF66 a-t-elle l’autorisation d’utiliser cette image ? Mais bon, le droit relatif à la propriété intellectuelle c’est si peu important.

Au niveau cognitif, vu que c’est le nom de la section, le problème est l’impression de sortir du site à cause du changement de visuel. Le refus d’utiliser le CMS en place pour créer les pages en question entraîne cette situation. À l’origine il était impossible de revenir à l’accueil du site via une barre de navigation. Un effort a été fait à ce niveau. À croire que quelqu’un s’est plaint.
Néanmoins l’absence de barre de navigation rend le surf sur ces pages mal aisé. Un gros effort de mémorisation doit être fait par l’internaute. Hors les sciences cognitives nous apprennent que la mémoire à cours terme est peu performante, un banal problème de plasticité du cerveau. L’internaute ne retiendra donc que peu d’information et a de forte chance d’abandonner le site avant d’avoir vu l’intégralité des documents.

La structure sémantique est inexistante, aucune page ne disposant d’une structure avec des niveaux de titres (balises h1 à h6). Il n’y a pas non plus de texte expliquant ce à quoi l’internaute (notamment s’il utilise une synthèse vocale) doit s’attendre. Les pages n’ont pas non plus de description (balise meta).

Causes :

Manque de travail, manque de sérieux, manque de formation, etc., la litanie est longue.
À plusieurs reprises il m’a été demandé au printemps « comment on doit faire pour mettre les documents en ligne ? ». J’ai toujours répondu « comment l’internaute doit-il y accéder ? ». La réponse fut toujours « je sais pas ! ».
Cette incapacité à se poser pour réfléchir et ce besoin à avancer coûte que coûte abouti donc à ce résultat particulièrement mauvais. Le rajout de deux liens dans la barre de navigation en novembre est un résultat facilement analysable : les blocs sont déséquilibrés et les textes n’ont pas de sens (« accès plage » et « accès bus CTPM »).

Solutions :

S’imposer quelques règles, un niveau de qualité élevé, un système de contrôle et corriger les erreurs dès qu’elles sont repérées sont le B à BA du professionnalisme. Et c’est vrai quelque soit le métier.

Au final, tout ça est-il bien utile ?

L’accessibilité n’est utile que pour les personnes en situation de handicap. Donc, faire un site Web accessible n’est pas plus utile que faire un commerce ou une mairie accessible.
La démarche est la même d’ailleurs. Il faut une compréhension des problématiques liées aux différents handicaps et savoir appliquer les règles et les normes techniques avec bon sens.
Mettre la pression de façon permanente est la seule façon réelle de faire « bouger les lignes ».

Que nous apprend tout ça ?

Que j’ai une dent contre certains responsables de l’APF66 ? Certes.
Bosser deux ans sur un projet pour arriver à ça, forcément ça fait un choc. Certes on peut bosser pour ou avec des « cons », mais se rendre compte que son travail est autant méprisé c’est désagréable.
Personne dans cette structure ne s’est jamais dit qu’en temps qu’infographiste, donc en temps que professionnel de la communication visuelle, c’est le handicap visuel qui m’interpelle le plus.
C’est curieux ces erreurs d’interprétation sur les motivations des gens.
Mais au de là de ce problème strictement personnel, un autre apparaît.
L’APF66 veut une société inclusive, ce qui passe par une ville accessible. Accessible à tous.
Mais comment exiger des autres, entreprises ou élus, ce qu’on ne peut exiger de soi-même.
Le jour de mon départ il m’a été clairement signifié que toute la partie de l’accessibilité concernant le handicap visuel serait mis de côté parce que « trop compliqué ».
J’aimerai voir la tête des mêmes personnes si elles avaient entendu un élu dire la même chose.
Il est rare d’arriver à trouver autant d’erreur sur la même page. Mis à part l’utilisation de technologies propriétaires peu accessibles (type Flash), tous les problèmes sont présents.

Les ingrédients pour un tel résultat sont :

• la bêtise (tellement banal) ;
• l’arrogance (je suis handicapé donc je comprends tout de l’accessibilité sans savoir à travailler le sujet) ;
• le manque de sérieux (travailler de façon rigoureuse n’est pas le fort de tout le monde) ;
• le refus d’apprendre (je n’ai pas souvenir d’avoir vu certains bénévoles aux formations que j’ai animé) ;

Tant qu’un minimum de contrôle était effectué avant la mise en ligne ces problèmes étaient moins visibles. Mais depuis 2012 la pression a baissé. La lecture des PDF sur les arrêts de bus donne un bon exemple de ce qui se passe lorsque plus aucun contrôle n’est assuré dans une organisation.

Dommage, l’accessibilité universelle mérite beaucoup mieux.