Thème - Louis Fortinhttps://beta.lfortin.ovh/etiquettes/theme/Le site personnel de Louis Fortin : des billets, des projets, et un thème construit pour être lisible par tout le monde.fr-ca2026-2026 Louis FortinHugo 0.164.0Sun, 02 Aug 2026 10:00:00 -0400Banc d'essai du thèmehttps://beta.lfortin.ovh/blog/banc-d-essai/https://beta.lfortin.ovh/blog/banc-d-essai/Sun, 02 Aug 2026 10:00:00 -0400Louis FortinAccessibilitéHugoCSSThèmeUn billet qui emploie tous les éléments que le thème sait rendre, pour que rien ne se casse en silence.Ce billet n’a pas grand-chose à dire. Son travail est ailleurs : il emploie tous les éléments que le thème sait rendre, dans un seul document. Quand une modification casse quelque chose, elle le casse ici, visiblement, plutôt que trois mois plus tard sur un vrai billet.

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

Le texte courant

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.

Un titre de troisième niveau

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

Les listes

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.

Les encadrés

Note

Un encadré d’information. Le mot « Note » est écrit, l’icône le double, et la barre latérale le triple. Retirez la couleur : le sens tient encore.

Astuce

Une astuce, en sarcelle.

Important

Quelque chose à ne pas manquer.

Avertissement

Un avertissement. Sa barre latérale est plus épaisse, parce que la hiérarchie ne doit pas reposer sur la seule teinte.

Attention

Une mise en garde, le niveau le plus haut.

Et une citation ordinaire, sans type :

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

Un tableau

Critère Niveau Ce qu’il demande
1.1.1 A Un texte de remplacement pour tout contenu non textuel
1.4.3 AA Un contraste de 4,5:1 pour le texte courant
2.4.11 AA Le focus n’est pas masqué
2.4.13 AAA Un anneau de focus d’au moins 2 px à 3:1

Du code

Un bloc en CSS :

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 :

Go 
// 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é :

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

Un bloc qu’on ouvre

Pourquoi la table des matières n'est pas dans une colonne latérale

Parce qu’une colonne latérale ferait diverger l’ordre visuel de l’ordre du document. Ce qu’on voit à droite du billet arrive, dans le code, soit avant soit après le contenu, jamais à côté. Une personne qui écoute la page reçoit donc un ordre que la mise en page dément.

Au-dessus du billet, les deux ordres coïncident à toutes les largeurs.

Une note de bas de page

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

  1. Comme celle-ci. Le lien de retour ramène exactement à l’endroit quitté. ↩︎

]]>Ce site et son thèmehttps://beta.lfortin.ovh/projets/ce-site/https://beta.lfortin.ovh/projets/ce-site/Sun, 02 Aug 2026 08:00:00 -0400Louis FortinAccessibilitéHugoCSSThèmeUn site Hugo et un thème maison qui visent le niveau AA du W3C, plus les critères supplémentaires du standard québécois.

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

Ce qu’il vise

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.

Ce qu’il n’a pas

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.

Ce qu’il fait de particulier

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