L'accessibilité pour tous

  • UX Design
  • UI Design

par Alexandre Godreau

le 25 juillet 2018

Qu’est ce que l’ac­ces­si­bi­lité ?

Accessibility illustration by Alejandro Ramirez

L’ac­ces­si­bi­lité, c’est faire en sorte que tout le monde puisse navi­guer, comprendre et inter­agir sur votre site, qu’il soit valide ou atteint de handi­cap.

On vous explique ici pourquoi il est abso­lu­ment néces­saire de penser votre site en prenant en compte les normes d’ac­ces­si­bi­lité, faire en sorte qu’il réponde à tous les critères et enfin comment véri­fier que votre site est bien acces­sible.

Pour commen­cer, W3C a mis à dispo­si­tion toutes les règles à suivre pour opti­mi­ser au maxi­mum l’ac­ces­si­bi­lité des conte­nus web : Web Content Acces­si­bi­lity Guide­lines

(WCAG) 2.0

À qui ça s’adresse ?

Tout d’abord il faut savoir qu’en France entre 15% et 20% de la popu­la­tion souffre d’un handi­cap visuel, audi­tif ou moteur, c’est donc poten­tiel­le­ment cette même propor­tion de votre cible qui est concer­née. Vous compren­drez aisé­ment qu’il est impor­tant de mettre en place une stra­té­gie pour permettre à ces utili­sa­teurs d’ac­cé­der à vos services, d’ache­ter des produits sur votre site e-commerce ou de s’abon­ner à votre produit. C’est mathé­ma­tique : plus votre site est adapté aux usages de chacun (valides comme handi­ca­pés) plus vous aurez la possi­bi­lité de toucher un grand nombre d’uti­li­sa­teurs et de boos­ter votre traf­fic.

Comment s’y prendre ?

Jack Innes Illustration animation accessibility

1. Tes couleurs tu véri­fie­ras

Une des choses les plus impor­tantes en terme d’ac­ces­si­bi­lité c’est la couleur : il est indis­pen­sable d’avoir des textes qui sont suffi­sam­ment contras­tés avec le fond, les textes doivent rester lisibles quoi qu’il arrive. Quand on est créa­tif, on a parfois tendance à sacri­fier la lisi­bi­lité au profit d’un rendu visuel plus harmo­nieux, mais c’est sans comp­ter sur les normes d’ac­ces­si­bi­lité. Fini les textes roses sur rose, fini le texte blanc sur un fond jaune pastel, il faut du contracte.

Ce n’est pas à l’oeil que l’on peut dire si oui ou non un texte est suffi­sam­ment contrasté, il existe plusieurs outils dispo­nibles pour vous aider comme par exemple Contrast­che­cker qui vous permet de véri­fier la lisi­bi­lité de vos conte­nus dès l’étape du design.

Google plugin accessibility

Si votre site est déjà exis­tant, vous pouvez véri­fiez que les couleurs répondent aux normes d’ac­ces­si­bi­lité grâce à check­my­co­lours. Google propose aussi dans son store plusieurs plugins gratuits pour avoir un rendu de la plupart des handi­caps visuels pour vous rendre compte de ce que les visi­teurs souf­frant d’un des ces handi­caps visuels voient en allant sur votre site. I want to see like the colour blind est l’un d’entre eux et vous permet­tras de faire plusieurs tests en direct sur votre site, dan la peau d’un dalto­nien.

2. Ta typo­gra­phie tu chéri­ras

Bojan Janjanin Typography accessibility

Le texte est très impor­tant quand on parle d’ac­ces­si­bi­lité. On l’a vu au dessus, il faut que la couleur du fond et celle du texte fonc­tionnent ensemble pour que le texte reste lisible, mais il y a aussi d’autre points à respec­ter, comme par exemple la taille de celle-ci. En géné­ral choi­sis­sez pour le para­graphe un corps compris entre 14 et 20 pt. Il faut aussi faire atten­tion à l’in­ter­li­gnage pour faci­li­ter la lecture et éviter les problèmes lorsque l’oeil retourne à la ligne. Nous vous conseillons un inter­li­gnage de 150% de la taille de la typo. Par exemple, pour un texte corps 16 partez sur un inter­li­gnage de 24.

En acces­si­bi­lité le texte en géné­ral a une vraie impor­tance et il doit être présent en rempla­ce­ment de chaque élément non lisible comme les images et les vidéos par exemple. Tous les textes des vidéos devront être retrans­crit ( Exemple : les sous-titres des vidéos Youtube) et les images devront avoir des descrip­tions précises pour opti­mi­ser la compré­hen­sion pour les utili­sa­teurs malvoyant utili­sant un outil d’au­dio­des­crip­tion. 

3. Une navi­ga­tion simple tu préfé­re­ras

Lila Bardenova Validation icons 

Pour les utili­sa­teurs souf­frant d’un handi­cap moteur il faut prendre en compte plusieurs critères qui leur faci­li­te­ront la navi­ga­tion à travers votre site. Si l’user ne peut pas utili­ser sa souris il faut faire en sorte que la navi­ga­tion du site soit acces­sibles via le clavier.

Il faut aussi faire atten­tion à ce que le site soit “tolé­rant” aux erreurs avec des confir­ma­tions comme “Êtes-vous sûr de vouloir suppri­mer ce contenu?” pour éviter les fausses mani­pu­la­tions.

Enfin, arran­gez-vous pour que votre site réagisse aux logi­ciels de contrôle vocal, ce qui permet­trait à un plus grand nombre d’uti­li­sa­teur de le visi­ter.

4. Tes vidéos tu contrô­le­ras

Pour ce qui est des vidéos, comme on vous le disait plus haut, il faut faire atten­tion à bien mettre en place de l’au­dio descrip­tion sur vos vidéos. Il faut aussi éviter un maxi­mum les conte­nus suscep­tibles de provoquer des crises convul­sives aux utili­sa­teurs sensibles.

Enfin pensez bien à lais­ser à l’uti­li­sa­teur le temps de lire ou relire les conte­nus propo­sés.

Le mot de la fin

Daniel Keane Accessibility gif


Main­te­nant que vous avez tous les outils en main il est temps de prendre le temps de véri­fiez que votre site corres­pond aux normes et les corri­ger si néces­saire. Si vous êtes actuel­le­ment en train de réali­ser votre site, c’est le moment idéal pour vous y mettre. Ce sont des choses simples à penser mais qui rendront service aux utili­sa­teurs et à vous par la même occa­sion.


Retour en haut keyboard_arrow_down background Layer 1