Le web est né pour être universel.
Accessible sur n'importe quel appareil, pour n'importe quelle personne.
Mais au fil du temps, le design s'est sophistiqué, les interfaces se sont complexifiées, et certaines personnes se sont retrouvées exclues sans qu'on s'en aperçoive.
L'accessibilité, c'est s'assurer qu'une personne :
- Malvoyante puisse naviguer avec un lecteur d'écran.
- Malentendante puisse suivre une vidéo.
- À mobilité réduite puisse utiliser ton produit sans souris.
- Ayant des troubles cognitifs puisse se repérer facilement dans la page.
Imagine que tu veux réserver un billet, consulter ton compte, ou simplement lire une information importante.
Mais la page ne se lit pas bien, les boutons ne réagissent pas, les textes sont minuscules, les vidéos n'ont pas de sous-titres.
C'est le quotidien d'environ 16% de la population mondiale !
- 3,5% ont une déficience visuelle.
- 5% une déficience auditive.
- 4% un handicap physique.
- 7% un trouble cognitif.
Et c'est sans compter les handicaps temporaires : bras cassé, conjonctivite, otite, migraine...
Concevoir un site inclusif
Chaque profil a ses besoins qu'il faut anticiper dès la conception du site.
Pas en multipliant les versions, mais en construisant une seule interface qui s'adapte à chacun.
Chefs de produit, designers d'interface, designers d'expérience client et développeurs travaillent ensemble pour créer
des systèmes utilisables par tous.
Navigation utilisant le clavier
Tout ce qui peut être cliqué, activé ou ouvert doit aussi pouvoir l'être au clavier.
Ça permet à une personne paraplégique, ou à quelqu'un qui utilise un dispositif spécial (joystick, contacteur, ou clavier à la bouche), de parcourir le site.
Concrètement, les designers rendent le parcours utilisateur visible et logique. Il voit clairement quel élément est actif et peut utiliser les fonctionnalités
principales en un minimum de manipulations.
L'exemple le plus connu, c'est l'appui sur la touche espace pour mettre en pause la lecture audio ou vidéo.
Le développeur s'assure, lui, que le curseur peut se déplacer logiquement entre les éléments (boutons, menus, liens).
Les pièges classiques :
- Les menus déroulants qui s'ouvrent uniquement au survol de la souris.
- Les faux boutons stylisés, ceux recréés à partir de texte ou d'images, qui n'utilisent pas le système natif du navigateur.
- Les pop-ups ou modales dans lesquelles le curseur ne va jamais car il reste sur l'arrière-plan, qui se ferment automatiquement dès l'appui sur une touche, ou au contraire qui ne peuvent se fermer que par un clic sur une croix.
- Les carrousels qui changent tout seuls sans possibilité d'y accéder au clavier.
- Les champs de formulaire masqués, désactivés ou réorganisés dynamiquement, qui perturbent la navigation du curseur et désorientent l’utilisateur.
Commandes vocales
Les personnes à mobilité réduite, ou celles qui ne peuvent pas manipuler un clavier, utilisent parfois des logiciels de commande vocale.
Ils permettent de dire "clique sur envoyer" ou "ouvre le menu principal".
Pour que ça fonctionne, les éléments de l'interface doivent avoir un nom explicite.
Le logiciel analyse le code source de la page et tente de faire correspondre ce qu'il "voit" avec ce qui lui est
commandé. Il ne comprendra pas qu'une icône de loupe représente un champ de recherche, qu'un caddie mène vers
le panier d'achats, qu'un crayon sert à modifier une information, qu'une croix ferme une modale...
Les développeurs ajoutent donc dans le code des étiquettes descriptives, invisibles à l'écran, mais qui fournissent
le contexte nécessaire aux outils d'assistance.
Compatibilité avec les lecteurs d'écran et plages braille
Les lecteurs d'écran traduisent le contenu d'une page web pour les personnes qui ne peuvent pas la voir.
Ils parcourent le code de haut en bas et restituent les informations à l'utilisateur, soit à l'oral par une voix de synthèse,
soit sur une "plage braille".
Cet appareil affiche en temps réel une ligne de texte en relief que l'utilisateur lit avec les doigts pendant qu'il navigue sur le site.
Comme pour les commandes vocales, pour que cette lecture fonctionne, le site doit être structuré logiquement.
Les lecteurs d'écran ne perçoivent pas les couleurs, les icônes ou les animations :
ils s'appuient uniquement sur la structure du texte et sur les descriptions associées.
S'il manque des titres, si les zones cliquables ne sont pas identifiées ou si l'ordre de navigation est incohérent,
le contenu devient difficile, voire impossible à comprendre.
Les designers et développeurs veillent à ce que chaque élément soit décrit et hiérarchisé correctement :
- Ils utilisent les balises HTML adéquates pour identifier sans ambiguïté : la navigation, les boutons, les niveaux de titres, les paragraphes...
- Ils ajoutent des descriptions aux éléments visuels, notamment les images : expliquer les points principaux d'un graphique, décrire le produit présenté...
- Ils s'assurent que l'ordre de lecture du code reflète l'ordre de navigation visuelle.
- Ils s'assurent de la cohérence de présentation sur toutes les pages.
Contraste des couleurs
Quand j'étais apprenti développeur chez Orange entre 2009 et 2012, je construisais un outil destiné aux collègues autour de moi dans l'open-space.
L'outil utilisait un design pré-construit, un classique de cette époque, avec des teintes bleutées inspirées de Windows 7.
Les titres étaient bleu foncé sur un fond bleu clair, les boutons avaient un texte blanc sur un fond gris. À cette époque, on
ne parlait pas encore de "flat design", on trouvait partout des effets de transparence et des dégradés de couleurs.
Un jour, un collègue me pose une question. Je lui dis "clique sur le bouton vert". Il me répond "quel bouton vert ?".
Il était daltonien.
Le daltonisme, ce n'est pas "inverser les couleurs", comme on peut l'entendre souvent. C'est un handicap altérant
la perception de certaines teintes. Selon les types de daltonisme, certains ne peuvent pas distinguer les nuances (rouge / vert, bleu / jaune...),
certains voient le monde dans une teinte plus terne et d'autres sont complètement aveugles aux couleurs.
Le daltonisme est le plus souvent un handicap génétique lié au chromosome X.
8% des hommes occidentaux (seulement 0,5% des femmes) sont daltoniens.
C'est loin d'être anecdotique quand tu construis un site !
Le contraste entre le texte et son arrière-plan est un pilier de l'accessibilité visuelle.
Un texte trop clair sur un fond clair, ou trop sombre sur un fond foncé, peut devenir illisible pour de nombreuses personnes.
Quelques techniques :
- Vérifier la charte graphique avec des outils de test de contraste.
- Ajouter un mode sombre (et le vérifier aussi). Certains daltoniens peuvent voir des nuances sombres plus que des nuances claires, et inversement.
- Centraliser les codes couleurs dans le CSS. Des outils spécialisés peuvent plus facilement les surcharger.
- Appliquer différents états sur les composants. Au survol, un lien ou un bouton ne doit pas simplement changer de couleur. On peut ajouter une ombre, mettre un soulignage, changer la bordure...
- Utiliser les préférences système de l'utilisateur. Appliquer un thème spécifique, avec contraste renforcé, si on détecte que l'utilisateur a activé le contraste élevé dans son système d'exploitation.
Mise en forme de texte
La taille par défaut des textes et les polices d'écriture doivent être étudiées pour un confort de lecture et de compréhension.
Un texte trop petit, trop serré ou trop dense fatigue la vue et décourage la lecture.
À l'inverse, une typographie trop grande ou mal proportionnée casse le rythme et perturbe la navigation.
De nombreuses déficiences visuelles rendent la lecture difficile.
Avec l'âge, la presbytie finit par nous concerner tous : on plisse les yeux, on rapproche l'écran, on agrandit le texte pour mieux distinguer les mots.
Un site accessible doit permettre d’agrandir le texte sans que la mise en page ne se déforme ou que les contenus se chevauchent.
La structure d'un texte, son aération, la longueur des lignes, les espacements entre les lettres ou les lignes, et l'usage du gras ou de l'italique sont autant d'éléments qui influencent la manière dont notre cerveau traite l'information.
Naviguer sur un site peut devenir un véritable parcours d’obstacles pour les personnes souffrant de troubles cognitifs :
- Chez les personnes dyslexiques, un texte trop dense, justifié ou mal espacé peut créer des "rivières blanches" entre les mots : l'oeil perd le fil, les lettres se confondent, la lecture devient épuisante.
- Pour les personnes atteintes de TDAH (trouble déficit de l'attention avec ou sans hyperactivité), les blocs de texte sans repère visuel rendent la concentration très difficile. Elles ont besoin d'une structure claire, avec des paragraphes bien séparés et des titres visibles, pour comprendre la hiérarchie de l'information et savoir où poser leur attention.
- La lisibilité joue aussi un rôle majeur pour les personnes ayant une déficience intellectuelle ou des troubles de la mémoire. Des phrases courtes, des mots simples et des mises en avant visuelles (gras, listes, titres) leur permettent de mieux retenir et de suivre le fil du raisonnement.
Navigation sans audio
Les sourds et malentendants sont les grands oubliés de la vague de prise de conscience des entreprises sur l'accessibilité.
On pense maintenant à augmenter les contrastes et à faire des designs adaptatifs, mais on oublie souvent ce qui dépend du son.
Et pourtant il y a quelques actions simples à mener :
- Sous-titrer les vidéos.
- Proposer des transcriptions sous les audios.
- Éviter le lancement automatique des vidéos ou publicités avec le son activé. Ça peut être gênant selon le contexte, surtout si la personne ne peut pas se rendre compte que son appareil émet un son.
- Prévoir des alertes visuelles en complément des alertes sonores. Sur une messagerie instantanée, pour une assistance en ligne par exemple.
Rendre son site accessible aux humains, c’est aussi le rendre accessible aux machines.
Nous venons de parler des plages braille, des lecteurs d'écran et du contrôle vocal.
Améliorer la lecture pour ces outils facilite aussi l'indexation des robots pour les moteurs de recherche.
Travailler son accessibilité, c'est en même temps améliorer son référencement.
Et pour ceux que même cet argument ne convaincrait toujours pas, il faut savoir que l'accessibilité n'est plus seulement une bonne pratique, c'est une obligation légale.
En France, le Référentiel général d'amélioration de l'accessibilité (RGAA) impose des exigences précises aux sites publics, et de plus en plus aux acteurs privés.
À l'échelle européenne, la directive European Accessibility Act va dans le même sens : d'ici peu, tous les services et produits numériques devront respecter un niveau minimal d'accessibilité, sous peine de sanctions.
On réduit souvent l'accessibilité à une liste de critères.
Rendre un site accessible, c'est plus qu'une exigence technique ou légale, c'est une forme de considération.
C’est reconnaître que les utilisateurs n’ont pas tous les mêmes capacités,
mais qu'ils méritent la même qualité d'expérience.
La prochaine fois que tu construis un système, demande-toi :
Est-ce que quelqu'un peut vraiment utiliser ton produit sans voir l'écran ?
Est-ce qu'il peut comprendre ce qui se passe sans entendre le son ?
Est-ce qu'il peut naviguer sans cliquer, sans toucher, sans deviner ?
Si la réponse est non, c'est qu'il te reste encore un peu de travail.