Gardez-le. C’est le banc d’essai permanent du site.

Du texte ordinaire, avec du gras, de l›italique, du code court, et une abréviation expliquée : les règles du W3C servent de base au standard québécois.

Un terme anglais reçoit son propre attribut de langue, pour que la synthèse vocale change de règles de prononciation : screen reader .

Un lien interne vers la page À propos , et un lien externe vers le standard SGQRI 008 3.0 (site externe) , qui reçoit son icône et sa mention réservée au lecteur d’écran.

Pour vérifier que le plan de titres ne saute aucun niveau et que la table des matières s’arrête bien à h3.

Une liste à puces :

• Un premier élément.
• Un deuxième, avec une sous-liste :
  • un élément imbriqué,
  • un autre.
• Un troisième.

Une liste numérotée :

1. D’abord ceci.
2. Ensuite cela.
3. Enfin le reste.

Une liste de définitions :

Point de repère

Une région de la page qu’un lecteur d’écran peut atteindre directement.

Région live

Une zone dont les changements sont annoncés sans déplacer le focus.

Et une citation ordinaire, sans type :

Le focus est la position du lecteur dans l’interface. Un anneau caché est un chemin caché.

Un bloc en CSS :

:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}

Un bloc en gabarit Go, avec un commentaire, une chaîne et un nombre :

// Vérifie le contraste avant de rendre.
func rapport(avant, fond Couleur) float64 {
    const decalage = 0.05
    return (luminance(avant) + decalage) / (luminance(fond) + decalage)
}

Un bloc sans langage déclaré :

Aucune coloration ici. Le texte reste lisible,
et le bloc défile toujours au clavier.

Le thème gère aussi les notes de bas de page¹, qui produisent des liens aller-retour corrects.

Le site que vous lisez, et le thème qui le rend.

Le niveau AA des règles du W3C, plus les critères supplémentaires que le standard québécois rend obligatoires, dont deux de niveau AAA : l’apparence du focus et les abréviations expliquées.

La page Accessibilité dit précisément ce qui a été vérifié et avec quoi.

Aucune dépendance. Ni Sass, ni Node, ni bibliothèque JavaScript, ni police chargée depuis un serveur tiers, ni service d’analyse. La construction complète tient en deux binaires, et la configuration interdit à Hugo toute requête sortante : une ressource distante fait échouer le build au lieu de créer une dépendance silencieuse.

• Une image sans texte de remplacement arrête la construction.
• Un lien dont le texte est « cliquez ici » ou une URL nue déclenche un avertissement nommé, avec le fichier fautif.
• Un nom d’icône inconnu arrête la construction, et le fichier qui déclare les icônes alimente aussi le tableau descriptif que le standard québécois exige.
• Les contrastes des deux thèmes sont mesurés par un script, pas estimés à l’œil.

Il existe une ligne de CSS que presque tout le monde a écrite au moins une fois :

:focus {
  outline: none;
}

Elle a l’air inoffensive. Elle retire un contour bleu que le navigateur dessine autour du bouton qu’on vient d’atteindre, et que beaucoup de gens trouvent laid.

Pour qui se sert d’une souris, le focus est presque invisible : le pointeur indique la position, et le contour ne fait que doubler une information qu’on a déjà.

Pour qui navigue au clavier, à la commande vocale, ou avec un contacteur, le focus est la position. C’est le seul endroit où la prochaine touche va agir. Sans indicateur visible, il faut appuyer sur Tab et deviner. C’est comme déplacer un curseur de texte invisible.

Ne pas retirer le contour : le dessiner mieux. Depuis que :focus-visible existe, le navigateur sait déjà distinguer un focus donné par le clavier d’un focus donné par un clic. Le contour n’apparaît donc que quand il sert.

:focus-visible {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 3px;
}

Le décalage n’est pas cosmétique. Il fait que la couleur voisine de l’anneau est toujours le fond de la page, jamais celui du bouton entouré. Sans lui, un anneau bleu autour d’un bouton bleu n’a aucun contraste avec ce qu’il entoure.

C’est exactement ce que fait ce site, et vous pouvez le vérifier : appuyez sur Tab.

L’image sans texte de remplacement est la violation d’accessibilité la plus fréquente du web. Elle se produit toujours de la même façon : quelqu’un écrit vite, oublie l’attribut, et personne ne s’en aperçoit parce que la page a l’air parfaite.

La réponse habituelle est un contrôle qui signale le problème. Un avertissement, une ligne dans un rapport, un point orange dans un tableau de bord.

Ça ne marche pas, pour une raison simple : un avertissement défile dans un journal que personne ne relit. Le site se publie quand même. Le défaut part en production, et il y reste.

Ce site prend l’option inverse. Le crochet de rendu des images vérifie le texte de remplacement, et fait échouer la construction s’il manque. Rien n’est publié.

L’échange est le bon : on remplace un défaut invisible et permanent par un défaut visible et immédiat. Le second se règle en trente secondes.

Rien, sauf qu’on décrit ses images. Et décrire une image oblige à se demander ce qu’elle apporte, ce qui est aussi la bonne question à se poser avant de l’ajouter.

Remplacez ce paragraphe. Une ou deux phrases suffisent pour dire ce à quoi vous passez vos journées, sans titre de poste ni jargon de métier.

Je suis non-voyant et j’utilise un lecteur d’écran. Ce site est donc construit dans l’ordre inverse de l’habitude : la structure d’abord, le style ensuite, et rien ne repose sur le fait de voir quoi que ce soit.

Le résultat vise le niveau AA des règles du W3C, plus les critères supplémentaires que le Québec rend obligatoires. La page Accessibilité dit précisément ce qui a été vérifié, avec quels outils, et ce qui ne l’est pas.

Ce site ne publie aucune coordonnée, par choix.

Le site vise le SGQRI 008 version 3.0, le Standard sur l’accessibilité des sites Web du gouvernement du Québec (site externe) , en vigueur depuis le 29 avril 2024.

Ce standard est plus exigeant que le simple « niveau AA ». Il demande :

Ce site n’a ni vidéo, ni son, ni formulaire d’authentification, ni geste de glissement. Les critères 1.2.x, 3.3.8 et 2.5.7 ne s’y appliquent donc pas, ce qui est une facilité et non un mérite.

C’est le seul écart connu à ce jour. S’il s’en découvre d’autres, ils seront ajoutés ici plutôt que corrigés en silence.

Les couleurs des deux thèmes ne sont pas jugées à l’œil. Un script parcourt le fichier de jetons, résout chaque référence, et calcule le rapport de contraste de chaque paire selon la formule des règles du W3C.

54 paires mesurées, toutes au-dessus de leur seuil. Le texte courant atteint 16,46:1 en thème clair et 15,59:1 en thème sombre, soit au-delà du niveau AAA, qui demande 7:1. La marge la plus étroite est le contour d’un champ de saisie sur une fiche, à 3,8:1 pour un seuil de 3:1.

Le même script vérifie que les deux déclarations du thème sombre, celle qui suit le réglage du système et celle qui suit un choix explicite, ne divergent pas. Une duplication non vérifiée finit toujours par diverger.

Certaines erreurs ne produisent pas d’avertissement : elles empêchent le site d’être produit.

• Une image sans texte de remplacement arrête la construction. La sortie de secours pour une image vraiment décorative demande de l’écrire noir sur blanc, donc un oubli et une décision ne se ressemblent pas.
• Un nom d’icône inconnu arrête la construction. Le fichier qui déclare les icônes est aussi celui qui engendre le tableau plus bas : une icône ne peut donc pas exister sans sa description.
• Une entrée de navigation sans adresse arrête la construction, plutôt que de produire un lien mort répété sur chaque page.
• Un lien dont le texte est vague ou qui affiche une URL nue déclenche un avertissement nommant le fichier fautif.

Le 2 août 2026, par lecture de l’arbre d’accessibilité du navigateur et mesure du rendu réel.

Le seul contenu qui dépasse 320 pixels est l’intérieur des blocs de code, dans une zone qui défile et qu’on atteint au clavier. Les règles du W3C autorisent explicitement le défilement horizontal pour ce qui exige une disposition en deux dimensions.

La recherche a été essayée : le compte de résultats est annoncé une seule fois, quand il se stabilise ; le pluriel s’accorde ; cocher un filtre réannonce le nouveau compte ; une requête sans résultat propose quatre chemins réels ; et le bouton « Effacer la recherche » rend le focus au champ.

Les deux thèmes ont été mesurés sur le rendu réel, et les chiffres obtenus sont identiques au centième à ceux calculés par le script.

Le standard demande que les icônes employées soient décrites. Les voici toutes.

Aucune ne porte seule une information : chacune accompagne un texte qui dit la même chose, de sorte que le sens survit si le dessin n’est pas perçu.

• Il suit votre réglage d’apparence. Clair ou sombre selon votre système, dès la première image affichée, sans éclair blanc au chargement. Un sélecteur dans l’en-tête permet de choisir autrement, et le choix est retenu.
• Il respecte votre taille de police. Aucune taille n’est figée en pixels : tout suit le réglage de votre navigateur.
• Il ne bloque pas le zoom. À 400 %, le contenu se replie en une colonne sans défilement horizontal.
• Il s’arrête si vous demandez moins de mouvement. Sous prefers-reduced-motion , toutes les transitions tombent à zéro. Aucune information ne dépend d’une animation.
• Il fonctionne sans JavaScript. Tout se lit et se parcourt. Seules la recherche et le bouton de copie du code en ont besoin, et ils se cachent plutôt que de rester inertes.
• Il ne vous suit pas. Aucun témoin, aucune analyse, aucune ressource chargée depuis un autre serveur. Les polices sont servies d’ici.
• Il s’imprime correctement. La navigation disparaît, et l’adresse des liens externes part avec le papier.

Le 2 août 2026.

C’est un des moyens que les règles du W3C reconnaissent pour atteindre n’importe quelle page autrement qu’en suivant la navigation, avec la recherche et les liens entre pages.

Chaque graphique est un vrai tableau, avec sa légende et ses en-têtes. Les barres colorées sont un ornement calculé à partir des mêmes nombres. Retirez tous les styles de cette page : elle reste entière.