Cet article se veut un aide-mémoire pour les graphistes, il récapitule les points à prendre en compte pour produire un graphisme utilisable dans le cadre d'un projet de site respectant les normes d'accessibilité.

Couleur

Recommandation

La couleur ne doit pas être le seul moyen d'accéder à une information.

Contre-exemples

• Utiliser des puces rouges et vertes pour indiquer la disponibilité d'un produit.
• Mettre en rouge les champs obligatoires d'un formulaire
• Indiquer par un changement de couleur le menu actif de la navigation

Ces exemples ne sont pas forcément à proscrire mais il convient au minimum de les compléter par un dispositif permettant d'avoir accès à l'information sans la couleur (par exemple : changement de forme de la puce pour la disponibilité d'un produit, ajout d'une étoile pour les champs obligatoires, ajout d'un curseur au menu actif).

Contraste

Recommandation

Faire attention à avoir toujours un contraste suffisant entre les textes et les fonds sur lesquels ils s'affichent.

Exemple

Un piège courant est le texte ayant un fond en dégradé dont le contraste est suffisant pour les trois lignes de texte présentes dans le gabarit fourni par le graphiste mais qui devient illisible quand le gestionnaire du site entre un texte de 20 lignes...

Ce point ne pose souvent pas de problème pour le texte principal qui est très souvent noir (ou gris très foncé) sur fond blanc mais il faut se méfier des menus et titres d'encarts où il est souvent tentant d'utiliser des présentations moins conventionnelles.  

Image-texte

Recommandation

  Ne prévoir aucun texte en image.

Tableaux de données

Recommandation

  Prévoir un titre pour les tableaux de données.

Formulaires

Recommandation

• Prévoir des titres (labels) pour chaque champ de formulaire (textbox, textarea, liste déroulante...) et les associer visuellement de manière claire les uns aux autres.
• Regrouper visuellement, le cas échéant, les champs de formulaires de même nature en y associant un titre expliquant le contenu de chaque section.

Exemple 

Liens

Recommandations

• Les liens contigus (par exemple dans un menu de bas de page) doivent être séparés par un caractère visible.
• Les liens contenus dans le texte doivent être facilement identifiables et pas seulement par une couleur différente.
• Éviter les liens ou boutons de validation en image.
• Éviter les "lire la suite" ou autres "Plus d'info". De manière plus générale, il ne doit pas y avoir plusieurs liens ayant le même intitulé qui ne mènent pas au même endroit.
• L'intitulé d'un lien doit être court (pas de lien sur le résumé d'un article par exemple) et précis (Pas de "Go" ou "Suite" par exemple). 

Navigation

Recommandations

• Mettre en place un fil d'Ariane dans les pages (à l'exception de la page d'accueil).
• Prévoir un lien vers le plan du site.
• Faire des menus de navigation cohérents, toujours positionnés au même endroit et ayant toujours le même mode de fonctionnement et le même aspect général. 
• Lors d'une navigation dans un groupe de pages (processus de paiement, article sur plusieurs pages...) prévoir soit des liens "suivant / précédent", soit une barre de navigation.
• Garder le même gabarit pour toutes les pages du site, sauf exceptionnellement la page d'accueil.