Accessibility

La fonction CSS random() ajoute des variations visuelles directement dans le navigateur, sans JavaScript ni boucles Sass. Brecht De Ruyte l’illustre avec des lettres légèrement inclinées, des cartes animées au scroll et des ombres adaptées à leur rotation. Pour garder une géométrie cohérente, une clé de cache peut synchroniser plusieurs propriétés, tandis que sibling-index() calcule la structure d’un éventail de cartes.

Ces effets conviennent surtout aux éléments décoratifs : l’article déconseille de randomiser les grilles, les textes courants ou les cibles interactives. Le déploiement navigateur étant en cours, il recommande une base stable avec @supports, ainsi que le respect de prefers-reduced-motion et des besoins des lecteurs d’écran.

Pour réunit une extension navigateur, un CLI, une extension VS Code et un vérificateur de contraste pour examiner l’accessibilité selon WCAG 2.2. Les audits indiquent les éléments concernés et expliquent les corrections ; les critères qui exigent un jugement humain restent signalés pour revue.

Le CLI peut faire échouer une étape CI en présence de constats, générer un rapport HTML pour un site et exposer des outils à un agent via MCP. La couverture automatisée aide sur 51 des 86 critères WCAG 2.2, sans prétendre statuer sur leur conformité : une checklist accompagne les constats pour guider la vérification manuelle.

Front-End Checklist organise plus de 350 règles en parcours de vérification pour l’accessibilité, le CSS, la performance, la sécurité, la vie privée et le SEO. Le site propose des listes guidées pour les lancements et les audits, et expose les mêmes standards aux agents via MCP pour structurer les revues de code.

Cet exemple rassemble des classes Tailwind CSS qui agrandissent la zone interactive d’un élément sans modifier son apparence. Cette technique aide à rendre les contrôles plus faciles à toucher, notamment sur mobile.

Ce playground présente plusieurs variantes de feuilles modales React : points d’arrêt, contenu défilant, plein écran et prise en compte du clavier. Il inclut aussi des exemples d’accessibilité et de mouvement réduit.

Ce plugin Stylelint recherche des pratiques CSS susceptibles de fragiliser le layout ou l’accessibilité. Ses configurations permettent d’intégrer ces vérifications à la qualité de code du projet.