Solutions pour l'accessibilité

Quels domaines sont couverts ?

17/04/2021

Sommaire du dossier


L’accessibilité numérique consiste à rendre les services 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 ⎋(1)).

Les services de communication aux internautes pour être accessibles aux personnes en situation de handicap doivent être :

Ces premiers éléments sont extraits ou librement adaptés du site gouvernemental traitant de l'accessibilité dans le numérique ⎋(2).

Introduction

L'accessibilité d'un site web est à la fois simple et complexe, au moins pour moi.

Les bases

Simple car elle est décrite dans le Référentiel Général d'Amélioration de l'Accessibilité – RGAA Version 4.1 ⎋(3) et que tout ce qui doit être entrepris pour arriver à un site accessible y est défini.
Simple car il existe de nombreux outils dont je décrirai certains plus loin dans cet article, qui accompagnent le concepteur de site pour s'assurer de la conformité.

Mais elle est complexe car les exigences de conformité sont nombreuses (plus de 130), à juste titre, et que pour prendre en compte les évolutions nécessaires à une meilleure intégration, les spécifications évoluent régulièrement.
Le passage entre le référentiel RGAA v3 de 2017 (évolution de 2016) vers la version v4 de 2021 comporte un nombre élevé de modifications recensées dans ces notes de révision ⎋(4).

Les autres ressources

Il est possible aussi de se référer à la version en anglais du W3C qui spécifie les Web Content Accessibility Guidelines - WCAG 2.1 ⎋(5) (en français : Directives d'accessibilité du contenu Web) et auxquelles se rapporte le RGAA v4.

Il sera aussi intéressant pour tous ceux qui s'intéressent de près à l'accessibilité de :

Nota bene

L'article que je vous propose a pour objectif de décrire ma démarche et les solutions associées ; ainsi il a une couverture restreinte du RGAA car je ne mets pas en œuvre l'ensemble des techniques qui sont concernées. Il n'y a aura pas de vidéos ou d'audio par exemple sur mon site.
Ainsi l'ensemble des exigences du RGAA ne sont pas applicables à mon site ce qui fait que cet article n'est pas suffisant si vous souhaitez appliquer une démarche complète d'accessibilité.

Conformité et champ d'application

Il est important aussi de comprendre qu'il y a trois niveaux de conformité de A à AAA pour chacune des exigences. La conformité au référentiel RGAA est assurée avec un niveau AA a minima pour chacune des exigences qui sont applicables.

Finalement, avant d'aborder le sujet plus en détail pour mon site, le champ d'application ne concerne pas toutes les entreprises ou organisations ; il faut un chiffre d'affaires minimum de 250 M€ pour que la conformité soit obligatoire en France ; les conditions sont décrites dans le chapitre Rappel du champ d’application du RGAA Version 4.1 ⎋(8).
Toutefois, si vous lisez cet article, je suppose que vous avez des convictions et que l'inclusion est une valeur que vous partagez. Alors, chiffres d'affaires ou pas, la conformité à l'accessibilité est un axe sur lequel vous vous positionnez, ce que j'essaye aussi de faire de mon côté.

Les thèmes et critères d'audit

Les thèmes qui sont concernés par l'audit d'accessibilité sont les suivants : Images, Cadres (Frames en anglais), Couleurs, Multimédia, Tableaux, Liens, Scripts, Éléments obligatoires, Structuration de l'information, Présentation de l'information, Formulaires, Navigation, Consultation.

Je vous invite à consulter l'ensemble des critères d'accessibilité ⎋(9) sur le site du gouvernement :

Il existe deux types de critères d'audit :

Sur mon site, il n'y aura ni cadre, ni tableaux, ni multimédia, ni script. Ces thèmes ne seront donc pas abordés par la suite. Je n'aborderai pas non plus tous les critères de pertinence mais présenterai un outil qui permet de les passer en revue.

Les outils de mesure

Comme il existe deux types de critères, il y a naturellement deux types d'outils :

L'ensemble des outils que j'utilise pour l'accessibilité, en dehors des référentiels, sont des extensions des navigateurs (Firefox ou Chrome) ou éventuellement des fonctionnalités du navigateur lui-même.

Les outils automatiques

Contrôle des contrastes

Les contrastes dans une page sont un élément essentiel de facilitation de la lecture, même pour une personne qui n'est pas en situation de handicap. Cela dépend des conditions de lecture ou de fatigue par exemple. Pour les personnes en situation de handicap visuel, le problème est bien évidemment plus important et c'est pour cela qu'une attention toute particulière doit être accordée à ce sujet.

La correspondance : Thème => Couleurs et Critère 3.2. Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?

WCAG Color contrast checker

Même si plusieurs outils permettent de le faire tout en réalisant d'autres types de contrôles d'accessibilité, celui que j'utilise pour contrôler mes pages est l'extension WCAG Color contrast checker (version Chrome de WCAG Color contrast checker ⎋(10) ; version Firefox de WCAG Color contrast checker ⎋(11)).

Elle permet de vérifier que le contraste entre la police et l'arrière-plan direct est conforme aux exigences selon le niveau attendu ; sur mon site, j'ai décidé de répondre au niveau AAA et donc d'avoir des contrastes minimum de 7:1. Tous les écarts sont identifiés et localisés et il ne reste plus qu'à revoir soit sa charte graphique soit son utilisation dans les cas identifiés.

Un avantage indéniable de cette extension est qu'elle permet de simuler des déficiences visuelles et donc de toucher directement du doigt les difficultés que certaines personnes peuvent avoir si on ne prend pas en compte leur handicap : perte plus ou moins prononcée d'une des couleurs rouge, vert, bleu ou des contrastes. Il faut non seulement avoir un niveau de contraste suffisant pour une vision dite normale mais il faut aussi s'assurer que quelle que soit la déficience, les contrastes perdurent.

Ma méthode

Pour réussir assez rapidement dans cette voie, lorsque je crée un site, j'utilise pour démarrer la roue chromatique d'Adobe ⎋(12) , puis je fais un premier contrôle grâce à leur fonctionnalité d'accessibilité ⎋(13) puis je génère une page type avec tous les composants attendus (titre, lien, ...) et je teste cette page. Puis il faut corriger et tester jusqu'à ce que les couleurs conviennent et soient conformes.

La structuration de la page et plus

Les thèmes concernés par ce chapitre sont : Éléments obligatoires, Structuration de la page, Présentation de l'information.

Wave

En premier, j'utilise Wave pour dégrossir le travail. Cette extension, en anglais, (version Chrome de Wave ⎋(14) ; version Firefox de Wave ⎋(15)) présente de manière très simple la structure d'une page avec l'ensemble des éléments obligatoires et permet de vérifier le bon enchaînement des titres.

Un avantage indéniable de cette extension est de permettre de désactiver les feuilles de style et donc de répondre au critère 10.3 du domaine présentation de l'information :

SiteImprove

Une fois le travail dégrossi avec Wave, j'utilise l'extension SiteImprove (version Chrome de SiteImprove ⎋(16) ; version Firefox de SiteImprove ⎋(17)). Cette extension est en anglais.

Elle permet d'identifier trois niveaux de sévérité : Erreur, Warning, Revue pour trois types de responsabilités : Éditeur, Webmaster, Développeur et pour les trois niveaux de conformité : A, AA et AAA.

De manière simple, je cherche à atteindre le niveau AAA pour toutes les responsabilités. Je commence par identifier les erreurs, que je corrige en suivant les conseils prodigués, puis je passe aux warnings pour finir par les revues. Les conseils de correction sont bien expliqués et argumentés avec les références aux exigences.

Accessibility Insight for Web

Cette extension (version Chrome de Accessibility Insight for Web ⎋(18) ; version alternative de Accessibility Insight for Web ⎋(19)) reprend de manière un peu différente les fonctionnalités de Wave et SiteImprove et y ajoute quelques aides très pratiques.

En premier lieu, elle permet de vérifier que l'on peut naviguer avec la touche TAB de manière cohérente (Critère 12.8. Dans chaque page web, l’ordre de tabulation est-il cohérent ?).

Et une fois tous les contrôles automatiques réalisés avec toutes les extensions précédentes, elle propose de faire le suivi de toutes les exigences de pertinence pour s'assurer de la meilleure conformité. Toutes les explications sont données aussi bien pour comprendre l'objectif du contrôle que la manière dont il doit être réalisé.

Le cas des liens

Il peut sembler intéressant de différencier les liens par une couleur autre que celle du texte qui l'entoure. C'est intéressant mais comme on l'a vu précédemment, ce n'est pas suffisant.

J'ai travaillé les liens sur plusieurs points :

Résultat

Le résultat final pour le lien est :

<a href="https://infogreenfactory.green/" target="_blank" rel="noopener" title="lien envoyant dans un autre onglet sur le site de Infogreen Factory">Infogreen Factory ⎋</a>
<span id="note_1"></span>
<sup>(<a href="#notes_de_bas_de_page">1</a>)</sup>

et pour la note de bas de page :

<sup>(1) : lien envoyant dans un autre onglet sur le site de Infogreen Factory ┃ <a href="#note_1">retour au texte ䷀</a></sup>

Avec cela, je réponds à plusieurs exigences, comme :

En conclusion

Maintenant que je commence à avoir bien compris les exigences, j'ai mis et je continue à mettre à jour le moteur de mon site pour toutes les parties communes et le contenu de mes articles ou pages afin d'obtenir le niveau de conformité le plus élevé possible, progressivement. Il me reste encore du travail et quelques doutes. En effet, autant la notion de présence est facile à gérer autant la notion de pertinence est subjective et peut être sujette à caution et interrogation.

Si vous avez des remarques concernant ce que j'ai mis en œuvre, ce sera avec plaisir que je les lirai. Je vous en remercie d'avance.

Dernière remarque

Je vous avais signifié que je n'utilisais que des extensions pour vérifier la conformité de mon site avec le référentiel.
Toutefois, j'utilise malgré tout un site très bien fait pour m'aider.
Il s'agit de l'outil de validation du code html ⎋(20) proposé par le World Wide Web Consortium. Il propose des vérifications ayant trait à l'accessibilité mais aussi à la structure en général du code produit. Attention toutefois que certains warnings remontés par cette validation sont des exigences du RGAA.



Notes et renvois

(1) : lien envoyant dans un autre onglet sur le site legifrance.gouv.fr ┃ retour au texte, note (1) ䷀
(2) : lien envoyant dans un autre onglet sur le site numerique.gouv.fr ┃ retour au texte, note (2) ䷀
(3) : lien envoyant dans un autre onglet sur le site numerique.gouv.fr ┃ retour au texte, note (3) ䷀
(4) : lien envoyant dans un autre onglet sur le site numerique.gouv.fr ┃ retour au texte, note (4) ䷀
(5) : lien envoyant dans un autre onglet sur le site w3.org en anglais ┃ retour au texte, note (5) ䷀
(6) : lien envoyant dans un autre onglet sur le site de Lauriane ┃ retour au texte, note (6) ䷀
(7) : lien envoyant dans un autre onglet sur le site de l'Accede Web ┃ retour au texte, note (7) ䷀
(8) : lien envoyant dans un autre onglet sur le site de numerique.gouv.fr ┃ retour au texte, note (8) ䷀
(9) : lien envoyant dans un autre onglet sur le site de numerique.gouv.fr ┃ retour au texte, note (9) ䷀
(10) : lien envoyant dans un autre onglet sur le site en anglais des extensions de Chrome ┃ retour au texte, note (10) ䷀
(11) : lien envoyant dans un autre onglet sur le site en anglais des extensions de Firefox ┃ retour au texte, note (11) ䷀
(12) : lien envoyant dans un autre onglet sur le site en anglais de Adobe ┃ retour au texte, note (12) ䷀
(13) : lien envoyant dans un autre onglet sur le site en anglais de Adobe ┃ retour au texte, note (13) ䷀
(14) : lien envoyant dans un autre onglet sur le site en anglais des extensions de Chrome ┃ retour au texte, note (14) ䷀
(15) : lien envoyant dans un autre onglet sur le site en anglais des extensions de Firefox ┃ retour au texte, note (15) ䷀
(16) : lien envoyant dans un autre onglet sur le site en anglais des extensions de Chrome ┃ retour au texte, note (16) ䷀
(17) : lien envoyant dans un autre onglet sur le site en anglais des extensions de Firefox ┃ retour au texte, note (17) ䷀
(18) : lien envoyant dans un autre onglet sur le site en anglais des extensions de Chrome ┃ retour au texte, note (18) ䷀
(19) : lien envoyant dans un autre onglet sur le site en anglais de l'extension ┃ retour au texte, note (19) ䷀
(20) : lien envoyant dans un autre onglet sur le site en anglais w3.org ┃ retour au texte, note (20) ䷀