Design & Accessibilité


Agilité / mardi, septembre 3rd, 2019

Quand on est graphiste on a tendance à laisser jaillir ses idées comme elles viennent, mais peut-on tout se permettre ? Si vous ne le savez pas, chaque site internet doit être accessible à toute personne, handicapé compris.

Il y a plusieurs normes à respecter, dans la conception du site (dev) mais également dans son design !

Pourquoi le design ?

On n’y pense pas toujours et on se focalise bien souvent sur le code : respecter les balises, la hiérarchisation des contenus, utiliser le CSS à bon escient et mettre des ALT (alternative texte) sur les visuels.

Mais le design est tout aussi important : les couleurs, la typographie, les visuels.. Tout est à prendre en considération.

Outils pratique

Afin de respecter ces bonnes pratiques, il existe plusieurs outils qui permettent de vérifier si vos idées respectent les normes. Voici un échantillon des outils que je connais :

#ColorReview

Ce site vous permet de savoir si vos couleurs sont correctes en termes d’accessibilité : https://color.review/

Présentation de l'outil Color Review

Vous choisissez la couleur de votre texte et celui du fond; et l’outil vous dira si vous respectez les normes d’accessibilité et de quel niveau (A, AA, AAA).

Il est important sur un fond de couleur que le texte soit bien visible et lisible.

#Learnui.design

Avec cet outils, vous renseignez une ou plusieurs couleurs et automatiquement il va vous générer les différentes options que vous pouvez utiliser sur vos créas afin de respecter les normes AA et AAA.

Présentation de l'outils LearnUI Design

Il offre peu d’options sur les variantes de couleurs mais il est très simple à utiliser. Vous pouvez vous en servir comme planche d’inspiration (#moodboard) ou vérifier que vous êtes bien dans les normes.

#webaim

Cet outil là est moins graphiquement parlant que les 2 précédents mais il est tout aussi utile. Vous renseignez la couleur de votre texte et celle du fond, l’outil vous donnera le ratio de contraste entre ces 2 couleurs. Ainsi, vous saurez si vous êtes dans les normes ou non.

Vous avez également – sur la gauche – le résultat de la comparaison. « Fail » si votre ratio est trop bas, « Pass » si vous êtes bon.

Plus le nombre du ratio est élevé, mieux c'est.

#Infographies

Comme je vous le disais plus haut, il est important de considérer l’ensemble des handicaps pour maximiser au mieux vos rendus graphiques, afin que tout le monde puisse accéder et naviguer sur les sites en toute tranquillité.

Je vous cite des outils qui permettent principalement de se concentrer sur les couleurs choisies, mais vous pouvez trouver ce site, des infographies qui rescencent tous les critères à prendre en considération.

Très bonne idée à imprimer et à mettre dans les bureaux :)

En bref

Je vous ai présenté les 3 sites que je connaissais qui permette de savoir si le respect des normes AA/AAA sont bien respectés. Si vous en connaissez d’autres, je suis preneuse 🙂

Quoi qu’il en soit, s’il y a des directeurs artistiques ou graphistes ici présent, rappelez-vous que chaque maquette graphique à destination du web, doit respecter cette norme. Cela pourrait vous éviter des aller/retour ennuyeux. 😉

Et pour les chef de projets qui se posait la question, maintenant vous savez comment faire.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *