Qu’est-ce que l’accessibilité numérique ?
L
'accessibilité numérique consiste à rendre les services de communication au public en ligne
accessibles aux personnes en situation de handicap.
Le
handicap est défini comme : « toute limitation d'activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d'une altération substantielle, durable ou définitive d'une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d'un polyhandicap ou d'un trouble de santé invalidant » (article L. 114 du code de l'action sociale et des familles).
Les
obligations d’accessibilité des sites publics aux personnes en situation de handicap ont été introduites par l’article 47 de la loi du 11 février 2005. Depuis 2012, tous les sites publics qu’ils appartiennent aux services de l’État ou aux collectivités territoriales sont soumis à l’obligation d’accessibilité et depuis le 23 septembre 2019, les sites publics doivent publier une
déclaration d’accessibilité et afficher leur conformité dès la page d’accueil, généralement dans le footer du site web.
Figure 1 : Footer du site gouvernemental Design Gouv
Déclaration d’accessibilité et RGAA
Le RGAA est le Référentiel Général de l'Amélioration de l'Accessibilité, créé en 2009 et actualisé pour la dernière fois en février 2021 (version 4.1).
Il permet de contrôler l’accessibilité d’un site et de ses contenus suivant les normes internationales de l’accessibilité numérique connues sous l’appellation de WCAG.
Il définit une méthode technique et propose un cadre opérationnel de vérification de la conformité aux exigences d’accessibilité, pour l’établissement de la déclaration d’accessibilité. Cette méthode comporte 106 critères de contrôle RGAA, accessibles sur http://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/
Le diagnostic flash est quant à lui un outil gouvernemental qui permet d’estimer de manière rapide et partielle l’accessibilité d’un site ; il est inutile de faire un audit de conformité au RGAA tant que tous ses critères ne sont pas respectés.
Figure 2 : Critères
et tests RGAA du site accessibilite.numerique.gouv.fr
Pourquoi ne pas utiliser des outils de surcouche ?
Des
solutions d’inclusion numérique (ou outil de surcouche) comme FACIL'iti, Equalweb, ou encore Lisio permettent d'adapter les sites web en fonction de handicaps : dyslexie, daltonisme, cataracte, malvoyance, achromatopsie, maladie de Parkinson, DMLA, épilepsie photosensible, trouble de l'attention, ...
Figure 3 : Outil de surcouche FACIL'iti
La Commission européenne n’approuve pas ces outils de surcouche, car ils ne peuvent couvrir plus de 30% des critères RGAA et peuvent également dans certains cas interférer avec les technologies d’assistance utilisées par les personnes en situation de handicap (logiciels ou outils physiques tels que des claviers adaptés par exemple utilisés par les personnes en situation de handicap pour les aider dans leur navigation).
Il est donc indispensable d’intégrer l’accessibilité numérique dès les premières phases de conception d’un site web et dans toutes celles de son développement.
Quelques outils pour concevoir et développer un site web accessible
Pour le design
De nombreux plugins gratuits peuvent être utilisés lors du design de sites web. Ils se penchent principalement sur les aspects de contraste, de couleurs, polices, tailles et positions. Pour en nommer quelques-uns :
- Stark – Contrast & Accessibility Checker permet quant à lui de simuler les 3 types de daltonisme protanopie, deutéranopie et tritanopie, de vérifier les contrastes, les polices utilisées, les tailles de bouton, la hiérarchie des éléments… Il existe aussi une version payante permettant de simuler les 8 types de daltonisme et de proposer des solutions aux problèmes de contraste. Il peut être intégré à Figma, Sketch et GitHub entres autres
- Adee Comprehensive Accessibility Tool, du même ordre que Stark, permet de vérifier les contrastes, générer les textes alt pour les éléments nécessaires, vérifier les tailles des boutons tactiles, simuler des types de daltonisme
- Able – Friction free accessibility, permettant également de simuler des types de daltonisme, et de calculer le taux de contrastes
- Contrast pour la vérification du contraste sur l’outil de design Figma
Dans le navigateur
Dans les navigateurs directement, via l’onglet « Accessibilité », il est possible de :
- Simuler des handicaps visuels pour vérifier que les couleurs du site web ne posent pas problème à la compréhension de l’information : Protanopie, Deutéranopie, Tritanopie, Achromatopsie et Perte de contraste ;
- Afficher l'ordre de tabulation pour vérifier que la navigation au clavier est possible et permet bien d’accéder à tous les boutons, champs de formulaires, menus…
Figure 4 : Simulation
d'achromatopsie et affichage de l'ordre de tabulation sur le site Design Gouv
Il existe plusieurs
extensions de navigateur permettant de tester les critères RGAA sur des pages
web, généralement utilisés pour réaliser les audits d’accessibilité des sites
publics. On retrouve principalement :
- Le plugin Assistant RGAA 4.1, reconnu par la DINUM (Direction Interministérielle du NUMérique) et disponible sur Firefox et Chrome, permet pour chaque critère du RGAA d’indiquer les tests de vérification à effectuer avec les instructions de réalisation. Quand un test est sélectionné, tous les éléments à tester de la page affichée sont mis en avant pour faciliter leur identification. Par exemple, pour un test concernant des images, toutes les images de la page sont mises en avant avec leurs attributs associés. Ce qui permet d’identifier rapidement celles qui n’ont pas d’alternative textuelle.
- Le plugin ArcToolkit permet de lancer des tests d’accessibilité sur une page web pour détecter de manière rapide et efficace un certain nombre de problèmes ou de manques concernant les critères d’accessibilité.
- Le plugin HeadingsMap détecte et hiérarchise tous les headings (niveaux de titre h1, h2, …) d’un site. Cela permet de vérifier rapidement la cohérence de la structure du site.
- Le plugin Contrast Checker sert à vérifier les contrastes des couleurs et des textes.
Figure 5 Plugin Assisant RGAA sur le site web de l’Assistant
RGAA
SITES WEB
Plusieurs outils sont disponibles en ligne pour aider à la vérification visuelle sur les couleurs et contrastes :
Figure 6 : Accessible Color Matrix
Quelques bonnes pratiques de développement pour respecter les bases de l'accessibilité
Quelques règles basiques sont listées ci-dessous.
Couleurs
- S'assurer des contrastes entre couleurs
Utiliser par exemple accessible-colors ou Contrast Checker et vérifier que le taux de contraste est de minimum 4,5. - S'assurer qu'aucune information n'est véhiculée seulement par la couleur
Exemple : ne pas utiliser seulement un encadrement rouge pour indiquer qu'un champ obligatoire d'un formulaire n'est pas rempli, mais ajouter une icône dans le champ du formulaire pour que la personne ne visualisant pas le rouge puisse identifier le champ problématique.
Titres
et liens
- Il y a au moins un titre de niveau 1 par page, et l’arbre des titres doit être logique et cohérent.
Utiliser le plugin HeadingsMap pour vérifier l’arborescence et sa logique.
- Les liens doivent être explicites et soulignés pour être identifiables.
Exemple : « Cliquez-ici pour accéder au chapitre suivant » ne constituerait pas un lien conforme, contrairement à « Accéder au chapitre suivant ».
Focus (tab)
- Tous les éléments cliquables sont accessibles dans un ordre cohérent avec leur disposition.
Afficher l'ordre de tabulation pour la navigation au clavier dans un navigateur. - Les formulaires peuvent être remplis totalement au clavier grâce aux règles de tabulation : [Tab] pour passer au champ suivant, [Maj] + [Tab] pour retourner au champ précédent.
Formulaires
- Les labels ne doivent pas être dans les placeholders pour que l’utilisateur puisse continuer à voir ce qu’il a rempli et pour éviter que les auto-remplissages ne renseignent les informations dans les mauvais champs par exemple.
A noter que l’utilisation des placeholders est globalement mauvais (contraste bas, pas obligatoirement lus par les outils utilisés par les malvoyants / aveugles).
Images
- Les images doivent toutes avoir une alternative textuelle (attribut alt).
Icones
- Ne pas utiliser d’icônes seules, car elles ne permettent pas d'identifier les éléments assez rapidement. Il est conseillé d’utiliser un texte complémentaire
Textes
- Ne pas déclarer de taille de texte en pixels, mais plutôt em, rem, %, vh, vw, xsmall, small, large... Attention donc aux conteneurs utilisant des tailles height, width, max-height et max-width dont les valeurs sont définies en pixels car elles ne peuvent pas s'agrandir proportionnellement à la taille de la police. Le contenu qui débordera ne sera plus totalement lisible, voire illisible. Préférer l’utilisation de min-height et min-width.
Pour aller plus loin, vous trouverez plus de règles dans le memo suivant : https://design.numerique.gouv.fr/outils/memo-dev/
En conclusion
Un site web conforme aux critères d’accessibilité, c’est un site web qui permet aux personnes en situation de handicap de naviguer et d’utiliser le site sans discrimination. C’est aussi un site bien conçu et bien développé qui offre à tous une meilleur expérience utilisateur grâce à l’utilisation de bonnes pratiques : informations claires, bons contrastes, médias décrits, … Tout cela augmente la satisfaction des utilisateurs et réduit le taux de rebond.
Il existe énormément de guides et d’outils pour aider à la mise en place et à la vérification de l’accessibilité. Alors, la prochaine fois que vous voulez concevoir un site web, pensez accessibilité numérique ! Développeurs, intégrez ces bonnes pratiques à vos développements et améliorez la navigation des utilisateurs sur vos nouvelles features !
Liens et sources d’informations
Retour aux articles