Concevoir et développer des sites web en pensant accessibilité numérique

Software

Delphine MONNIER

Par Delphine MONNIER

Date de publication le 01.04.2025
Article actualisé le 01.04.2025

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.

1 Footer du site gouvernemental Design Gouv — *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, ...

Outil de surcouche FACIL’iti — *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.

Plugin assistant RGAA — *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 :

Vérifier les contrastes avec accessible-colors
Site web permettant de connaitre le contrast ratio et de vérifier qu’il vérifie le RGAA, en fournissant la couleur du texte, la couleur du background, le font-size et le font-weight du texte.
Accès : https://accessible-colors.com/
Gérer les handicaps visuels avec whocanuse
Site web permettant de visualiser comment les personnes atteintes d'handicap visuel voient un ensemble couleur texte, couleur background et taille texte.
Accès : https://www.whocanuse.com/?b=fedc2a&c=5a3b5d&f=20&s=
Obtenir les combinaisons de couleurs avec accessible-color-matrix
Permet de déterminer les combinaisons possibles en termes de contraste à partir d’une palette de 6 couleurs.
Accès : https://toolness.github.io/accessible-color-matrix/?n=white&n=Color%202&n=Color%203&n=Color%204&n=Color%205&v=FFFFFF&v=FEDC2A&v=5A3B5D&v=8B538F&v=C3A3C9

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 !