Sommaire
L’accessibilité d’un site internet par tous permet une expérience utilisateur optimale. Et pour cela, la direction interministérielle du numérique, le DINUM, édite un référentiel qui offre toutes les clés pour améliorer cette accessibilité numérique.
Je vous propose un tour d’horizon des 15 points à travailler pour vérifier l’accessibilité de votre site internet, selon les préconisations du Référentiel général d’amélioration de l’accessibilité, le RGAA.
Qu’est-ce que le RGAA et à quoi cela sert ?
Le RGAA, Référentiel général d’Amélioration de l’Accessibilité, est un document édité par la direction interministérielle du numérique. Il indique les points clés à travailler pour rendre votre site internet accessible à tous les profils d’utilisateurs.
Quel que soit le type de handicap, toutes les informations, éléments visuels ou sonores, ainsi que les médias doivent être compréhensibles, intelligibles et saisissables par tous.
Des critères de tests sont mis en place afin de vérifier que le respect des normes d’accessibilités numériques est bien respecté et que les correspondances avec les normes européennes et internationales soient effectives.
Comprendre les troubles de vos utilisateurs
Il existe 4 troubles liés à l’accessibilité du web.
- Les troubles visuels
- Les troubles moteurs
- Les troubles du langages
- Les troubles auditifs
Troubles visuels
Les personnes aveugles ne peuvent pas lire la page d’un site, c’est pourquoi ils utilisent des lecteurs d’écrans.
Les informations sont restituées par un assistant vocale qui passe en revu le contenu de votre site et le transmet à l’utilisateur.
Certains utilisateurs sont malvoyants, ce qui signifie qu’ils ont des difficultés à lire le contenu de votre site. La fatigue visuel fait également partie des troubles visuels.
Troubles moteurs
Les troubles moteurs regroupent une grande partie des situations de handicap. Je vais vous parlez des handicaps plus couramment rencontrées sur le web :
- Trouble qui ne permet pas à l’utilisateur d’utiliser un clavier ou une souris.
- Difficultés de contrôle des mouvements
- Difficultés pour l’enchaînement de plusieurs actions et ou difficulté pour utiliser une combinaison de touches. (Raccourcis clavier)
Troubles du langages et compréhension
Les troubles du langage et de la compréhension sont souvent liés à un handicap mental. Les troubles sont caractérisés par l’incompréhension lors de la lecture ou l’utilisation d’un contenu.
Plus d’informations sur ce type d’utilisateur : Voir le PDF
Troubles auditifs
Les personnes sourdes et malentendantes vont également rencontrer des difficultés avec certaines informations sonores et vidéo.
15 points RGAA pour vérifier l’accessibilité de votre site internet
Navigation
Afin de rendre l’accessibilité numérique abordable, la navigation au sein de chaque interface doit être fluide et structurée. Ainsi, le menu de navigation, le plan du site, un moteur de recherche doivent être présents sur chacune des pages de votre site internet.
Ces éléments guident l’utilisateur à travers vos pages et lui permettent de prendre le chemin le plus approprié pour atteindre une information particulière.
L’UX Designer doit alors constamment se mettre à la place de l’utilisateur pour établir un cheminement simple et clair. Les tests utilisateurs vous permettent également de rectifier ce chemin afin de le rendre le plus communément logique.
1 – Types de navigations
La structure de navigation doit être visible pour les utilisateurs. Ceux-ci doivent percevoir distinctement le menu de navigation principale, les tables des matières ou les sommaires de chacun des articles du site, le plan de votre site ainsi que le moteur de recherche.
Pour cela, il est important de rendre ces éléments bien visibles et surtout accessibles. Si les utilisateurs naviguent aisément sur l’interface, leur expérience n’en sera que meilleure.
2 – Navigation au clavier
En matière d’accessibilité numérique, tout type de handicap potentiel doit être envisagé par l’UX Designer lors de la conception de la maquette de son site. En effet, cette notion d’accessibilité numérique consiste à fournir des interfaces visiblement perceptibles, compréhensibles et robustes.
Mais aussi, l’interface se doit d’être utilisable. Et pour cela, la navigation au clavier permet d’assurer le bon fonctionnement du site en utilisant la souris et le clavier et de garantir que l’ordre de tabulation se fasse dans une logique de lecture agréable.
Dans cette catégorie de critère imposée par le RGAA, l’utilisateur doit alors pouvoir accéder à son clavier aussi bien de la main gauche, que de la main droite en ne manipulant qu’une seule touche à la fois.
Par exemple, lorsque vous intégrez des raccourcis clavier, pensez à l’utilisateur qui est dans l’incapacité d’appuyer sur deux touches simultanément.
Les textes
Lors de la rédaction de vos contenus web, il est important de donner du sens à vos titres afin que l’utilisateur puisse comprendre en quelques secondes les thèmes abordés dans le texte.
Pour cela, il est primordial de respecter la hiérarchisation des titres et des sous-titres afin de donner une structure logique à l’ensemble du contenu.
Mais aussi, la taille de la police de vos textes doit être adaptée pour que la lecture ne requiert pas d’effort cognitif supplémentaire. Enfin, il est nécessaire d’adapter les contenus vidéo pour y intégrer des sous-titres par exemple ou une traduction en langue des signes si votre audience cible est concernée.
3 – Donnez du sens à vos titres
Lorsqu’un lecteur arrive sur une page web, les titres sont les premiers éléments du contenu qui attirent leur regard. Dans le cadre de l’accessibilité numérique, le RGAA recommande de les mettre en évidence en suivant une logique de hiérarchisation.
De cette manière, l’utilisateur comprend instinctivement les différents sujets abordés dans le texte. À la seule lecture des titres ainsi que des sous-titres, le lecteur doit déjà savoir si le contenu va lui apporter toutes les réponses à ses questions. Le rédacteur droit prend en compte cette notion et l’UX Designer doit le mettre en forme.
4 – RGAA : Respectez la hiérarchisation des titres
La hiérarchisation des titres consiste à mettre au début du texte les titres les plus pertinents correspondant aux parties qui vont répondre aux questions des utilisateurs.
Ainsi, dans une structure qui respecte les normes du RGAA, le début du contenu répond directement et sans détour à la question que se pose l’utilisateur, puis le reste du texte apporte des compléments d’information.
Pour mettre en application ce point clé, pensez juste que le lecteur est un consommateur d’information pressé ! S’il trouve sa réponse rapidement, il sera plus convaincu de lire la suite du contenu !
5 – Adapter la taille de vos textes
L’accessibilité numérique concerne également l’adaptation de la taille de la police de vos textes. Une police trop petite risque de fatiguer les yeux et donc augmente le taux de rebond.
A contrario, une police trop grande peut sembler quelque peu agressive et risque également de provoquer l’abandon de la lecture. Pour pallier cela, en tant qu’UX Designer, utilisez une police classique et proposez la possibilité de zoomer les contenus, aussi bien sur PC que sur mobile !
6 – Adapter vos contenus vidéo
Lorsque vous décidez de mettre un contenu vidéo sur votre site, il est essentiel de l’adapter aux conditions d’accessibilité numérique préconisées par le RGAA. Vous pouvez également insérer une audio-description synchronisée ou des sous-titres synchronisés pour chacune de vos vidéos.
En tant qu’UX Designer, faites également en sorte que les vidéos soient de bonne qualité et leur son clairement audible. Aussi, pour une expérience utilisateur optimale, mettez à la disposition de l’internaute un lien vers la retranscription textuelle du média en question.
Images et icônes
Les images et les icônes sont des éléments-clés, dont la résolution se doit d’être impeccable sur une interface ! Non seulement il en va de la crédibilité de votre site, mais bien sûr de l’optimisation de l’expérience utilisateur.
7 – La couleur ne suffit pas
Les couleurs représentent l’identité visuelle d’un site internet. Mais qu’en est-il côté utilisateur ? Le RGAA rappelle que l’accessibilité numérique concerne tous les utilisateurs, quel que soit le contexte handicapant dans lequel il se présente.
Ainsi, lorsqu’il s’agit de couleur, il est important de prendre en compte le spectre de déficiences visuelles et d’adapter les couleurs de votre site en conséquence. Pour l’UX Designer, il peut sembler plus cohérent de proposer un site avec une palette de couleurs répondant à la charte graphique initiale, avec la possibilité d’accéder au même site avec une palette plus adaptée.
8 – Donnez une alternative textuelle
Rendre accessible un média, en l’occurrence une vidéo, une image ou un podcast, c’est le rendre lisible pour tous les profils d’utilisateurs de l’interface. Pour cela, il est relativement simple de mettre à la disposition des utilisateurs une alternative textuelle à vos médias.
Un lien leur permettant de lire le contenu d’une vidéo ou d’un podcast est une bonne solution et, qui plus est, rapide à mettre en place. Mais aussi, un court texte descriptif d’une photo peut rendre la navigation plus confortable.
Formulaires
9 – Un formulaire accessible pour tous
L’accessibilité des champs d’un formulaire permet à l’utilisateur de fournir toutes les informations utiles à sa démarche. Pour lui faciliter cette action, mettez à leur disposition des étiquettes pertinentes ainsi que des champs obligatoires afin de minimiser l’apparition de messages d’erreur.
D’ailleurs, l’idéal est de faire en sorte que l’internaute remplit tous les champs du formulaire sans commettre aucune faute ! Par exemple, pour le champ « numéro de téléphone », prévoyez 10 cases afin d’en assurer le bon remplissage.
Programmez également la conservation des informations pour que l’utilisateur puisse les retrouver ultérieurement sans avoir à les fournir de nouveau. Soyez explicite dans l’intitulé des champs et n’hésitez pas à rendre « obligatoire » certaines lignes afin d’obtenir des informations complètes dès le premier remplissage du formulaire par l’utilisateur.
Couleur et Style
10 – Le contraste est-il suffisant ?
Pour que les expressions clés d’un contenu soient parfaitement visibles, leur mise en évidence peut prendre plusieurs formes. Cependant, il est important d’accorder une attention particulière au contraste entre les différents éléments.
Par exemple, est-ce que la couleur du logo est clairement distinguable avec la couleur de fond de la page ? Cette question se pose pour chacun des éléments que vous souhaitez mettre sur le site : les boutons d’appel à action, les images, les couleurs du texte, les titres insérés dans les images, etc.
11 – Site lisible sans feuille de style CSS
L’ensemble du site, et plus particulièrement les images, doit être accessible sans devoir être reproduit en CSS. En effet, la lecture de la mise en forme des pages en XML ou en HTML rend l’accessibilité numérique du site plus complexe à vérifier.
Autres
12 – Des actions compréhensibles
L’accessibilité numérique RGAA concerne également la mise à disposition des actions compréhensibles par l’ensemble des utilisateurs. Pour cela, les éléments graphiques doivent s’interpréter simplement, les formulaires disponibles, et la mise en forme globale logique.
13 – Comprendre et valider les actions irréversibles
L’utilisateur doit comprendre et valider toutes les actions irréversibles qu’il accomplit. Par exemple, lors de la soumission d’un formulaire, vous devez indiquer clairement à l’internaute qu’après avoir validé son action, il ne lui sera plus possible de revenir en arrière pour effectuer d’éventuelles corrections.
14 – Proposer plusieurs solutions de contact
Dans le cade de l’accessibilité numérique, le RGAA indique qu’il est convenable de proposer plusieurs solutions de contacts aux visiteurs. Indiquez de façon visible un numéro de téléphone, une adresse mail ou un formulaire de contact.
15 – L’utilisation du CAPTCHA
Lorsque l’interface que vous êtes en train de concevoir nécessite la mise en place de captcha graphique, proposez aux utilisateurs des versions alternatives telles qu’une version audible. Il est aussi important de bien spécifier la raison d’être de ce système de sécurité afin de rassurer le visiteur.
