Concilier design et accessibilité, c’est possible !

Quand on produit du design pour le web, et qu’on se soucie de l’accessibilité de ses créations, il n’est pas toujours évident de s’y retrouver.

En effet, les légendes urbaines concernant l’accessibilité web sont nombreuses. Parmi celles-ci, le préjugé selon lequel un site accessible serait forcément « moche et ennuyeux » est tenace.

Ce genre de croyances, profondément ancrées, détournent nombre de designers de la discipline humaine, inclusive et passionnante qu’est l’accessibilité. En général, il ne s’agit pas de mauvaise volonté, mais bien d’un défaut d’information.

Quand on recherche une information précise sur Internet, il est souvent difficile de démêler le vrai du faux parmi la nuée d’informations contradictoires qui y circulent. Et puis tout le monde n’a pas la chance d’avoir un·e expert·e accessibilité sous la main pour nous aider à combattre les idées reçues.

C’est pourquoi cet article a pour objectif de déconstruire quelques mythes tenaces à propos de l’accessibilité et du web design, et de prouver qu’on peut tout à fait concevoir un site moderne, engageant, séduisant et accessible.

Le rôle d’un·e designer est de proposer des solutions créatives pour répondre à une problématique donnée, et contenter à la fois les utilisateurs et le client : des besoins qui, il est vrai, semblent parfois contradictoires.

Pourtant, rassurez-vous, si un·e client·e ou un·e chef·fe de projet vous demande l’impossible en matière de design pour le web, il existe forcément une solution accessible à cette problématique.

En effet, la réaction appropriée dans ces cas-là consiste souvent à trouver un compromis entre, d’une part, l’utilisabilité pour la majorité des utilisateurs qui ne rencontrent pas de difficultés particulières lorsqu’ils consultent Internet, et, d’autre part, les utilisateurs en situation de handicap qui ont besoin d’adaptations spécifiques.

Un·e designer sensibilisé·e à l’accessibilité doit donc pouvoir proposer des solutions d’adaptation, des alternatives ou des méthodes de contournement aux problèmes d’accessibilité posés par les fonctionnalités d’un système de design donné, en particulier par les éléments « bling bling » dont raffolent certains clients et services marketing.

Voyons donc ensemble comment résoudre simplement quelques problèmes d’accessibilité courants en matière de conception fonctionnelle et de design graphique pour le web.

Comment rendre accessibles des contenus qui bougent ?

Les carrousels

Le problème

Cela vous est peut-être déjà arrivé : quelqu’un vous demande de prévoir un carrousel qui défile automatiquement sur la page d’accueil de son site.

C’est la tuile, parce que ce type de fonctionnalité est problématique tant en termes d’expérience utilisateur que de SEO.

Mais le défilement automatique d’un contenu web pose également plusieurs problèmes d’accessibilité, comme l’indique le guide Défauts d’accessibilité : impacts sur les utilisateurs :

• d’une part, si ce contenu contient du texte, ce texte ne pourra pas être lu par des personnes ayant des difficultés de lecture s’il défile trop rapidement ;
• d’autre part, un contenu défilant automatiquement peut aussi distraire les personnes ayant un déficit de l’attention, et les empêcher de lire le reste du texte de la page ;
• enfin, pour les personnes utilisant un lecteur d’écran, un texte en mouvement peut parfois empêcher le lecteur d’écran de restituer correctement celui-ci. En effet, dès que le texte bouge, le lecteur d’écran ne peut pas aller jusqu’au bout de sa lecture, et reprend là où le texte s’est mis à jour. C’est insupportable pour les utilisateurs.

La solution idéale serait donc de ne pas utiliser de carrousel du tout.

Cependant, il arrive que la personne qui vous le demande tienne vraiment beaucoup à ce carrousel au défilement automatique, et qu’il vous soit impossible de lui dire non.

La solution

Rassurez-vous, il est tout à fait possible de rendre accessible un contenu en mouvement ou clignotant, même s’il est déclenché automatiquement.

Pour cela, il faut respecter au moins une des règles ci-dessous (issues du critère 13.17 du RGAA) :

• la durée du mouvement doit être inférieure ou égale à 5 secondes ;
• ou bien l’utilisateur doit pouvoir arrêter et relancer le mouvement ;
• ou bien l’utilisateur doit pouvoir afficher et masquer le contenu en mouvement ;
• ou bien l’utilisateur doit pouvoir afficher la totalité de l’information sans le mouvement.

Par exemple, prévoir la présence d’un bouton permettant de mettre le carrousel sur pause, et de le relancer si besoin suffit à pallier le problème d’accessibilité provoqué par le défilement automatique.

C’est le cas par exemple sur le site d’American Airlines, où le carrousel peut être arrêté et relancé à tout moment grâce à un simple bouton « marche/arrêt ».

Et c’est tout ! Charge ensuite aux intégrateurs et aux développeurs d’implémenter ce bouton lors du développement du carrousel.

À ce sujet, il faudra veiller à ce que l’intitulé du bouton change en fonction de l’action de l’utilisateur (ce qui n’est hélas pas le cas sur l’exemple que je viens de donner).

À noter

Ce serait une erreur de la part d’un·e expert·e accessibilité de vous demander de supprimer complètement le défilement automatique d’un carrousel.

En effet, il ne revient pas aux expert·e·s accessibilité de juger du bien-fondé de telle ou telle fonctionnalité, car ils ou elles sont rarement formé·e·s en matière d’expérience utilisateur.

Par contre, ils ou elles sont là pour vous aider à rendre accessibles les fonctionnalités qui posent problème spécifiquement aux utilisateurs en situation de handicap.

Or, un contenu qui défile automatiquement et que l’utilisateur ne peut pas contrôler est un gros problème d’accessibilité : lors d’un audit, c’est donc bien l’une des quatre règles ci-dessus qui sera contrôlée, ou qu’on vous demandera de mettre en œuvre si nécessaire.

Les contenus animés : images, vidéos, animations

Peut-être avez-vous – ou aurez-vous un jour – à créer des contenus animés pour le web : des images animées au format GIF, SVG ou Flash, des vidéos ou bien des animations.

Ces contenus sont soumis à la même règle d’accessibilité que nous venons de voir : comme il s’agit de contenus en mouvement ou clignotants, ils doivent également pouvoir être désactivés, masqués, mis sur pause, ou bien remplacés par une alternative statique, par exemple à l’aide d’un bouton dédié à cet effet.

Dans le cas où il s’agit d’une page remplie de diverses animations purement décoratives, alors on peut envisager un seul bouton, situé idéalement en haut de page et du code source, permettant à l’utilisateur d’arrêter immédiatement toutes les animations d’un coup, et ce dès son arrivée sur la page.

En effet, un bouton qui serait situé loin dans le contenu poserait un véritable problème d’utilisabilité aux utilisateurs aveugles notamment : gênés par le contenu en mouvement, ils mettraient en plus du temps à trouver le fameux bouton pour l’arrêter avant de pouvoir consulter le contenu normalement, ce qui provoquerait pour eux une expérience doublement négative.

En revanche, si une ou plusieurs animations présentes sur une page sont porteuses d’information (par exemple, un GIF animé qui contiendrait du texte), alors dans ce cas il est impératif de prévoir un contrôle individuel pour chaque animation.

C’est ce que fait Twitter : un bouton permet de contrôler chaque contenu en mouvement. C’est un choix de conception judicieux, étant donné qu’il n’est pas possible de prévoir à l’avance si les contenus en mouvement publiés par les utilisateurs de Twitter seront porteurs d’information ou pas. Donc, dans le doute, les designers de Twitter ont prévu un contrôle individuel pour chaque contenu animé.

Bon, cela serait évidemment bien mieux si ces boutons étaient accessibles au clavier et s’ils avaient un intitulé, ce qui n’est pas le cas actuellement !

À noter : si un contenu animé provoque des changements brusques de luminosité ou des effets de flash, d’autres règles d’accessibilité s’appliquent (cf. critère 13.15 du RGAA) afin de ménager les utilisateurs chez qui ce type de contenus peut provoquer des crises d’épilepsie photosensible.

Comment rendre accessible une charte graphique pour le web ?

De nombreux critères d’accessibilité concernent la conception fonctionnelle. Mais le design graphique est lui aussi concerné par l’accessibilité.

En effet, les décisions prises lors de la phase de conception graphique peuvent avoir des conséquences considérables en matière d’accessibilité web, en particulier en matière de couleurs et de présentation de l’information.

Voici quelques thématiques auxquelles les designers UI devraient faire particulièrement attention pour produire des livrables accessibles :

• les contrastes de couleurs ;
• la visibilité des liens par rapport au texte environnant ;
• l’indication de la prise de focus (outline) ;
• les alternatives pour l’information donnée par la forme, la taille ou la position ;
• et, dans une moindre mesure, la largeur, l’alignement et l’interlignage des textes.

Aujourd’hui, penchons-nous sur les éléments de charte graphique : les contrastes de couleurs, la ou les polices de caractères ainsi que le logo.

Contrastes de couleurs

Pour commencer, veillez à choisir des contrastes suffisants entre la couleur des textes et la couleur des arrière-plans du site.

Les ratios de contraste attendus par le RGAA dépendent de la taille de texte et de sa graisse. À noter : ce critère d’accessibilité est de niveau AA, ce qui signifie qu’il est obligatoire de s’y conformer. (En savoir plus sur les niveaux de conformité au RGAA.)

En effet, des contrastes insuffisants sur l’ensemble d’un site constituent un véritable problème d’accès aux contenus pour les personnes déficientes visuelles, dont la part augmente avec l’âge. Les couleurs constituent donc une problématique importante du design accessible.

Ce besoin de contraste concerne non seulement le texte, mais aussi :

• les liens dont la nature n’est pas évidente dans un environnement de texte, par rapport au texte environnant ;
• le texte en image (c’est-à-dire le texte présent dans une image) ;
• le texte présent dans les animations ;
• le texte en image présent dans les animations ;
• le texte de sous-titrage et le texte incrusté dans les vidéos (si vous avez la main dessus).

NB : les textes présents dans les éléments d’une image ou d’une vidéo (par exemple un écriteau, une affiche, etc.) ne sont pas concernés par cette exigence de contraste. En savoir plus sur les contrastes accessibles grâce au glossaire du RGAA.

Ce qu’il convient de faire pour rendre des contrastes accessibles dépend du type de charte graphique concernée : la solution diffère selon qu’il s’agit d’une charte graphique créée from scratch, ou bien d’une charte graphique existante que vous devez décliner pour le web.

Cas nº1 : une charte graphique toute neuve

Si vous créez une charte graphique de zéro, vous pouvez décider d’utiliser des couleurs qui, utilisées entre elles, auront un ratio de contraste suffisant.

Il existe de nombreuses ressources pour vous aider à vérifier les ratios de contraste des couleurs que vous utilisez, et pour vous suggérer des couleurs alternatives suffisamment contrastées si besoin.

Mon outil chouchou est Colour Contrast Analyser. C’est un petit logiciel gratuit pour MacOS et Windows, qui permet de sélectionner deux couleurs à la pipette et de vérifier instantanément leur niveau de contraste.

Ce qui vous intéresse, vous, c’est de vérifier que votre ratio de contraste soit conforme AA pour le « texte normal » et le « grand texte ». Ce qui est le cas sur la capture d’écran ci-dessus, pour les couleurs #6B5096 (violet clair) et #ffffff (blanc).

D’autres outils gratuits existent sur le web pour calculer le ratio de contraste entre deux couleurs. Certains vous proposent même des couleurs alternatives en cas d’échec.

Ainsi, Color Safe permet de générer automatiquement une palette de couleurs accessibles d’après une couleur d’arrière-plan que vous définissez. Il est possible de filtrer les résultats en fonction d’une teinte dominante.

De son côté, Lea Verou a créé l’outil Contrast Ratio, qui permet de calculer le ratio de contraste entre deux couleurs, y compris les translucides.

Enfin, Contrast Finder permet quant à lui de vérifier un ratio de contraste entre deux couleurs, et vous propose également des couleurs alternatives et accessibles en cas d’échec.

Bien d’autres outils similaires existent, dont certains permettent une meilleure prévisualisation des couples de couleurs, comme Color Tool ou Colorable.

Une fois vos couleurs choisies, indiquez leur code hexadécimal dans un guide de styles qui servira de référence aux intégrateurs, aux développeurs et aux contributeurs.

Cas nº2 : une charte graphique existante, que vous ne pouvez pas modifier

Cependant, lorsque vous vous devez décliner une charte graphique existante pour le web, et que celle-ci contient des contrastes de couleurs insuffisants (typiquement : orange et blanc, jaune et blanc, bleu clair et blanc, gris clair sur blanc, etc.), alors la marche à suivre pour la rendre accessible diffère quelque peu.

Le problème

En effet, il ne revient pas aux designers déclinant une charte graphique pour le web de dénaturer le branding de leur client.

Tout branding découle d’un travail de stratégie de marque et de design graphique minutieux, et il serait aberrant que celui-ci ne soit pas exactement le même sur le web que sur des supports imprimés par exemple.

Quand bien même une certaine latitude vous serait accordée pour modifier légèrement les codes hexadécimaux afin d’améliorer le contraste de la charte concernée, il n’est pas toujours possible de trouver des couleurs alternatives suffisamment contrastées sans dénaturer le branding initial de la marque.

Ainsi, foncer l’orange vif qui sert d’emblème à la marque de votre client pour rendre cette couleur suffisamment contrastée par rapport à un arrière-plan blanc ne pourrait aboutir qu’à une nuance de brun pour atteindre les niveaux de contrastes requis par RGAA. Du brun à la place du orange ? C’est impensable, tant cela porterait atteinte à l’identité de marque.

C’est pourquoi il peut être trop compliqué ou impossible de rendre accessible une charte graphique existante, qu’il s’agisse d’une charte graphique héritée du print, ou bien d’une charte graphique déjà déployée en production à laquelle on ne peut plus toucher.

La solution

Renforcer les contrastes

Aussi, en cas de charte graphique existante dont les contrastes sont insuffisants, la solution consiste à prévoir des styles alternatifs proposant des contrastes améliorés, que l’utilisateur pourra activer grâce à un mécanisme de sélecteur de styles (style switcher).

Cette fonctionnalité est souvent présentée sous forme de bouton situé dans l’en-tête de la page, et s’accompagne généralement d’un cookie qui permet de mémoriser le choix de l’utilisateur, pour lui éviter de devoir refaire le réglage à chaque visite du site.

Contrastes renforcés : le bleu est plus foncé, et les textes disposés sur l’arrière-plan photo ont également un arrière-plan uni blanc, pour renforcer la lisibilité des textes.

Ce mécanisme alternatif permet aux utilisateurs malvoyants de consulter votre contenu dans des conditions idéales, en dépit du problème de contraste initial.

Si vous prévoyez la présence de ce mécanisme lors de la conception du site, il vous sera alors possible d’utiliser toutes les couleurs possibles et imaginables dans vos maquettes, même celles dont le contraste avec la couleur d’arrière-plan est insuffisant.

Bien sûr, cela ne résoudra pas pour autant le problème d’utilisabilité posé par du texte insuffisamment contrasté de la charte initiale. Mais, au moins, le problème d’accessibilité sera résolu.

Inverser les contrastes

En matière d’accessibilité des couleurs, vous pouvez aussi pousser les choses encore plus loin, notamment en donnant la possibilité à l’utilisateur d’inverser les contrastes.

Le but dans ce cas n’est pas de faire beau, mais de compenser une déficience visuelle très particulière. En effet, ce type de contraste permet de limiter la fatigue visuelle.

C’est un dispositif que vous pouvez activer ici même, sur le site d’Access42 : dans ce cas, les textes passent en jaune sur fond bleu foncé.

Prévoir un style switcher permettant aux utilisateurs de renforcer ou d’inverser les contrastes couvre déjà la plupart des besoins simples en matière de couleurs accessibles, dans le cas d’une charte aux contrastes insuffisants.

Laisser l’utilisateur choisir la couleur du texte et de l’arrière-plan

Mais il est également possible de donner à l’utilisateur la possibilité de choisir la couleur de texte et la couleur d’arrière-plan qu’il préfère à l’aide d’un color picker.

Un exemple est consultable sur le site Infos-Parents.

Cette possibilité concerne cependant un critère d’accessibilité de niveau triple A : elle constitue donc un confort supplémentaire, mais n’a pas de caractère obligatoire.

En outre, de nombreux utilisateurs malvoyants utilisent déjà leurs propres feuilles de styles CSS personnalisées pour réussir à lire sur le web.

Logo et police de caractères

Par ailleurs, ne cherchez pas à rendre accessible un logotype, une police de caractère, ou tout autre élément de charte graphique.

Déjà, il n’existe aucune obligation à ce sujet dans le RGAA.

Ensuite, concevoir la charte graphique d’un site dont la cible est généraliste en se basant sur les besoins d’une minorité d’utilisateurs peut poser problème.

Par exemple, imaginons que vous teniez uniquement compte des besoins des utilisateurs daltoniens pour choisir les couleurs du logo d’un site : le résultat sera sans doute étrange pour les 92 à 95 % des utilisateurs qui ne sont pas daltoniens.

De même, si vous choisissiez de composer le texte de labeur du site avec une police de caractère optimisée pour les utilisateurs dyslexiques (comme Open Dyslexic par exemple), cela rendrait fort désagréable la lecture du texte par la majorité des utilisateurs qui ne sont pas dyslexiques.

De plus, les personnes dyslexiques ne trouvent pas toutes ce type de police adaptée plus agréable ou plus facile à lire que les autres.

C’est pourquoi il est inutile de vous arracher les cheveux à essayer de rendre accessible un logo, une police de caractère, ou tout autre élément de charte graphique : parce qu’ils doivent répondre spontanément aux besoins de la majorité d’utilisateurs.

Il vaut mieux que vous concentriez vos efforts ailleurs, en cherchant des solutions d’adaptation, des alternatives ou des méthodes de contournement.

Ainsi, il est tout à fait possible de permettre aux utilisateurs qui en ont besoin de remplacer les polices du site par une police adaptée à certains symptômes de la dyslexie, en passant par le même dispositif de style switcher que celui que nous venons d’évoquer pour les couleurs.

C’est le cas sur le site Accor Hotels Group, où les options d’accessibilité permettent à l’utilisateur de faire plusieurs réglages pour améliorer la lisibilité du site, notamment de changer la police de caractères au profit d’une police adaptée à la dyslexie.

Avant, polices de caractères par défaut de la charte :

Après, les mêmes textes avec la police adaptée choisie par l’utilisateur :

Conclusion

Pour résumer, pour rendre accessible un site web dès la phase de design, il faut vérifier si des compromis et des adaptations de la demande initiale sont acceptables.

• Si oui, super !
• Sinon, il faut proposer une alternative accessible à ce qui pose un problème d’accessibilité.

La vie est bien faite : il existe des alternatives accessibles pour toutes les problématiques de design web. Je n’en ai évoquées que quelques-unes dans cet article, mais il en existe bien d’autres.

La vieille croyance selon laquelle l’accessibilité ferait peser une contrainte graphique sur les sites, qui seraient de facto « forcément moches » s’ils sont accessibles, provient peut-être du fait qu’on a longtemps eu une vision jusqu’au-boutiste de l’accessibilité, ce qui a pu aboutir à des résultats graphiques malheureux.

A contrario, une approche basée sur l’adaptabilité et le compromis permet de concevoir facilement un site chouette et accessible dès la phase de design, sans sacrifier l’esthétique et sans contrarier vos clients, vos chefs de projet ou le service marketing.

S’il y a d’autres questions que vous vous posez à propos du design accessible, alors notre formation au design accessible vous permettra d’acquérir les bons réflexes.

À bientôt !