Rendre un site web accessible passe par une série de bonnes pratiques à respecter dès le départ. Un travail de longue haleine pour les concepteurs UX/UI certes, mais payant en matière de résultats. Dans cet article, vous allez voir tous les avantages d’une telle stratégie - en plus des bases à connaître pour concevoir accessible, comme promis. Mais d’abord, pour y voir plus clair, découvrez rapidement en quoi consiste la conception accessible.
Qu’est-ce que la conception accessible ? La conception accessible comporte de nombreux enjeux, dont celui de favoriser l’inclusion sociale des personnes en situation de handicap. Mais lorsque l’on parle de l’accessibilité de manière globale, elle concerne tout le monde, et offre un bénéfice à l’ensemble des utilisateurs.
|
Bon à savoir Par extension, la conception universelle ou l'accessibilité universelle, dans la stratégie d'expérience utilisateur (UX), s’adresse aussi bien aux personnes handicapées, qu’aux seniors et à tous les utilisateurs - en considérant les besoins de chaque catégorie de personne ainsi que leur spécificité quant à la navigation sur le web. |
Pour tout dire, concevoir accessible offre un accès égal aux outils numériques et permet donc à tout le monde de profiter des mêmes avantages. Car une conception sans prise en compte de l’accessibilité des différents utilisateurs présente des risques pour l’expérience de navigation et l’inclusion. Ce qui peut « handicaper » ou mettre à l’écart n’importe quel citoyen : vous, moi…
C’est pourquoi, lors de la création d’un outil/service numérique, il est important de considérer la conception accessible afin que personne ne soit oublié et d’éviter toute forme de discrimination. En particulier, les personnes en situation de handicap.
Voici les 10 points indispensables à prendre en compte pour les designers UX/UI :
Optimiser le contraste du contenu pour une meilleure perception visuelle. Les couleurs (de premier plan et de fond) doivent avoir un contraste suffisant entre elles (ratio de 4.5 minimum). Il faut aussi que la typographie soit facilement perceptible pour donner une lisibilité optimale. Privilégier les polices Sans-Serif.
Faire en sorte que le zoom soit possible et que l’information reste compréhensible.
Astuce : Anticiper une version mobile de l’interface permet de pallier ce point et d’afficher une version zoomée tout le temps lisible. En effet, à partir d'un zoom à 175%, le site passe automatiquement en version mobile.
S’assurer de l’usage de l’image (décorative ou informative). Optimiser celle-ci avec notamment l’insertion d’une alternative textuelle pertinente. Utiliser ce texte alternatif dans l’attribut Alt est non seulement utile pour décrire les images au moteur de recherche, mais aussi (et surtout) parce qu’il est utilisé par les lecteurs d'écran pour fournir un contexte aux utilisateurs malvoyants.
Le + : c'est aussi utile pour les connexions internet trop basses pour charger des images, on va alors privilégier d’afficher l'alternative.
Bien prendre en compte les différents handicaps et retranscrire convenablement les informations non accessibles au premier abord.
De nombreuses solutions existent pour les personnes malvoyantes ou sourdes telles que la transcription textuelle, le sous-titrage ou encore la traduction en langue des signes.
Il est également important de penser aux troubles cognitifs et de prévoir de pouvoir contrôler ces outils. En ce qui concerne l’usage des animations, plusieurs points doivent être vérifiés. Les animations doivent être soit :
Aussi, les animations ne doivent pas avoir plus de 3 flashs par seconde (si applicable).
|
Bon à savoir
Une animation de téléchargement sera considérée comme essentielle si elle bloque toute action sur la page. De la même manière, une animation qui est le seul élément sur une page ne sera pas concernée par le critère.
|
Un conseil : ajoutez un bouton pour désactiver les animations (dans le footer ou les paramètres par exemple).
Éviter les navigations trop complexes. Privilégier la simplicité des pages et des formulaires aussi. Sinon, fournir des éléments d’information ou solution alternative quant à l’utilisation des composants complexes afin de permettre aux utilisateurs de contourner les difficultés.
Selon les critères WCAG, l’interligne entre les blocs de textes peut être de 150/200 % (line-height : 150 %) afin de faciliter la lecture pour les personnes avec des handicaps cognitifs.
Le RGAA nous demande de respecter les espacements suivants :
L’orientation doit correspondre aux paramètres de l’utilisateur : on peut la bloquer en paysage ou portrait par exemple. Dans ce cas-là, l’orientation doit cadrer avec l’option choisie. Il est préférable en amont de prévoir une utilisation dans les 2 orientations et donc de créer des écrans adaptés à toutes les situations.
Si l’utilisateur n’a pas bloqué l’orientation, on doit afficher celle qui correspond à l’orientation du device.
Exceptions : les contenus qui ne fonctionnent que selon une certaine orientation (type application pour « Jouer du piano ») ou si la technologie utilisée empêche le changement d’orientation.
S’assurer de la navigation au clavier et permettre l’accessibilité des fonctionnalités depuis le clavier. En effet, les interactions avec le clavier sont importantes au même titre que l’interaction à la souris. Il est donc très important de s’assurer que le focus soit visible afin que l'utilisateur puisse savoir où il se trouve lorsqu'il navigue au clavier.
Le responsive web design est à prévoir dès le départ. En effet, il est important d’adapter son contenu aux petits écrans - surtout pour les utilisateurs malvoyants doublement lésés avec des problèmes sous-jacents par rapport à l’utilisation sur desktop.
Le dark mode (fond noir, texte clair) est de plus en plus répandu, il est donc indispensable de s’assurer que le contenu du site soit parfaitement lisible pour l'utilisateur lorsqu’il le consulte sur un device en mode sombre.
On peut également prévoir en amont un dark mode et ainsi, créer deux versions du même design.
Lorsqu'il est bien fait, le mode sombre peut améliorer l'accessibilité. Cette tendance de conception a gagné en popularité depuis les deux dernières décennies. Bien qu’elle divise, le switch entre light/dark donne aux utilisateurs le choix de consulter votre site selon leurs préférences.
Vérifier la clarté du langage employé en respectant quelques consignes de base :
La conception accessible, ou l’accessibilité web au sens large, s’inscrit parfaitement dans les politiques RSE des entreprises. Politiques qui sont devenues un critère de distinction dans les appels d’offres et un véritable potentiel économique.
La responsabilité sociale d’une entreprise lui donne une meilleure image de marque afin de se distinguer et d’attirer davantage les investisseurs, clients et talents potentiels.
À lire notre article : Accessibilité et numérique responsable
L’accessibilité web en permettant de toucher le plus grand nombre répond aux enjeux du SXO : le SEO en fonction de la qualité de l’UX (ou l’interaction du SEO et de l’UX).
L'UX est donc un moyen d'améliorer votre référencement naturel dans la mesure où il permet à tous les internautes de naviguer aisément et de se sentir concernés, qu’ils soient en situation de handicap ou pas. Il n’y a en effet aucune distinction lorsqu’ils parcourent le site et cela les encourage à y rester plus longtemps.
La réglementation va dans ce sens. Auparavant, les obligations légales ne concernaient que les institutions publiques (loi du 11 février 2005).
Le décret de juillet 2019 est venu étendre l’obligation d’accessibilité au secteur privé
En France et ailleurs, les autorités concernées ont établi des règles et normes afin de promouvoir l’accessibilité numérique.
Parallèlement, la nouvelle directive européenne sur l'accessibilité veut supprimer les obstacles créés par les différentes règles divergentes au sein des pays de l’UE.
C’est à dire la prise de conscience collective et individuelle accrue en faveur d’une société plus inclusive.
Aujourd’hui, maîtriser la conception accessible permet de se démarquer. Dans les profils de recrutement par exemple, ce sont des compétences qui vont être demandées.
La démarche de conception accessible est profitable à tous, n'importe qui en situation de handicap temporaire ou lié à l'âge en bénéficie au quotidien et va ainsi dans le sens de l'histoire.
Prenez en compte ces données dès maintenant et prenez de l’avance sur vos concurrents.