Ci-dessus un camembert représentant les configurations navigateur / système d'exploitation des visiteurs connectés ce matin sur ce blog. Si vous utilisez un lecteur d'écran. Il s'agit d'une image qui pour être accessible aux utilisateurs de lecteurs d'écran possède une alternative et une longue description.

<img src="..."
 alt="Navigateurs / systèmes d'exploitation des visiteurs (23/05/09 matin)"
 longdesc="http://tentatives-accessibles.eu/share/longdesc_conf.html" />

Le camembert ci-dessus est découpé en plusieurs parties, chaque partie est associée à une couleur et à un pourcentage. Une légende située juste à côté associe par la couleur une configuration (comme Firefox / Linux) à un pourcentage (13,33%). Que faire dans ce cas là pour permettre à toute personne de comprendre la légende, et plus particulièrement aux personnes daltoniennes ?

Vous pouvez utiliser des outils de simulation du daltonisme pour vérifier vos graphiques, mais cela va vous prendre du temps. Selon les personnes les degrés de sensibilisation à certaines couleurs sont variables, dans de rares cas certaines personnes ne distinguent aucune couleur. Et que faire lorsque vous souhaitez imprimer un graphique en noir et blanc (même si ça n'est pas très écologique) ?

La meilleure solution consiste donc à modifier les graphiques pour que les légendes n'utilisent pas seulement les couleurs pour porter leurs informations, en voici quelques exemples.

Utiliser des symboles

Le camembert est toujours en couleur mais chaque partie est également identifiée par un symbole (carré, rond, losange, ...). La légende associe désormais une configuration à un pourcentage par la couleur et un symbole.

Utiliser des légendes contextuelles

La légende est éclatée pour apparaitre directement à côté de chaque partie du camembert, la couleur n'est plus utilisée pour associer une configuration à un pourcentage.

Rappeler les valeurs dans les légendes

La légende du camembert a été modifiée, elle rappelle désormais côte-à-côte la couleur, la configuration et le pourcentage. En utilisant cette méthode le camembert devient un simple élément décoratif, la lecture seule de la légende permet de comprendre l'information. Il n'est plus nécessaire de faire un lien entre une couleur de la légende et la même couleur dans le camembert.

Cette solution est assez intéressante car elle est facilement réalisable en HTML avec un peu de mise en forme :

• Firefox / Windows : 40,00%
• Internet Explorer / Windows : 33,33%
• Firefox / Linux : 13,33%
• Firefox / Macintosh : 6,67%
• Mozilla / Windows : 6,67%

Attention, la mise en forme peut être différente depuis un agrégateur de contenus.

La légende contient les couleurs, les configurations et les pourcentages, elle est réalisée avec une liste HTML et peut donc être comprise sans le camembert. Le camembert lui est une image dont l'alternative est vide puisqu'il ne devient qu'un simple élément décoratif.

Ces conseils peuvent s'appliquer sur des graphiques de toutes sortes, aux frises chronologiques ou cartographies avec des légendes, ...

Alors quelle solution préférez-vous ? Avez-vous d'autres idées de mise en forme ?
Est-ce quelque chose à laquelle vous pensez lorsque vous publiez un graphique ?

Notes

1. Daltonisme (ou dyschromatopsie) : incapacité partielle ou totale de distinguer certaines couleurs. On distingue les protanopes (insensibles ou peu sensibles au rouge), les deutéranopes (insensibles ou peu sensibles au vert) et les trinatopes (insensibles ou peu sensibles au bleu). En France, 8% des hommes et 0,45% des femmes sont daltoniens et daltoniennes (Retour à la phrase contenant Dichromasie).
2. Achromatopsie : absence totale de perception des couleurs, comparable à une vision en noir et blanc. Il s'agit d'une forme rare de daltonisme. (Retour à la phrase contenant Achromatopsie).