Aujourd’hui, entre 15% et 20% de la population souffrent d’un handicap. L’accessibilité numérique est une obligation légale et un enjeu d’égalité des droits.
Elle permet aux personnes en situation de handicap, qu’il soit moteur, visuel, auditif, cognitif ou psychique, d’accéder aux contenus en ligne dans des conditions équitables.
Rendre un site accessible, c’est prendre en compte les besoins des personnes handicapées : personnes malvoyantes, sourdes, atteintes de déficience cognitive mais aussi aux seniors ou à ceux en situation temporaire de handicap.
L’accessibilité des sites internet fait référence à la capacité des personnes handicapées à utiliser les Technologies de l’Information et de la Communication (TIC) de manière indépendante et équivalente à celle des personnes valides pour être incluses pleinement à la société numérique.
Cet article présente la norme internationale WCAG (Web Content Accessibility Guidelines), y compris WCAG 2.0, WCAG 2.1 et WCAG 2.2. Les documents WCAG expliquent comment rendre le contenu Web plus accessible aux personnes handicapées selon W3C.
Découvrez aussi quelles sont les étapes pour l’intégration de l’accessibilité web dans un produit ?
Mesurer le niveau d’accessibilité web de votre site
L’évaluation doit se faire dès la conception du site, avec des contrôles réguliers à chaque étape du projet (design, développement, recette, production).
Par exemple, tester les maquettes pour les contrastes, réaliser des audits techniques en pré-production et des tests fonctionnels et utilisateurs avant la mise en ligne.
Parmi les outils les plus utilisés, on trouve :
- Accessibility Checker : inspecte le contenu en trois étapes pour détecter et résoudre les problèmes.
- WAVE : analyse la structure HTML, les contrastes de couleurs, les alternatives textuelles et génère une copie annotée de la page analysée.
- Axe : un outil open-source qui analyse leurs pages respectant les normes d’accessibilité, comme les WCAG (Web Content Accessibility Guidelines).
Vous pouvez également opter pour un audit manuel, réalisé par des experts formés aux principaux standards d’accessibilité, tels que le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) et les WCAG (Web Content Accessibility Guidelines).
Ces audits contrôlent tous les critères applicables, évaluent la conformité du site et identifient les corrections à apporter.
| 💡 Le conseil d’Ethiko En complément, incluez des tests utilisateurs avec des personnes en situation de handicap pour mieux comprendre les difficultés rencontrées et améliorer l’expérience réelle des utilisateurs. |
11 points essentiels de l’accessibilité numérique dès le création d’un site web
1. Conception accessible
Un critère légal, en particulier pour les sites publics, l’accessibilité du site internet va au-delà de l’esthétique et de la structure.
Respecter les normes d’accessibilité numérique, telles que les WCAG (Web Content Accessibility Guidelines).
- Assurez-vous que l’affichage des contenus et les fonctionnalités sont accessibles aux personnes handicapées.
- Prévoir des alternatives pour les contenus multimédias comme les images, les vidéos, les fichiers audio. Ajoutez des sous-titres aux vidéos et des transcriptions aux audios pour les malentendants.
- S’assurer que les textes et les images ont un contraste suffisant avec leur arrière-plan pour être lisibles par les personnes malvoyantes ou souffrant de daltonisme.
- Faire grossir les textes et les images afin de les rendre plus lisibles pour les utilisateurs ayant des troubles de la vision.
- Permettre aux utilisateurs de faire lire les textes à haute voix pour les personnes ayant des troubles de la lecture.
- Mettre des fonctionnalités de saisie de commandes vocales à travers les contenus et les fonctionnalités. Servez-vous des commandes vocales pour les personnes ayant une mobilité réduite.
- Mettre en place un texte alternatif (attribut alt) pour les lecteurs d’écran.
- Continuer de se perfectionner en matière d’accessibilité en se tenant informé des dernières normes, des lois d’accessibilité handicap et des meilleures pratiques à mettre en place.
- Utiliser un CMS adapté à l’accessibilité : WordPress, Jumia, Drupal
2. Navigation accessible
La navigation permet à tous les utilisateurs utilisant un clavier, un lecteur d’écran ou tout autre dispositif d’assistance de se repérer et de circuler facilement sur le site.
Pour facilement parcourir à travers les contenus et les fonctionnalités des sites web et des applications, voici des exemples :
- Disposer d’une barre de navigation claire et intuitive : à placer en haut de chaque page du site pour naviguer librement.
- Ajouter des liens de navigation clairs et compréhensibles pour naviguer facilement.
- Mettre en place des boutons de navigation clairs et cohérents.
- Inclure une table des matières pour explorer simplement les contenus et les fonctionnalités.
- Insérer une fonction de recherche pour trouver rapidement les informations et les fonctionnalités recherchées.
- Utiliser des <labels> pour les éléments de formulaire et les boutons pour aider les utilisateurs à les identifier. L’élément HTML <label> représente une légende pour un objet d’une interface utilisateur.
- Intégrer des titres de section pour l’organisation des éléments.
- Inclure des descripteurs d’images pour permettre aux utilisateurs ayant des troubles de la vision de comprendre le contenu de l’image.
- Maintenir une structure de navigation relativement similaire sur toutes les pages du site pour s’y familiariser.
- Ajouter un fil d’Ariane (breadcrumb) pour comprendre où l’on se trouve dans le site.
- Vérifier que les éléments interactifs : liens, boutons, champs de formulaire sont atteints avec la touche Tab, dans un ordre logique.
3. Mise en forme
Une bonne mise en forme aide à la compréhension rapide du contenu.
1 personne sur 12 est daltonienne : votre message doit rester lisible.
- Utiliser des balises sémantiques HTML (H1, H2, etc.) appropriées pour structurer les contenus et les informations
- Limiter les blocs de texte trop longs : donner place aux paragraphes courts et aérés, faciles à lire.
- Employer des tailles de police lisibles : au moins 16 px pour le corps de texte
- Aligner le texte et éviter le texte justifié qui crée des espaces irréguliers
- Éviter les effets de style inutiles : ne pas abuser des textes en majuscules, en italique ou soulignés qui gênent la lecture.
- Accompagner les contenus visuels de descriptions textuelles adaptées.
- Utiliser les couleurs avec précaution.
| 💡 Le conseil d’Ethiko Pour tester les contrastes de couleurs, WebAIM Contrast Checker est un bon outil pour le faire. |
4. Structure
- Organiser l’information de chaque page de façon clair les informations avec des titres et des sous-titres
- Ajouter des listes à puces et des paragraphes pour organiser les contenus.
- Créer des tableaux pour les informations structurées.
- Utiliser des images pour illustrer les contenus et les informations
- Utiliser des liens pour relier les contenus entre eux.
Découvrez plus l’accessibilité, lisez quels sont les différents déficits couverts par l’accessibilité numérique
5. Interaction
Les interactions doivent être simples et intuitives, particulièrement pour les personnes en situation d’handicap.
Voici 3 conseils d’Ethiko :
- Utiliser des conventions courantes : le bouton “Envoyer” doit envoyer un formulaire et le lien “Accueil” doit renvoyer à la page d’accueil.
- Créer des étiquettes claires : le chemin d’un bouton ou d’un lien doit être explicite.
- Mettre des icônes pour des actions courantes : insérez des animations pour aider les utilisateurs à comprendre comment les éléments sont liés les uns aux autres.
6. Feedback
Il s’agit de fournir des retours visibles et audibles à chaque action de l’utilisateur : validation de formulaire, message d’erreur, chargement en cours, etc…
- Générer des messages de confirmation : une manipulation doit être suivie de sa finalité.
- Utiliser des notifications pour informer des mises à jour ou des événements importants sans qu’ils aient besoin de quitter l’application ou le site web.
- Donner accès à des indicateurs de progression pour donner une idée de combien de temps il reste avant la fin de l’opération.
- Employez des guides de démarrage pour favoriser la compréhension du fonctionnement du site.
Vous souhaitez vous faire accompagner ? Contactez notre agence d’éco conception web
7. Compatibilité avec les technologies d’assistance
Pour être véritablement accessible, un site web se doit de fonctionner correctement avec les technologies d’assistance pour les personnes handicapées.
Tester régulièrement la compatibilité entre votre site et ses fonctions afin de garantir leur exécution.
Tenez compte de l’accessibilité numérique dès la conception de votre site ou application pour éviter les coûts supplémentaires d’adaptation ultérieure.
Voici les technologies d’assistance :
| Technologie d’assistance | Fonction | Outils |
| Lecteurs d’écran | Lire à voix haute le contenu affiché à l’écran | NVDA, JAWS, VoiceOver (Apple), TalkBack (Android) |
| Plages braille électroniques | Afficher le texte en braille pour les utilisateurs aveugles | HumanWare Brailliant, Focus Blue (Freedom Scientific) |
| Reconnaissance vocale | Contrôler l’ordinateur et dicter du texte à la voix | Dragon NaturallySpeaking, Commande vocale (Apple, Google) |
| Claviers adaptés / virtuels | Saisir du texte ou contrôler l’interface sans clavier physique | Clavier visuel Windows, PredictiveText, Tobii Dynavox |
| Contacteurs / Switchs | Naviguer et interagir avec un ou plusieurs boutons | AbleNet, Tecla, Sip-and-Puff |
| Loupes d’écran / Zoom | Agrandir le contenu pour une meilleure lisibilité | ZoomText, Loupe Windows, Zoom iOS |
| Outils de contraste / couleurs | Modifier les couleurs pour améliorer la lisibilité | High Contrast Mode (Windows), extensions Chrome (Color Enhancer) |
8. Personnalisation
Les personnes en situations de handicap doivent pouvoir personnaliser les technologies pour ajuster à leurs exigences spécifiques.
Voici 7 bonnes pratiques :
- Ne pas bloquer le zoom via meta viewport ou CSS : laisser le contenu lisible jusqu’à 200 % de zoom, sans chevauchement ni perte d’information.
- Respecter les préférences système de l’utilisateur : utiliser des requêtes media CSS comme :
prefers-reduced-motion : pour désactiver les animations.
prefers-color-scheme : pour proposer un thème clair/sombre.
- Éviter les styles forcés : ne pas surcharger les styles utilisateur avec des !important qui bloquent les feuilles de style personnalisées
Exemple : extension pour dyslexie
- Appliquer des unités relatives (em, rem, %) plutôt que fixes (px) pour que le texte suive les préférences utilisateur.
- Fournir des options de personnalisation côté interface : ajouter un sélecteur de contraste, contrôle de taille de texte
- Préserver des textes sélectionnables et copiables : ne pas désactiver la sélection de texte
| 💡 Le conseil d’Ethiko Les unités relatives respectent le responsive design et sont maintenables en changeant une seule valeur racine (html). Ce qui ajuste tout le site. |
9. Accessibilité numérique des documents
Les documents téléchargeables tels que les PDF, Word, PowerPoint disponibles sur le site web doivent être consultables par tous.
3 conseils pour ce faire :
- Étiqueter les champs de formulaire dans les fichiers interactifs (Exemple : PDF).
- Opter pour des formats accessibles ou proposer une alternative HTML lorsque c’est possible.
- Contrôler la conformité avec des outils comme PAC (PDF Accessibility Checker) ou les fonctions d’accessibilité d’Adobe Acrobat.
Vous souhaitez vous faire accompagner ? Contactez notre agence d’éco conception web
10. Soutien
Proposer des aides à la compréhension et à l’usage est primordial pour garantir une expérience inclusive.
- Fournir des textes d’aide explicite comme les instructions de formulaire et descriptions de champs.
- Mettre en place une Foire aux Questions (FAQ) ou un centre d’aide accessible.
- Mettre à disposition une assistance en ligne (chat, contact rapide) avec une navigation clavier possible.
- S’assurer que les messages d’erreur sont compréhensibles et utiles.
Exemple : “Votre mot de passe doit contenir au moins 8 caractères” plutôt que “Erreur”
11. Évaluation
Même un site bien conçu devient non conforme s’il n’est pas régulièrement audité.
- Utiliser des outils automatiques comme WAVE, Axe ou Accessibility Checker pour identifier les erreurs courantes.
- Réaliser des tests manuels : navigation au clavier, lecture par lecteur d’écran.
- Vérifier la conformité aux normes WCAG 2.1 ou 2.2 et établir un plan de correction.
Quelles sont les règles pour l’accessibilité des contenus web ?
Les règles du WCAG sont développées en collaboration avec des personnes et des organismes du monde entier pour instaurer un standard commun pour l’accessibilité des contenus internet.
Les documents des WCAG démontrent comment rendre les contenus plus adaptés aux personnes handicapées avec les informations de structure comme le codage et le balisage.
Selon la recommandation W3C (World Wide Web Consortium), il a 4 principes fondamentaux :
- un contenu perceptible
- une interface utilisable
- des informations compréhensibles
- un contenu robuste
Explorez notre article sur l’hébergement web écologique : que signifie un hébergement vert durable et performant ?
Quelle norme régit l’accessibilité d’un site internet ?
Depuis l’article 47 de la loi du 11 février 2005, l’accessibilité de l’internet est une exigence légale pour tous les services en ligne.
3 normes sont applicables en termes d’accessibilité d’un site internet pour les personnes handicapées.
Le WCAG 2.1
Le Web Content Accessibility Guidelines est la référence internationale des normes.
Edité par le W3C (W3C World Wide Web Consortium), il s’appuie sur 3 niveaux d’accessibilité : A, AA et AAA.
Le RGAA
Le Référentiel Général d’Amélioration de l’Accessibilité régit en France et est publié en 2009 suite à la loi du 11 février 2005. Edité par le DINUM (Direction interministérielle du numérique), il se base sur le WCAG 2.1.
La norme européenne 301 549 V 2.1.2.
Elle reprend et adapte les WCAG pour les exigences légales européennes. Celui-ci est établi par l’Union européenne dans le cadre de la directive 2016/2102.
Vous souhaitez vous faire accompagner ? Contactez notre agence d’éco conception web
Pour aller plus loin :
