Les normes d’accessibilité se resserrent ! De plus en plus d’acteurs seront concernés par l’obligation de mise en conformité de leur site web sous peine de lourdes sanctions. Mais comment rendre son site plus accessible ? Quelles sont les bonnes pratiques à suivre.
Définition et fondamentaux de l’accessibilité numérique
Selon le site gouvernemental du Design Numérique , l’accessibilité numérique “consiste à rendre les contenus et services numériques compréhensibles et utilisables par les personnes en situation de handicap”.
En France et en Europe, elle est standardisée par un ensemble de règles internationales, le WCAG 2.1, qui en détermine 4 principes fondamentaux :
- Etre Perceptible L’information et les éléments de l’interface utilisateur doivent être présentés de manière à être facilement perceptibles par l’utilisateur. Cela implique de proposer une alternative textuelle mais aussi adapter l’affichage selon les différents devices sans générer de perte d’information. La structure des pages doit permettre de bien distinguer les contenus pour en permettre la compréhension organisationnelle.
- Etre Utilisable Le site doit être utilisable par tous, même sans connaissance préalable de son fonctionnement. Toutes ses fonctionnalités doivent donc être accessibles au clavier, les contenus doivent rester affichés assez longtemps pour permettre leur lecture et leur compréhension, et les éléments de navigation doivent être bien visibles et faciles d’accès.
- Etre Compréhensible Les utilisateurs doivent pouvoir saisir le sens des contenus textuels, ceux-ci devant donc être affichés de manière claire et lisible. Les pages et éléments audiovisuels ne doivent pas apparaître de manière soudaine afin d’éviter de troubler l’utilisateur. Les contenus similaires doivent être clairement regroupés et les parcours doivent suivre une logique.
- Etre Robuste Le contenu doit être suffisamment robuste pour être interprété de manière fiable par un large éventail d’utilisateurs, y compris ceux utilisant des technologies d’assistance. Il doit être compatible avec tous les navigateurs et systèmes d’exploitation.
Bonnes pratiques
Toutes les bonnes pratiques d’accessibilité sont formulées dans le WCAG 2.1. Une majeure partie de ces règles sont universelles mais s’appliquent aussi au cas par cas. Il convient toujours d’évaluer la pertinence d’une règle pour un contenu donné, ce qui vous permettra d’établir des priorités et d’avoir une vision plus atteignable de vos objectifs de conformité (ex : prioriser les alternatives uniquement pour les contenus porteur d’information). Nous vous invitons à lire le référentiel complet, mais voici une liste non-exhaustive des règles que vous pouvez facilement intégrer à votre site web (quelque soit sa taille) :
1. Images
- Chaque image porteuse d’information possède une alternative textuelle (cette règle s’applique à tous les contenus non-textuels)
- Chaque légende d’image est correctement reliée à l’image correspondante
- Chaque image de décoration (non-porteuse d’information) est correctement ignorée par les technologies d’assistance
- Chaque image porteuse d’information possède, si nécessaire, une description détaillée
2. Couleurs
- Dans chaque page web, l’information ne doit pas être fournie uniquement par la couleur
- Dans chaque page web, le contraste de couleur entre la couleur du texte et la couleur de l’arrière-plan doit être suffisamment élevé
- Dans chaque page web, les couleurs des composants de l’interface ou les éléments graphiques porteurs d’informations sont suffisamment contrastées
3. Multimédias
- Chaque média temporel (audio ou vidéo) a une solution de remplacement, comme une transcription textuelle ou une audiodescription
- Chaque média temporel est clairement identifié
- Chaque média non-temporel (carte interactive, diaporama, etc.) doit avoir une alternative
- Chaque média temporel doit être contrôlable par le clavier et tout dispositif de pointage
- Chaque média non-temporel doit être contrôlable par le clavier et tout dispositif de pointage
- Chaque média non-temporel doit être compatible avec les technologies d’assistance
4. Liens
- Chaque lien est explicite
- Dans chaque page web, chaque lien a un intitulé
5. Structuration et présentation de l’information
- Chaque page web a un titre de page
- Dans chaque page web, l’information est structurée par l’utilisation appropriée de titres (H1, H2, H3, etc.) — les titres ne doivent pas être utilisés uniquement à des fins décoratives
- Dans chaque page web, chaque liste est correctement structurée
- Dans chaque page web, chaque citation est correctement indiquée
- Dans chaque page web, le texte reste lisible lorsque la taille des caractères est augmentée jusqu’à 200 %, au moins
- Dans chaque page web, chaque changement de langue est indiqué dans le code source
- Pour chaque page web, les contenus cachés ont vocation à être ignorés par les technologies d’assistance
6. Navigation
- Dans chaque ensemble de pages, le menu et les barres de navigation sont toujours à la même place
- Le “plan du site” doit être accessible depuis toutes les pages et depuis le même emplacement
- Dans chaque ensemble de pages, le moteur de recherche est atteignable de manière identique
- Dans chaque page web, l’ordre de tabulation est cohérent
7. Formulaires
- Chaque champ du formulaire possède une étiquette
- Chaque étiquette de champ et son champ associé sont accolés
- Les champs de même nature sont regroupés si nécessaire et leur regroupement porte une légende
- L’intitulé de chaque bouton est pertinent
- Le contrôle de saisie est accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie
- La finalité d’un champ de saisie peut être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur
Répondre aux bonnes pratiques d’accessibilité c’est finalement pas une contrainte mais une occasion de proposer l’expérience utilisateur la plus complète, agréable et logique pour un maximum de personnes !
Si vous avez des questions ou que vous souhaitez mettre votre site en conformité avec les normes d’accessibilité, nous pouvons vous proposer un accompagnement personnalisé (de l’audit à la maintenance corrective, en passant par la mise en place d’un plan d’action) 🚀
Pour retrouver toutes les règles d’accessibilité et comment les vérifier : RGAA 4.1 : Critères et tests - Portail de l'accessibilité numérique
