Solutions pour l'accessibilité

Sommaire du dossier

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 services de communication aux internautes pour être accessibles aux personnes en situation de handicap doivent être :

• perceptibles : par exemple en proposant des alternatives textuelles aux contenus qui ne le sont pas comme des images, des vidéos ou des audios ;
• utilisables : par exemple, en rendant les éléments essentiels de la page accessibles depuis le clavier, en proposant des moyens simples de navigation ;
• compréhensibles : par exemple, en simplifiant l'usage des pages ou en assistant l'utilisateur lors des saisies ;
• robustes : par exemple, en rendant compatible avec les divers assistants de lecture.

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

Introduction

Les bases

Les autres ressources

• lire l'excellent blog de Lauriane Buffet ⎋⁽⁶⁾ qui aura passé du temps chaque jour pendant 100 jours pour découvrir le sujet et nous partager le résultat
• se rendre sur le site de l'Accede Web ⎋⁽⁷⁾ qui propose des notices pour aborder ce sujet

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 ⎋⁽⁸⁾.
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é ⎋⁽⁹⁾ sur le site du gouvernement :

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

• ceux qui vérifient la présence (et qui peuvent être automatisés) ; exemple :
  • Critère 1.1. Chaque image porteuse d’information a-t-elle une alternative textuelle ?
• ceux qui vérifient la pertinence (et qui doivent être réalisés manuellement) ; exemple :
  • Critère 1.3. Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?

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 :

• ceux qui permettent d'automatiser la détection de la présence ou le caractère approprié
  • Critère 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
    • à la fois la présence est vérifiée : est-ce que les balises <hx> sont utilisées ?
    • et le caractère approprié : est-ce que la hiérarchie des balises est cohérente ?
  • Critère 9.2. Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
    • vérification de la structure complète du document avec toutes ses parties obligatoires
• ceux qui permettent de rappeler les exigences et de suivre les contrôles manuels réalisés

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 ⎋⁽¹⁰⁾ ; version Firefox de WCAG Color contrast checker ⎋⁽¹¹⁾).

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 ⎋⁽¹²⁾ , puis je fais un premier contrôle grâce à leur fonctionnalité d'accessibilité ⎋⁽¹³⁾ 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 ⎋⁽¹⁴⁾ ; version Firefox de Wave ⎋⁽¹⁵⁾) 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 :

• Critère 10.3. Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?

SiteImprove

Une fois le travail dégrossi avec Wave, j'utilise l'extension SiteImprove (version Chrome de SiteImprove ⎋⁽¹⁶⁾ ; version Firefox de SiteImprove ⎋⁽¹⁷⁾). 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 ⎋⁽¹⁸⁾ ; version alternative de Accessibility Insight for Web ⎋⁽¹⁹⁾) 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 :

• Le style avec une couleur particulière, le soulignement, la graisse (passage en gras), l'espacement des lettres
• Lorsque le lien est externe,
  
  • la balise <a> comporte un titre stipulant l'action entreprise (par exemple : lien envoyant dans un autre onglet sur le site de Infogreen Factory) et notamment si le site est dans une autre langue que le français plus une identification visuelle supplémentaire avec le caractère ⎋
  • j'adjoins aussi au lien une note de bas de page reprenant le titre et permettant une fois lue de revenir au texte en cours de lecture

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>
^{(<a href="#notes_de_bas_de_page">1</a>)}

et pour la note de bas de page :

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

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

• Critère 3.1. Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur.
• Critère 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
• Critère 6.2. Dans chaque page web, chaque lien a-t-il un intitulé ?

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 ⎋⁽²⁰⁾ 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) ䷀}