Information véhiculée et couleur : un contre-exemple du site Travailler mieux

Victor Brito — Sat, 20 Feb 2010 16:14:00 +0100

Le site Web Travailler mieux, un site dépendant du Ministère du Travail, a mis en ligne récemment trois listes d'entreprises, selon que ces dernières ont mis en place ou non un plan d'action ou un accord sur la prévention du stress au travail et des risques psychosociaux.

Ce billet ne reviendra pas sur la polémique suscitée par la manière dont certaines entreprises ont été classées (parfois automatiquement). Il ne s'agit, ici, que de parler du point suivant : sur la page du Plan d'urgence sur la prévention des risques psychosociaux, on remarque la présence d'une liste de trois liens pointant vers chacune des trois listes de classement des entreprises. Cette liste est codée comme suit :

<ul>
<li><a href="http://www.travailler-mieux.gouv.fr/spip.php?page=stress_liste&amp;cla=1" class="green">Entreprises listées en VERT</a></li>
<li><a href="http://www.travailler-mieux.gouv.fr/spip.php?page=stress_liste&amp;cla=2" class="orange">Entreprises listées en ORANGE</a></li>
<li><a href="http://www.travailler-mieux.gouv.fr/spip.php?page=stress_liste&amp;cla=3" class="red">Entreprises listées en ROUGE</a></li>
</ul>

Chaque lien a son arrière-plan colorié, respectivement, en vert, orange et rouge. Il en est de même pour les listes d'entreprises correspondantes.

Une information, pour qu'elle soit accessible, ne doit pas être véhiculée uniquement par la couleur, comme le rappelle le critère de succès 1.4.1 des WCAG 2.0, de niveau A : Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (en français : La couleur n'est pas utilisée comme la seule façon de véhiculer de l'information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément visuel).

Dans le cas examiné, lorsque les couleurs ne sont pas correctement restituées, soit parce que le support informatique utilisé pour consulter la page restitue mal les couleurs (utilisation de niveaux de gris ou nombre restreint de couleurs prises en charge) soit parce que l'utilisateur est daltonien, l'information véhiculée devient plus difficile à comprendre, comme le montrent ces trois captures d'écran des liens, qui montrent, respectivement, leur affichage avec des niveaux de gris, leur affichage chez un daltonien atteint de protanopie et chez un daltonien atteint de deutéranopie.

À cela il faut ajouter que les couleurs sont entièrement perdues pour les utilisateurs de lecteur d'écran.

Enfin, la page n'explique pas à quoi correspondent les entreprises listées respectivement en vert, orange et rouge.

Pour rendre cette information plus compréhensible, et donc plus accessible, il suffit d'expliciter à quoi correspondent ces différentes listes, notamment en retravaillant l'intitulé des liens, de façon à ce qu'il indique clairement ce qu'on trouvera dans la page vers laquelle ils pointent. En effet, les utilisateurs de lecteurs d'écran ont la faculté d'ouvrir une boîte de dialogue listant tous les liens de la page, qui sont donc isolés de leur contexte (même si la dernière version de Jaws permet de fournir le contexte de ces liens, en indiquant le contenu du paragraphe où ils se trouvent ou le titre de section le plus proche) ; or, les trois liens en question, tels qu'ils sont intitulés, ne sont pas suffisamment explicites, même dans leur contexte. Pour qu'ils soient plus explicites, ils doivent être intitulés, par exemple, comme suit :

<ul>
<li><a href="http://www.travailler-mieux.gouv.fr/spip.php?page=stress_liste&amp;cla=1" class="good">Liste des entreprises ayant un plan de prévention et d'action</a></li>
<li><a href="http://www.travailler-mieux.gouv.fr/spip.php?page=stress_liste&amp;cla=2" class="warning">Liste des entreprises prévoyant un plan de prévention et d'action</a></li>
<li><a href="http://www.travailler-mieux.gouv.fr/spip.php?page=stress_liste&amp;cla=3" class="bad">Liste des entreprises n'ayant aucun plan de prévention et d'action</a></li>
</ul>

Bien entendu, l'usage de la couleur n'est pas interdit : l'essentiel est que la couleur apporte un confort d'utilisation supplémentaire pour les utilisateurs ayant une bonne perception des couleurs (une amélioration progressive, en quelque sorte). Soit dit en passant, dans le code ci-dessus, le nom des classes a été modifié afin de se conformer à cette bonne pratique, qui consiste à nommer les classes selon la sémantique, et non selon la mise en forme : il suffit d'imaginer qu'on décide de remplacer le rouge par du noir, ou l'orange par une nuance de jaune, pour mieux s'en convaincre…

Blog - Britoweb - Tag - couleur

Information véhiculée et couleur : un contre-exemple du site Travailler mieux