Présentation
Lors de la réalisation d'audits d'accessibilité (RGAA ou WCAG), nous utilisons de nombreux outils (extensions navigateur, bookmarklets, Devtools F12, etc) et de simples styles utilisateurs ont toute leur utilité pour nous faciliter la tâche.
Je proposerai dans les prochaines semaines et mois jusqu'à une douzaine de styles, les plus complets possibles.
Ces styles ont les limitations de CSS, mais en 2023 on peut tout de même pousser assez loin avec :has() et "factoriser" leur code avec :where(), les Custom Properties (variables) CSS, etc
2 styles disponibles actuellement
- Tableaux et leurs détails (
role,th,scope,colspanetrowspan,headers) - Tabindex et ses valeurs (en particulier positives mais également nulles hors éléments interactifs ou négatives pour info)
Note sur leur utilisation : les "messages secondaires" en partie droite de la page n'apparaissent que si nécessaire. Par exemple pas d'affichage du total de colspan et rowspan s'il n'y en a pas dans la page.
S'il y a des éléments cachés dans le DOM, ils ne sont pas comptés par CSS Counters mais sont détectés par le pseudo :has(). Des emojis informatifs ne sont alors pas corrects (mais le compteur est correct).
Installation
- Si vous avez déjà installé l'extension Stylus dans votre navigateur, faites une sauvegarde de vos styles actuels !
Dans le menu de l'extension, boutons "Gestion des styles" puis "Exporter". Un fichier JSON est téléchargé ; - Installez l'extension pour Firefox ou Chrome ;
- En cliquant sur chaque lien de style ci-dessus, Stylus devrait reconnaître l'extension
.user.csset vous proposer de l'installer. Pensez à cocher la case "Recherchez les mises à jour" (fortement conseillé !) et cliquez sur "Installez le style".
Tests sur des pages d'exemple
- Pour tester les styles liés au tableau, ces tableaux d'un tutoriel de la WAI ;
- Pour tester
tabindex, une page de résultat de DuckDuckGo ou la documentation de cet attribut sur MDN.
Licence
Ces styles sont placés sous licence AGPL 3.0.
L'entête UserCSS de chaque style précise tous les détails nécessaires.
Crédits
L'astuce du comptage des éléments et de l'affichage du total en CSS provient des styles Stylus d'Access42. Merci à iels !
Le principe de l'astuce :
html { counter-reset: a; }
selector { counter-increment: a; }
html::after { content: "Selector total : " counter(a); }