Banc d'essai du thème
Un billet qui emploie tous les éléments que le thème sait rendre, pour que rien ne se casse en silence.
Dans ce billet
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
Lien permanent vers la section : Le texte courantDu 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
Lien permanent vers la section : Un titre de troisième niveauPour 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 :
- D’abord ceci.
- Ensuite cela.
- 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
Lien permanent vers la section : Les encadrésNote
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é.
| 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 |
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.Un bloc qu’on ouvre
Lien permanent vers la section : Un bloc qu’on ouvrePourquoi 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
Lien permanent vers la section : Une note de bas de pageLe thème gère aussi les notes de bas de page1, qui produisent des liens aller-retour corrects.
Notes
Comme celle-ci. Le lien de retour ramène exactement à l’endroit quitté. ↩︎