Beaucoup de visiteurs ne peuvent pas toujours percevoir la couleur, la forme ou l’emplacement d’éléments sur un site web. En Belgique, environ 720 000 personnes sont aveugles, malvoyantes ou daltoniennes. Certaines personnes âgées ont également des difficultés à discerner les couleurs. Et ceux qui utilisent un écran avec un mauvais contraste, qui ne peuvent imprimer qu’en nuances de gris ou qui essaient de regarder leur écran en plein soleil ont tout intérêt à avoir des informations qui ne reposent pas uniquement sur des couleurs.

N’oubliez jamais que les visiteurs d’un site web ne les perçoivent pas tous de la même façon.

Les visiteurs sans handicap visuel voient la page dans son ensemble. Ils voient l’emplacement, la forme, la taille des textes, les champs et les boutons. Ils distinguent les couleurs et savent généralement à quoi correspond un bouton rouge ou un point vert, par exemple. Quand le texte renvoie au ‘bouton en bas à droite’, ils savent facilement le retrouver.

Les visiteurs daltoniens, malvoyants ou aveugles ne disposent pas de (tous) ces repères visuels. Afin que chacun puisse comprendre et utiliser votre site web, vous ne devez donc pas compter uniquement sur des indications visuelles. Vous pouvez bien sûr continuer à utiliser des informations sensorielles tant que leur signification est aussi transmise d’une autre manière ET que vous ne faites pas uniquement référence à la caractéristique sensorielle dans une instruction.

  • Exemple : appuyer sur le bouton rouge.

Comment vous y prendre ?

Utilisation de couleurs

Si vous utilisez des couleurs pour communiquer une information (par exemple pour indiquer qu’un article est en stock), vous devez aussi fournir cette information d’une autre manière. Ainsi, dans le cas d’une boutique en ligne, vous pourriez indiquer que les articles sont en stock à l’aide d’un point vert et avec un texte entre parenthèses (en stock).

Renvoyer à un élément sur la page

Lorsque vous renvoyez à un élément de la page dans une explication, ne vous contentez pas de mentionner la couleur, la forme ou l’emplacement. N’écrivez donc pas :

  • ‘utilisez le bouton vert pour envoyer vos données’ (couleur)
  • ‘utilisez le bouton rond pour envoyer vos données’ (forme)
  • ‘utilisez le bouton en bas de la page pour envoyer vos données’ (emplacement)

Mais optez pour une solution comme :

  • Utilisez le bouton (vert, rond) (en bas de la page) avec le texte « prêt » pour envoyer vos données’

En faisant référence au texte sur le bouton, tous les visiteurs, voyants ou mal voyants, comprennent clairement de quel bouton il s’agit. Pour qu’il soit encore plus facile de retrouver rapidement le bouton, vous pouvez toujours aussi préciser en plus la couleur, la forme ou l’emplacement.

Faites également attention avec des références comme « le menu ci-contre ». Avec la technologie d’assistance que certains visiteurs utilisent, la page qu’ils consultent peut s’afficher différemment, avec une présentation plus simple pour eux. Par conséquent, le menu se trouve peut-être juste au-dessus ou en dessous du texte pour eux. Il en va de même pour l’affichage sur un appareil mobile : souvent, le menu est à un autre endroit.

On peut toutefois utiliser des termes comme « ci-dessus » ou « ci-dessous » dans certains cas. En français, « ci-dessus » fait clairement référence à un élément qui précède ce point dans le texte et « ci-dessous » à quelque chose qui suit.

Si le contenu est enregistré dans le bon ordre dans le code et qu’une référence comme « ci-dessus » n’a pas d’autre sens que « précédemment dans ce texte », on peut alors tout à fait écrire : ‘choisissez un des liens ci-dessous’ ou ‘tous les points mentionnés ci-dessus’.

Pour des rédacteurs

Quand il rédige des textes, le rédacteur doit faire attention à ne pas faire référence qu’à des caractéristiques sensorielles (couleur, forme) d’éléments d’un site web.

Pour des développeurs et des concepteurs graphiques

Cette exigence devrait être prise en compte dès la conception et la construction du site web : les concepteurs et les développeurs ne doivent pas partir du principe que tous les visiteurs sont capables de tout percevoir sur un site web. Il faut donc toujours avoir une solution alternative pour un élément qui est uniquement communiqué par un son ou visuellement.