L'accessibilité des sites web

L’objectif

Commençons ce chapitre par une citation de Tim Berners Lee (directeur du W3C et créateur du Web) : « La nature du Web est son universalité. Il doit être accessible à toutes les personnes handicapées. »

L’objectif énoncé est très clair : permettre à toute personne handicapée d’accéder aux sites web, c’est-à-dire pouvoir accéder au contenu, pouvoir l’appréhender et le comprendre sans aucun problème.

Notez bien que, dans ce chapitre, nous n’allons aborder que les grands principes généraux. Le sujet est important, mais vaste et assez technique. À la fin de ce chapitre, des ressources livresques seront citées pour que vous puissiez approfondir le sujet.

Le handicap et le Web

1. Les personnes en situation de handicap

Les derniers chiffres officiels des personnes en situation de handicap en France sont donnés par la DREES (Direction de la Recherche, des Études, de l’Évaluation et des Statistiques). L’étude date de novembre 2024 (https://drees.solidarites-sante.gouv.fr/publications-communique-de-presse-documents-de-reference/panoramas-de-la-drees/241128_Panorama_Handicap2024) et elle porte sur des chiffres de 2022. Les chiffres sont hélas très importants : « Au total, en France (métropole et DROM), le nombre d’enfants et d’adultes handicapés (de 5 ans ou plus), qu’ils vivent à domicile ou en établissement, varie de 5,7 millions à 18,2 millions de personnes selon la définition utilisée. » Vous pouvez consulter cette page afin d’avoir des chiffres et des analyses plus détaillés.

2. Les différents types de déficiences

Il existe beaucoup de formes de déficiences affectant les personnes. Les déficiences visuelles comportent la cécité, le daltonisme, la photophobie et la photosensibilité. Les déficiences auditives comprennent la surdité partielle, profonde et totale. Les déficiences motrices comportent la paralysie, les membres manquants ou incomplets et les tremblements. Et il ne faut pas oublier les déficiences...

Les référentiels et la réglementation

1. Le référentiel au niveau mondial

La référence mondiale pour faire des services numériques accessibles est le WCAG, le Web Content Accessibility Guidelines (https://www.w3.org/WAI/standards-guidelines/wcag/), produit par le W3C (https://www.w3.org). La version actuelle, la 2.2, a été normalisée en tant qu’ISO 40500. Notez que la version 3 (https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/) est déjà proposée en brouillon mais ne remplacera et dépréciera pas WCAG 2.2 avant plusieurs années.

Cette recommandation propose plusieurs niveaux de conformité :

Niveau A : le niveau le plus bas, mais assurant déjà l’accessibilité du site. À ces critères essentiels sont ajoutés les éléments rapidement implémentables.
Niveau AA : le niveau intermédiaire vérifiant, en plus des critères de niveau A, des critères permettant de lever des obstacles à l’accessibilité du service numérique. Le site web est plus facilement accessible.
Niveau AAA : le niveau ultime d’accessibilité. Néanmoins, l’ensemble de ses critères ne sont pas pertinents ou réalistes dans toutes les situations. Les critères sont parfois destinés à une cible très spécifique. Dans le WCAG, il est donc indiqué qu’il n’est pas toujours souhaitable et réaliste de viser ce niveau d’accessibilité.

2. Le cadre réglementaire dans l’Union européenne

En 2016, la commission a voté une directive, transposée depuis dans les lois de ces pays membres, imposant aux services numériques du secteur public de respecter l’ensemble des critères de niveau A et AA du WCAG. Ce référentiel étant spécifique au web, cela a été généralisé à l’ensemble des produits et services numériques et consigné dans la norme...

Les aides matérielles et logicielles

Pour les personnes en situation de handicap, les aides pour consulter un site web sont principalement de deux types : les aides matérielles et les aides logicielles.

Les personnes en déficience visuelle vont disposer d’un clavier spécifique en braille pour consulter et interagir avec les sites web.

Voici un exemple de clavier adapté :

Les personnes en déficience visuelle vont pouvoir accéder au contenu des pages web par l’intermédiaire d’une application de synthèse vocale. C’est cette application, nommée usuellement lecteur d’écran, qui va lire tout le contenu des pages web de manière très « technique ». C’est-à-dire que la synthèse vocale va analyser la structure et le code HTML de la page pour vocaliser son contenu.

Vous pouvez vous-même tester un lecteur d’écran, afin de vous rendre compte du texte qui est dicté par la synthèse vocale. La solution la plus utilisée est NVDA (https://www.nvda.fr) qui propose un lecteur d’écran libre et gratuit pour Windows et JAWS pour Windows (https://www.ceciaa.com/jaws-logiciel-revue-ecran.html) qui est payant. Sous macOS, le service VoiceOver est directement implémenté dans les paramètres d’accessibilité du système.

Les contenus accessibles

1. Les principes généraux

Les personnes en déficience visuelle vont utiliser un lecteur d’écran qui va énoncer tout le contenu des pages web consultées en analysant la structure et le code HTML de ces pages. C’est pourquoi, lors de la conception du site, il faut bien prendre en compte la « qualité » du code générée par la solution technique que vous allez choisir pour concevoir votre site web. Il faut que le CMS choisi utilise à bon escient les bons éléments HTML pour insérer le contenu rédactionnel et les illustrations multimédias.

2. Les contenus textuels

Dans les pages web, le contenu rédactionnel est inséré principalement avec les titres, les paragraphes, les listes, les citations et les tableaux.

Les titres permettent de structurer les pages de manière logique et hiérarchique. Le titre de niveau 1 est usuellement réservé au nom de la page. Vous pouvez utiliser les titres de niveau 2 à 6 pour hiérarchiser le contenu de la page. Sachez que le lecteur d’écran va énoncer le niveau de titre utilisé, afin de bien rendre compte de la structure de la page. Par exemple, si le contenu d’un titre de niveau 2 contient le texte « Florence, une ville d’art », le lecteur d’écran va énoncer « Florence, une ville d’art - titre niveau 2 ».

Les paragraphes ne sont pas énoncés comme des « paragraphes » par les lecteurs d’écran. Notez aussi que les mises en forme en gras et en italique ne sont pas vocalisées de manière différente du texte courant.

Les listes sont explicitement indiquées comme structure par le lecteur d’écran qui énonce le nombre d’éléments inclus dans une liste, puis chaque item de la liste est aussi énoncé comme élément de structure.

Les citations sont elles aussi énoncées comme « citation » par le lecteur d’écran.

Les tableaux doivent être parfaitement...

Mettre en place une navigation au clavier

La navigation au clavier constitue un pilier essentiel de l’accessibilité web et elle est indispensable pour de nombreux utilisateurs qui ne peuvent pas utiliser de souris. Sur un site accessible, l’ensemble des fonctionnalités de navigation et interactives doit être utilisable uniquement à l’aide des touches du clavier. L’utilisateur déplace le curseur virtuel de composant en composant grâce à la touche Tab, il valide ses choix avec la touche Entrée ou la Barre d’espace, et parcourt certains éléments complexes à l’aide des touches Fléchées. L’ordre de cette progression doit impérativement suivre le sens naturel de lecture de la page pour garantir une expérience fluide et prévisible. Cela requiert donc une très bonne expérience dans ce domaine.

Pour garantir cette navigation au clavier, les développeurs doivent respecter trois règles techniques fondamentales.

Tout d’abord, chaque élément interactif, comme un lien, un bouton ou un champ de formulaire, doit obligatoirement pouvoir recevoir le « signal actif » du clavier. C’est ce qui se nomme le focus clavier.
Ensuite, la position de ce focus doit rester clairement visible à l’écran grâce à un indicateur visuel contrasté...

Exploiter le zoom et les agrandissements d’écran

L’agrandissement d’écran est une fonctionnalité essentielle pour les personnes ayant une déficience visuelle. Pour lire confortablement les contenus d’un site web, ces personnes peuvent s’appuyer sur deux approches principales. Le zoom natif et global du navigateur, activable via de simples raccourcis-clavier, ou des logiciels spécialisés de loupe d’écran qui agrandissent localement une zone de l’affichage en suivant les déplacements du curseur. Dans les deux cas, l’objectif est de permettre un accès complet à l’information visuelle en augmentant la taille des caractères et des composants graphiques sans en altérer la lisibilité.

Du point de vue de la conception du site web, garantir une expérience fluide lors du grossissement exige des concepteurs un travail rigoureux sur l’adaptabilité du design. Lorsqu’un utilisateur applique un zoom de page pouvant atteindre 200 % ou 400 %, l’interface doit se réagencer dynamiquement de manière réactive, à la manière d’un affichage sur smartphone, afin d’éviter tout défilement horizontal particulièrement fatigant pour la lecture. Le code doit ainsi veiller à ce qu’aucun texte ne se retrouve tronqué, masqué ou superposé...

Des livres pour aller plus loin

Comme évoqué dans l’introduction, l’accessibilité des sites web est un vrai sujet sociétal qu’il faut bien prendre en compte. Dans ce chapitre, nous n’avons vu que les grandes lignes de l’accessibilité des sites web. Si vous souhaitez aller plus loin, je vous conseille ces deux ouvrages parus aux Éditions ENI :

Green IT et accessibilité - Développez votre site web Numérique Responsable, par Hervé BOISGONTIER.

Et si vous choisissez WordPress comme CMS, je vous recommande :

WordPress, Accessibilité et Green IT - Comment créer votre site web en respectant les principes du Numérique Responsable ? que j’ai co-écrit avec Hervé BOISGONTIER.