Accessibilité : un site utilisable par tous

Un site accessible est un site qu’on peut lire avec une loupe, parcourir au clavier, écouter avec un lecteur d’écran, ou consulter en plein soleil sur un téléphone. En France, c’est cadré par le RGAA, la déclinaison nationale du standard international WCAG 2.1 niveau AA — la référence visée par la plateforme. Au-delà de l’obligation, c’est aussi du référencement : ce qui aide un lecteur d’écran aide Google.

Le travail est partagé. Le gabarit du site — sa structure, ses formulaires, son planning, son tunnel d’achat — est traité par la plateforme. Le contenu que vous saisissez, lui, n’appartient qu’à vous : personne ne peut deviner à votre place ce que raconte une photo.

Ce dont la plateforme se charge

• Une structure de page annoncée correctement : en-tête, navigation, contenu principal, pied de page, et un lien « Aller au contenu principal » qui évite de retraverser le menu à chaque page.
• Une navigation au clavier de bout en bout : tout ce qui se clique s’atteint avec Tab, s’active avec Entrée ou Espace, et se ferme avec Échap. Les créneaux du planning et les boutons du calendrier sont focusables et nommés.
• Un indicateur de focus visible sur chaque élément interactif, pour savoir où l’on est sans souris.
• Des formulaires étiquetés : chaque champ a son intitulé, l’autocomplétion du navigateur remplit nom, email et téléphone, les champs obligatoires sont annoncés comme tels, et les messages d’erreur sont lus à voix haute et rattachés au champ fautif.
• Un texte qui supporte le zoom à 200 % et l’affichage sur un écran étroit sans perte d’information, et une interface qui respecte le réglage « animations réduites » du système.
• Deux façons de circuler dans le site, comme l’exige le RGAA : le menu, et un plan du site accessible depuis le pied de page de chaque page — il se remplit tout seul à mesure que vous publiez.
• Les liens ouvrant un nouvel onglet le signalent, et aucune page ne se rafraîchit ni ne défile toute seule.

Ce qui dépend de vous

Cinq réflexes suffisent, et ils ne coûtent que quelques secondes à la saisie.

• Le texte alternatif des images. Chaque fichier de la médiathèque porte un champ de description, obligatoire : écrivez ce que l’image montre, en une phrase (« Roxana corrigeant une posture de yoga »), pas son nom de fichier. Le champ est traduit : une image utilisée sur un site bilingue a une description dans chaque langue.
• Des titres dans l’ordre. Dans une page, les niveaux de titre servent de table des matières : on descend d’un cran à la fois, sans sauter de niveau, et on ne met pas un titre en gras à la place d’un vrai titre.
• Des liens explicites. « En savoir plus » ou « Cliquez ici », sortis de leur contexte, ne veulent rien dire : un lecteur d’écran peut lister les liens d’une page les uns après les autres. Préférez « Voir les tarifs des cartes de dix séances ».
• Jamais la couleur seule. « Les créneaux en rouge sont complets » exclut les daltoniens : doublez toujours la couleur d’un mot, d’une icône ou d’un symbole.
• Du texte, pas des images de texte. Une affiche exportée en JPEG n’est ni lisible au zoom, ni sélectionnable, ni indexable. Recomposez-la avec des blocs.

Vos couleurs : rien à vérifier

La couleur d’accent choisie dans vos paramètres habille les boutons, les liens, les anneaux de focus et les mises en avant. Le choix se fait dans une liste de six teintes — bleu, cyan, fuchsia, rose, terracotta, violet — et non dans une palette libre : c’est délibéré. Chacune des six a été réglée pour respecter les seuils de contraste du RGAA, dans le thème clair comme dans le thème sombre. Quelle que soit celle que vous retenez, le texte reste lisible et les boutons restent perceptibles. Il n’y a donc pas de contraste à mesurer de votre côté.

Le seul point de vigilance qui reste sur les couleurs vous appartient : ce que vous écrivez ne doit jamais reposer sur la couleur seule (voir plus haut), et un logo ou une image que vous téléversez n’est pas contrôlé par la plateforme.

Vérifier soi-même

• Rangez la souris et parcourez une page entière avec Tab : l’ordre doit suivre la lecture, rien ne doit être injoignable, et on doit toujours voir où l’on est.
• Zoomez à 200 % : rien ne doit être coupé ni recouvert.
• Lancez l’audit « Accessibility » de Lighthouse, intégré à Chrome (onglet du même nom des outils de développement) : il attrape en une minute les erreurs les plus courantes d’une page que vous venez d’écrire.

Un outil automatique ne voit qu’une partie du chemin : il sait dire qu’une image n’a pas de description, pas qu’elle est mauvaise. Le reste se juge à la lecture.