# Accessibility · Veille technologique

[Source canonique](<https://sebastien.rigaux.be/veille/tags/accessibility>)

Interfaces utilisables au clavier, avec des technologies d’assistance et selon différents besoins sensoriels ou moteurs.

## [Accessibilité web : le livre de Laura Kalbag est gratuit en ligne](<https://sebastien.rigaux.be/veille/liens/accessibilite-web-le-livre-de-laura-kalbag-est-gratuit-en-ligne>)

Laura Kalbag met *Accessibility for Everyone* en lecture gratuite sur le Web. Publié initialement en 2017 chez A Book Apart, le livre offre une ressource accessible à la communauté web pour aborder l’accessibilité.

L’autrice précise que les bonnes pratiques ont peu changé, mais que certains outils recommandés et intitulés de postes peuvent être dépassés ; les WCAG approchent par ailleurs de leur version 3.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/veille/liens/accessibilite-web-le-livre-de-laura-kalbag-est-gratuit-en-ligne.md>) · [Ressource originale](<https://accessibilityforeveryone.site/>)

## [Modern Web Guidance : des pratiques web actuelles pour les agents de code](<https://sebastien.rigaux.be/veille/liens/modern-web-guidance-des-pratiques-web-actuelles-pour-les-agents-de-code>)

Modern Web Guidance fournit aux agents de code des recommandations expertes sur les API du navigateur, CSS, performance et accessibilité, pour les orienter vers des solutions natives plutôt que vers des patterns legacy. Le dépôt rassemble 232 fonctionnalités et 186 cas d’usage, sous forme de skills installables dans plusieurs agents.

Le CLI recherche un guide en local, puis l’injecte dans le contexte de l’agent. Les consignes intègrent compatibilité Baseline, fallbacks ciblés et évaluation automatisée ; le projet est annoncé en preview.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/veille/liens/modern-web-guidance-des-pratiques-web-actuelles-pour-les-agents-de-code.md>) · [Ressource originale](<https://github.com/GoogleChrome/modern-web-guidance>)

## [The Website Specification : les exigences techniques d’un site web](<https://sebastien.rigaux.be/veille/liens/the-website-specification-les-exigences-techniques-dun-site-web>)

Cette spécification rassemble 178 sujets sur les responsabilités techniques d’un site : HTML, accessibilité, sécurité, performance, SEO, vie privée et résilience, entre autres. Chaque sujet explique son importance et sa mise en œuvre, avec des éléments classés comme requis, recommandés, facultatifs ou à éviter.

La checklist transforme ces critères en vérifications oui/non, ce qui aide à repérer les lacunes puis à les contrôler après correction. Fondée sur des sources primaires et indépendante des plateformes, la spécification est aussi consultable par les agents via un serveur MCP en lecture seule, sans authentification pour les outils de référence.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/veille/liens/the-website-specification-les-exigences-techniques-dun-site-web.md>) · [Ressource originale](<https://specification.website/>)

## [Interop 2027 : dix propositions CSS, de l’accessibilité aux animations](<https://sebastien.rigaux.be/veille/liens/interop-2027-dix-propositions-css-de-laccessibilite-aux-animations>)

Josh W. Comeau passe en revue dix propositions envisagées pour Interop 2027 : fonctions CSS, formes de bordure personnalisées, requêtes liées aux ancres et au défilement, ordre de lecture, animations de dimensions intrinsèques ou décorations de grille. Plusieurs répondent à des problèmes concrets, comme synchroniser la navigation au clavier avec une mise en page responsive via `reading-flow`, ou dessiner les séparateurs de grille sans cellules DOM vides.

Ces propositions n’ont pas toutes le même degré de maturité. En octobre 2026, plusieurs sont disponibles dans Chromium, mais pas encore dans Firefox ni Safari ; `inherit()` n’est implémenté dans aucun navigateur. L’article montre où l’amélioration progressive est envisageable, avec des garde-fous comme `@supports` pour les transitions de

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/veille/liens/interop-2027-dix-propositions-css-de-laccessibilite-aux-animations.md>) · [Ressource originale](<https://www.joshwcomeau.com/css/interop-2027/>)

## [CSS \`random()\` : doser l’imperfection dans les interfaces](<https://sebastien.rigaux.be/veille/liens/css-random-doser-limperfection-dans-les-interfaces>)

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.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/veille/liens/css-random-doser-limperfection-dans-les-interfaces.md>) · [Ressource originale](<https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/>)

## [Pour : intégrer l’audit WCAG au navigateur, au code et à la CI](<https://sebastien.rigaux.be/veille/liens/pour-integrer-laudit-wcag-au-navigateur-au-code-et-a-la-ci>)

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.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/veille/liens/pour-integrer-laudit-wcag-au-navigateur-au-code-et-a-la-ci.md>) · [Ressource originale](<https://pour.dev/>)

## [Une checklist front-end de plus de 350 règles](<https://sebastien.rigaux.be/veille/liens/une-checklist-front-end-de-plus-de-350-regles>)

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.

2026-09-18 · [Markdown](<https://sebastien.rigaux.be/veille/liens/une-checklist-front-end-de-plus-de-350-regles.md>) · [Ressource originale](<https://frontendchecklist.io/>)

## [Étendre la zone cliquable d’un contrôle avec Tailwind CSS](<https://sebastien.rigaux.be/veille/liens/etendre-la-zone-cliquable-d-un-controle-avec-tailwind-css>)

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.

2026-03-15 · [Markdown](<https://sebastien.rigaux.be/veille/liens/etendre-la-zone-cliquable-d-un-controle-avec-tailwind-css.md>) · [Ressource originale](<https://bazza.dev/craft/2026/hit-area>)

## [React Modal Sheet : explorer les comportements d’une feuille modale](<https://sebastien.rigaux.be/veille/liens/react-modal-sheet-explorer-les-comportements-d-une-feuille-modale>)

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.

2026-03-15 · [Markdown](<https://sebastien.rigaux.be/veille/liens/react-modal-sheet-explorer-les-comportements-d-une-feuille-modale.md>) · [Ressource originale](<https://temzasse.github.io/react-modal-sheet/#/>)

## [Defensive CSS : détecter les pièges de layout avec Stylelint](<https://sebastien.rigaux.be/veille/liens/defensive-css-detecter-les-pieges-de-layout-avec-stylelint>)

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.

2024-12-23 · [Markdown](<https://sebastien.rigaux.be/veille/liens/defensive-css-detecter-les-pieges-de-layout-avec-stylelint.md>) · [Ressource originale](<https://www.npmjs.com/package/stylelint-plugin-defensive-css>)
