[A11y] Lisibilité : liens de prose, contrastes et blocs extensibles - #693
Le-Polemil wants to merge 4 commits into
Conversation
c4a7d00 to
2a5f492
Compare
for commit 59c5d0e
📊 Relevé visuel des contrastes — support de relecturePage récapitulative de tous les contrastes modifiés par le chantier (les quatre lots, pas seulement celui-ci), avec captures avant/après et ratios mesurés : https://yohtml.apps.elao.io/view/C7s3crPJshhVrd6vr6z-h Les commentaires y sont ouverts. Ce qu'elle contient d'utile pour relire cette PRLe sélecteur de catégories de Et le soulignement des liens de prose sur les cinq conteneurs rédactionnels. Deux corrections à mes annonces précédentesEn préparant ce relevé j'ai revérifié chaque cas avec les sélecteurs exacts, et la description de cette PR surestimait son effet :
Le seul changement de contraste réellement livré par cette PR est donc le sélecteur de catégories. Le vrai sujet reste devant nousMesure sur 28 pages couvrant tous les gabarits, 2 877 éléments de texte : le site n'emploie que 25 des 81 combinaisons possibles entre ses neuf tokens. 12 de ces 25 échouent au seuil de 4,5:1, et elles portent 18 % du texte. Les deux pires sont aussi parmi les plus fréquentes — blanc sur Aucun correctif de code ne rattrape cela : c'est un arbitrage de charte. La matrice en fin de page, avec les combinaisons inutilisées grisées, est faite pour servir de support à l'atelier P2-1. |
1 participant
Troisième lot du chantier d'accessibilité RGAA (P1-4 · P1-5 partiel · P1-8).
Le cadrage a changé, et il faut le dire
L'audit annonçait « 10 contrastes corrigeables par substitution de token ». La mesure sur le rendu réel donne 88 échecs de contraste sur la seule page
/blog. J'avais ensuite avancé que la cause était les règlesatrop larges qui écrasent les composants — c'était faux aussi.Ce que dit la mesure :
$color-brandsur$color-secondary(motif omniprésent) donne 2,82:1 ;$color-brandsur$color-tertiary, 1,24:1. Aucun rapport avec la spécificité : ce sont deux couleurs de marque incompatibles.Cette PR livre donc tout ce qui ne demande pas d'arbitrage design. La refonte de la palette est le sujet P2-1, qui réclamait déjà un atelier — la matrice de contraste des 9 tokens est disponible pour le préparer.
Ce que ça corrige
1. Les règles de prose écrasaient les boutons (WCAG 1.4.3)
Une règle
.conteneur a { color }est en (0,1,1) ; la classe posée sur le<a>n'est qu'en (0,1,0). Un bouton placé dans un tel conteneur héritait donc de la couleur de la prose sur son propre fond — combinaison que personne n'a prévue. C'est ce qui a produit les deux 1,21:1 corrigés dans #690.Recensé sur tout le build : 5 collisions réelles, dans
.page-services,.page-methodologyet.page-carriere. L'exclusion est centralisée dans$self-styled-links(base/_variables.scss), ce qui évite cinq variantes divergentes et remplace l'exclusion ad hoc introduite dans #690.2. Les liens de prose n'étaient soulignés que dans les articles (WCAG 1.4.1 / RGAA 10.6)
Le commit
e11bcddcavait traité.article-content. La règle est mutualisée dans un mixinprose-linkset appliquée aux quatre autres conteneurs rédactionnels : offres d'emploi, fiches glossaire, études de cas, biographies de membres.Plus
.contact__infos: le bloc est en$color-primary, ses liens en$color-info— seule la teinte distinguait l'adresse cliquable du nom « elao » qui la précède.3. Le sélecteur de catégories (WCAG 1.4.3)
Deux de ses quatre tuiles affichaient du blanc sur un fond qui ne le supporte pas :
$color-lightà 1,98:1 et$color-brandà 3,42:1. Elles passent à$color-text— 8,62:1 et 4,99:1. Les deux autres ($color-primary9,63:1,$color-info5,15:1) gardent le blanc.4. Une classe CSS coupée par une espace —
banner-se rvices__textdansapplication.html.twig, qui ne s'appliquait donc pas.Deux divergences assumées par rapport à l'audit
.link--brandn'est pas souligné. L'audit le demandait. Mesuré : ses 374 occurrences n'apparaissent jamais dans un<p>,<li>ou<td>— c'est toujours un lien isolé, avec sa flèche décorative en:before/:after. Il n'y a pas de texte environnant dont le distinguer, donc pas d'échec 1.4.1. Le souligner alourdirait sans bénéfice.L'icône des
.admonitionreste à 1,98:1. C'est un glyphe icomoon de 60px posé encontentCSS sur une pastille$color-light: décoration pure, le sens vient du texte et de la classe de variante. 1.4.11 ne couvre que les objets graphiques nécessaires à la compréhension. Le corriger serait un choix design — il rejoint P2-1.Ce qui reste hors de cette PR
Les ~51 règles
&:focusqui ne changent qu'une couleur : elles ne posent plus problème pour le focus depuis #690, qui fournit un anneau visible sur tout le site. L'indication n'est donc plus chromatique.Et le gros morceau : la palette. C'est P2-1.
Tests
make lint.twigOK (52 fichiers) ·make testOK (607 pages) · build Encore OK.make lint.php-cs-fixeretmake lint.phpstanéchouent en local sur PHP 8.4 (binaires plafonnés à 8.3) — sans rapport avec ces changements, et aucun fichier PHP n'est touché ici.Vérifié sur le CSS compilé après rebase : 40 sélecteurs portent l'exclusion
$self-styled-links;.contact__infos aest souligné ; les tuiles 1 et 3 du sélecteur de catégories passent bien en#390725, texte et SVG, en:hovercomme en.active; les 5 conteneurs rédactionnels sont couverts ; la classe corrigée a disparu du HTML généré.Compatibilité avec #695 — les appels de notes de bas d'article ont atterri dans
_article-content.scssentre-temps. Conflit résolu en conservant les deux : le mixin remplace la règle ad hoc, et letext-decoration: none !importantdessup.footnote-refcontinue de gagner. Vérifié sur le CSS compilé.Un commit en moins qu'à l'origine : le correctif des hauteurs figées de
.miniature-highlight(WCAG 1.4.4) a été livré indépendamment surmainentre-temps. Mon commit est devenu sans objet, je l'ai retiré plutôt que de ne réécrire que des commentaires.Reste à valider à la main : c'est une PR de rendu visuel. Le sélecteur de catégories est le changement le plus visible — deux de ses quatre tuiles passent d'un texte blanc à un texte foncé au survol. Puis les cinq conteneurs rédactionnels nouvellement soulignés.