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.
Concevoir accessible : principe et fonctionnement
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.
Les 10 bases à connaître pour concevoir un site web accessible à tous les utilisateurs
Voici les 10 points indispensables à prendre en compte pour les designers UX/UI :
1/ Les couleurs et contrastes
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.
2/ Les zooms
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.
3/ Les images et alternatives textuelles
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.
4/ Les informations sonores ou visuelles
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 :
- Inférieures à 5 secs
- Contrôlables (play/pause)
- Masquables
- Désactivables - c’est le principe du play/pause/hide dans le WCAG, qui constitue le texte de référence international.
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).
5/ Les parcours de navigation
É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.
6/ La mise en page
Interligne
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’espacement entre les lignes (line-height) est augmenté jusqu’à 1,5 fois la taille de la police ;
- L’espacement suivant les paragraphes (balise <p>) est augmenté jusqu’à 2 fois la taille de la police ;
- L’espacement des lettres (letter-spacing) est augmenté jusqu’à 0,12 fois la taille de la police ;
- L’espacement des mots (word-spacing) est augmenté jusqu’à 0,16 fois la taille de la police.
Orientation
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.
7/ La navigation au clavier
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.
8/ Responsive web design
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.
9/ Le dark mode
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.
10/ Le langage employé
Vérifier la clarté du langage employé en respectant quelques consignes de base :
- Ne pas utiliser de mots et de phrases compliqués
- Toujours penser aux déficients cognitifs, mais aussi aux non-initiés dans la production de contenus
- Éviter les termes jargonneux : expliciter les acronymes et abréviations et si besoin les définir
Quels sont les avantages liés à la conception accessible ?
L’accessibilité pour tous - un engagement RSE
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
Optimisation du référencement - le SXO
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.
Une perspective d’avenir
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.
Une démarche en phase avec les nouveaux usages
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.
