peterruiter/claude-build-framework

Passage complet de conformité WCAG 2.2 AA – axe-core via Playwright sur chaque page principale en clair et sombre à 1440/390 (et 320 pour le réaffichage), sondes pour le lien d'évitement, un h1, lang, focus visible et non masqué, cibles de 24 px et défilement latéral, un script clavier pour les boîtes de dialogue/tiroirs/onglets, vérifications manuelles (espacement du texte, zoom, alternatives de glisser‑déposer, authentification accessible), tests contractuels pour les composants partagés et le contraste des thèmes, correctifs, limitations connues avec raisons et une page de déclaration d'accessibilité. À utiliser lorsque l'utilisateur demande un « passage accessibilité », « WCAG », « audit a11y », « lecteur d'écran » ou avant la première publication publique.

Qu'est-ce que claude-build-framework ?

Cette compétence permet de réaliser un audit d'accessibilité complet selon les critères WCAG 2.2 AA sur l'ensemble d'une application web. Elle automatise les tests via Playwright et axe-core sur toutes les pages principales, en modes clair et sombre, à différentes largeurs d'écran (1440, 390 et 320 px). Elle inclut des sondes pour détecter la présence d'un lien d'évitement, d'un unique `h1`, de l'attribut `lang`, du focus visible et non masqué, des cibles tactiles de 24 px et l'absence de défilement latéral. Un script de navigation clavier vérifie le piégeage du focus et le retour dans les boîtes de dialogue/tiroirs/onglets. Des vérifications manuelles sont également listées : espacement du texte, zoom à 200 %, alternatives aux gestes de glisser‑déposer, authentification accessible, etc. Les résultats sont compilés sous forme de tableau avant/après et les correctifs sont appliqués au niveau des composants partagés. La compétence génère une déclaration d'accessibilité à intégrer dans l'application. Elle est conçue pour fonctionner avec Claude Code et d'autres agents développeurs utilisant Playwright, axe-core et un framework front‑end classique.

Compatible avec✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/peterruiter/claude-build-framework/tree/HEAD/skills/a11y-pass

Documentation

Passage accessibilité

Référence : ${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md et ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md. WCAG 2.2 AA fait partie de la définition de « fait » pour chaque fonctionnalité ; ce passage est le balayage complet supplémentaire.

1. Configuration

Épingler et installer les outils en dehors du produit : npm i --prefix <dossier> playwright@<version épinglée> axe-core@<version épinglée> ; A11Y_TOOLS=<dossier>.
Exécuter l'application localement avec des données de démonstration sur une base de données vierge et votre propre port.
Créer tests/a11y/pages.json listant chaque page principale (et les boîtes de dialogue via open), avec lang par page et un module signIn pour les pages connectées.
Exécuter le passage lorsque peu d'autres agents s'exécutent ; petites modifications ciblées dans les composants partagés.

2. Mesure (« avant »)

node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-before.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <pages larges>
node --test "tests/contracts/*.test.mjs"     # contraste des thèmes en clair et sombre

De plus, le script clavier pour les motifs de l'application (lien d'évitement → contenu principal, piégeage du focus et retour dans les boîtes de dialogue, Échap au niveau le plus haut, touches fléchées dans les listes d'onglets, Entrée sur les lignes cliquables) et les vérifications manuelles : espacement du texte (1.4.12), zoom 200 %, alternatives aux gestes de glisser‑déposer (2.5.7), saisie redondante (3.3.7), authentification accessible (3.3.8), graphiques avec tableaux, emails (lang, tableaux de présentation, textes alternatifs, sombre).

3. Résultats et correctifs

Tableau : # | Critère | Où | Sévérité (grave/moyen/mineur) | Corrigé ?. Corriger au niveau du composant partagé (un jeton de cercle de focus, un assistant de touches de boîte de dialogue, lignes cliquables, touches composites, régions de défilement, régions dynamiques, décalage de défilement). Traduire chaque nouveau nom accessible dans chaque langue configurée. Ajouter des paires de contraste pour les nouvelles combinaisons de couleurs.

4. Garde-fou

Tests contractuels pour les composants partagés (noms, régions dynamiques présentes avant les messages, paires de jetons, mouvement réduit, liens d'évitement).
Résultats restants dans tests/a11y/known.json avec raisons, identiques aux limitations connues sur la page de déclaration d'accessibilité (cible WCAG 2.2 AA, limitations, contact ; dans chaque langue configurée ; liée depuis chaque pied de page).

5. Rapport

Avant → après : comptes de violations par surface, comptes par sévérité (corrigé / non corrigé), captures d'écran, ce qui n'a pas été fait (lecteurs d'écran, interfaces natives, audit externe). Une entrée dans les Nouveautés. Section STATE.md.