Catégories - Louis Fortin https://lfortin.ovh/categories/ Les grands sujets du site. Un billet appartient à une catégorie, rarement à deux. fr-ca 2026-2026 Louis Fortin Hugo 0.164.0 Mon, 01 Jan 0001 00:00:00 +0000 À propos https://lfortin.ovh/a-propos/ https://lfortin.ovh/a-propos/ Louis Fortin Qui je suis, ce que je fais, et pourquoi ce site est construit comme il l'est.

Ce que je fais

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.

Pourquoi ce site est construit comme ça

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.

Me joindre

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

]]> Accessibilité https://lfortin.ovh/accessibilite/ https://lfortin.ovh/accessibilite/ Louis Fortin Ce que ce site vise, comment ça a été vérifié, et ce qui n'est pas conforme. Cette page dit ce que ce site vise, avec quels outils ça a été vérifié, et ce qui n’est pas conforme. Elle est écrite pour être utile, pas pour rassurer : vous y trouverez la liste des écarts assumés aussi bien que celle des réussites.

Ce que le site vise

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 :

Ensemble Ce qui est exigé
WCAG 2.1, niveau A tous les critères
WCAG 2.1, niveau AA tous, sauf 1.2.4 sous-titres en direct et 1.2.5 audiodescription
WCAG 2.1, niveau AAA 2.3.2 trois flashs, 3.1.4 abréviations, 2.5.6 modalités concomitantes
WCAG 2.2, niveau A 3.2.6 aide cohérente, 3.3.7 saisie redondante
WCAG 2.2, niveau AA 2.4.11 focus non masqué, 2.5.7 mouvements de glissement, 2.5.8 taille de cible, 3.3.8 authentification accessible
WCAG 2.2, niveau AAA 2.4.13 apparence du focus

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.

Ce qui n’est pas conforme

Important

Le site n’offre aucun moyen de me joindre. Pas d’adresse courriel, pas de formulaire, pas de page Contact.

C’est un écart délibéré au SGQRI 008 3.0, qui demande qu’une offre d’assistance figure sur la page d’accessibilité. Je le sais et je l’assume : je ne souhaite pas publier de coordonnées.

À noter que le critère WCAG 3.2.6 Aide cohérente, lui, n’est pas en échec : il ne s’applique que si un mécanisme d’aide existe sur plusieurs pages, et il n’y en a aucun.

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.

Comment ça a été vérifié

Les contrastes, mesurés et non estimés

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.

Des garde-fous qui arrêtent la construction

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.

Ce qui a été parcouru à la main

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

Ce qui a été vérifié Résultat
Arrêts de tabulation sur un billet complet, de bout en bout 52, dans l’ordre du document
Attributs tabindex positifs, qui désordonnent le parcours aucun
Points de repère sans nom aucun
Bannières et zones main par page une seule de chaque
Sauts de niveau dans le plan de titres aucun
Police effectivement chargée Atkinson Hyperlegible Next
Taille du texte courant 16 px au minimum
Interligne du texte courant 1,6
Caractères par ligne, sur écran large 72, mesurés sur du texte français rendu
Caractères par ligne, à 320 pixels 39
Défilement horizontal de la page à 320 px de large aucun
Cibles interactives sous 24 px aucune, hors liens en pleine phrase, que le critère exempte

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.

Ce qui n’a pas été vérifié

Avertissement

Aucun test avec un vrai lecteur d’écran n’a encore été consigné ici.

La vérification décrite plus haut passe par l’arbre d’accessibilité du navigateur, qui est solide mais qui n’est pas NVDA , ni le Narrateur de Windows, ni VoiceOver . Ces logiciels ont chacun leurs habitudes, et un site correct dans l’arbre peut encore surprendre à l’oreille.

Le standard québécois demande de nommer les technologies d’assistance employées pour la vérification, avec leurs versions. Cette ligne restera vide tant qu’un test réel n’aura pas eu lieu, plutôt que d’être remplie par anticipation.

Les icônes du site

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.

Les 13 icônes du site, ce qu'elles représentent et où elles apparaissent. Toutes sont décoratives : chacune accompagne un texte qui porte le même sens, de sorte qu'aucune information ne dépend d'un dessin.
Icône Nom Ce qu'elle représente Où elle apparaît
Astuce Une ampoule vue de face, avec deux petits traits horizontaux sous le culot. Le mot « Astuce » est écrit à côté. Devant un encadré de conseil dans un billet.
Attention Un octogone régulier, la forme d'un panneau d'arrêt, contenant un point d'exclamation. Le mot « Attention » est écrit à côté. Devant un encadré qui signale un risque réel dans un billet.
Avertissement Un triangle aux coins arrondis, pointe en haut, contenant un point d'exclamation. Le mot « Avertissement » est écrit à côté, et l'encadré porte aussi une bordure plus épaisse : trois signaux, dont deux survivent à l'absence de couleur. Devant un encadré qui prévient d'une conséquence dans un billet.
Vers la page suivante Un chevron simple pointant vers la droite. Le libellé « Page suivante » est écrit à côté. Dans le bouton « Page suivante » de la pagination.
Vers la page précédente Un chevron simple pointant vers la gauche, comme la pointe d'une flèche sans sa hampe. Le libellé « Page précédente » est écrit à côté. Dans le bouton « Page précédente » de la pagination.
Confirmation Une coche, trait descendant court puis trait montant long. Le mot « Copié » apparaît en même temps et est annoncé dans une région live, donc la coche n'est qu'un doublon visuel. Remplace l'icône de copie pendant les deux secondes qui suivent une copie réussie.
Copier Deux rectangles aux coins arrondis qui se chevauchent, celui du dessus légèrement décalé vers le bas à droite, image d'un document dupliqué. Dans le bouton de copie d'un bloc de code.
Flux RSS Un point plein en bas à gauche d'où partent deux arcs concentriques vers le haut à droite, comme une onde qui se propage. C'est le symbole usuel des flux de syndication depuis les années 2000. Lien vers un flux de syndication, dans le pied de page et à côté des flux de catégorie.
Important Une bulle de parole rectangulaire avec une pointe en bas à gauche, contenant un point d'exclamation. Le mot « Important » est écrit à côté. Devant un encadré à ne pas manquer dans un billet.
Lien vers un autre site Un carré dont le coin supérieur droit est ouvert, avec une flèche qui en sort en diagonale vers le haut à droite. Elle signale que la destination est ailleurs. Le texte « site externe », réservé au lecteur d'écran, dit la même chose, donc l'information ne dépend jamais du dessin. Accolée à tout lien qui quitte le site.
Lien permanent vers une section Deux maillons de chaîne ovales entrelacés en diagonale. Le lien porte comme nom accessible « Lien permanent vers la section », suivi du titre de la section, donc sa destination est annoncée en toutes lettres. À la fin de chaque titre de section dans un billet.
Note Un cercle contenant un « i » minuscule, le point au-dessus de la barre. Le mot « Note » est écrit à côté, en toutes lettres. Devant un encadré d'information dans un billet.
Recherche Une loupe : un cercle avec un manche court partant en diagonale vers le bas à droite. Le bouton porte le mot « Rechercher » à côté, donc la loupe ne porte rien à elle seule. Dans le bouton d'envoi du formulaire de recherche.

Ce que le site fait pour vous

  • 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.

Dernière évaluation

Le 2 août 2026.

]]> Plan du site https://lfortin.ovh/plan-du-site/ https://lfortin.ovh/plan-du-site/ Louis Fortin Toutes les pages du site sur une seule page, dans leur hiérarchie. Cette page liste tout ce que contient le site, dans sa structure réelle. Elle existe pour les gens, pas pour les moteurs de recherche : ceux-là ont leur propre fichier, sitemap.xml.

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.

]]> Statistiques https://lfortin.ovh/statistiques/ https://lfortin.ovh/statistiques/ Louis Fortin Tout ce que le site sait compter sur lui-même, recalculé à chaque génération. Chaque chiffre de cette page est calculé au moment où le site est construit, à partir de son contenu réel. Rien n’est saisi à la main, rien n’est mis en cache, et il n’y a pas une ligne de JavaScript : la page que vous lisez est le résultat du dernier passage du générateur.

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.

]]>