Ce qui est fait, ce qui reste à corriger

1. Objectif

Ces pages doivent être lisibles à la souris, au clavier, au lecteur d’écran, en zoomant, sur un petit écran et sur une connexion lente. Nous visons les critères de niveau AA des règles WCAG 2.1 sans revendiquer une conformité certifiée : aucun audit externe n’a été réalisé, et une déclaration de conformité sans audit ne vaudrait rien. Nous décrivons donc ce qui est fait, ce qui reste imparfait et comment nous le signaler.

2. Structure et navigation

Chaque page commence par un lien d’évitement qui mène directement au contenu principal, visible dès qu’il reçoit le focus. Les repères sémantiques sont explicites : un en-tête, une navigation principale nommée, un contenu principal identifié, un pied de page. Il n’y a qu’un seul titre de premier niveau par page, et la hiérarchie des titres suit l’ordre logique sans saut de niveau. Le bouton de menu sur petit écran porte un état aria-expanded mis à jour.

3. Clavier

Tous les éléments interactifs sont des liens ou des boutons natifs, atteignables dans l’ordre du document. Le contour de focus est visible et contrasté, appliqué par la règle :focus-visible. L’avis d’entrée enferme le focus tant qu’il est ouvert : la tabulation circule entre ses éléments et revient au premier, et le focus retourne à l’élément d’origine après fermeture. Le défilement de l’arrière-plan est bloqué pendant l’affichage de l’avis.

4. Couleurs et contraste

Le texte courant est composé en encre très foncée sur un fond crème, largement au-dessus du rapport de 4,5:1 exigé pour le texte normal. Les accents terre cuite et olive servent aux liens, aux numéros de leçon et aux filets ; ils ont été choisis pour rester lisibles sur le fond du site. Aucune information n’est portée par la couleur seule : un lien est souligné, un état est écrit, une alerte porte un texte explicite en plus de sa bordure colorée.

5. Texte et mise en page

Les polices sont celles de votre système, ce qui respecte vos réglages de taille et évite un téléchargement. Les longueurs de ligne restent proches de 65 à 75 caractères dans les zones de lecture. Les paragraphes sont courts, les titres intermédiaires fréquents et les listes utilisées quand une énumération vaut mieux qu’une phrase. Aucun texte n’est justifié, aucun texte important n’est en majuscules, et l’interlignage reste supérieur à 1,5 dans le corps du texte.

6. Contenus interactifs

Le site compte quatre mécanismes seulement : l’avis d’entrée, le bandeau de préférences de stockage, la jauge de structure de la première leçon et le formulaire de la page nous écrire. La jauge désactive la validation automatique du navigateur ; les résultats sont annoncés dans une zone aria-live="polite" et les erreurs de saisie affichent un texte explicite indiquant les valeurs attendues, plutôt qu’un simple encadré rouge. Le formulaire de contact fait l’inverse : il conserve la validation native, chaque champ porte une étiquette liée par for, la case de consentement est cliquable sur tout son libellé, et rien n’y est signalé par la couleur seule. Les blocs de questions utilisent les éléments natifs details et summary.

7. Ce qui a été testé au lecteur d’écran

Nos essais portent sur quatre parcours, faits sur une page de matière et sur une leçon longue. La navigation par titres doit restituer la suite des sections numérotées sans saut : c’est le parcours le plus utilisé et celui que nous vérifions en premier. La navigation par repères doit annoncer l’en-tête, la navigation principale, le contenu et le pied de page, avec des noms explicites en français. Les tableaux comparatifs doivent être lus avec leur légende et rattacher chaque cellule à son en-tête de ligne et de colonne, ce qui est la raison pour laquelle la première colonne est déclarée comme en-tête.

Le quatrième parcours concerne les éléments qui changent d’état : les blocs de questions doivent être annoncés comme dépliables et leur ouverture signalée, le bouton de menu doit annoncer son état, et le résultat de la jauge doit être lu après un calcul sans que le focus se déplace. L’avis d’entrée doit être annoncé comme fenêtre de dialogue à l’ouverture. Ces essais sont internes et ne valent pas audit : ils écartent les défauts grossiers, pas les gênes fines que seul un usage quotidien révèle.

8. Limites connues, dites franchement

Trois points restent imparfaits. Les tableaux comparatifs à trois colonnes exigent un défilement horizontal sur écran très étroit ; nous préférons cette gêne à la suppression d’une colonne d’information. Les illustrations vectorielles complexes sont résumées par une description courte plutôt que décrites élément par élément. Enfin, aucun audit indépendant n’a encore été mené : nos tests sont internes, faits au clavier, au zoom et avec un lecteur d’écran, ce qui ne remplace pas un audit externe.

9. Signaler un obstacle

Décrivez la page, l’action tentée, votre équipement et ce qui s’est passé : « sur la leçon d’écriture, la tabulation saute le champ de vitesse de lecture » est un signalement immédiatement exploitable. L’adresse figure sur la page nous écrire. Nous répondons dans les cinq jours ouvrables et traitons en priorité les obstacles qui empêchent d’accéder au contenu, avant ceux qui le rendent seulement moins confortable.

10. Ce que nous ne ferons pas

Nous n’installerons pas de barre d’outils d’accessibilité automatique : ces surcouches ajoutent un script tiers, entrent souvent en conflit avec les réglages du système et masquent les vrais défauts au lieu de les corriger. Nous préférons corriger le code source, ce qui profite à tous les usages sans dépendre d’un service extérieur, et reste cohérent avec l’absence de requête externe décrite sur la page données personnelles.