💻 Développement

accessibility-checker

Vérifie et améliore l'accessibilité web (WCAG 2.1).

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- accessibility-checker --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } accessibility-checker -Launch"

🚀 Déjà installé ?

claude "/accessibility-checker"

Ou tapez /accessibility-checker dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

accessibilitéa11yWCAGscreen readerARIAcontrasteaccessiblehandicaplecteur d'écran

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/accessibility-checker ~/.claude/skills/

Source : dev-skills/accessibility-checker

📖 Manuel

Accessibility Checker

Workflow

  1. Audit des critères WCAG 2.1 niveau AA : parcourir les quatre principes — Perceivable (contenu perceptible), Operable (interface utilisable), Understandable (contenu compréhensible), Robust (compatible technologies d'assistance) — et identifier les violations par niveau de criticité.
  1. Navigation clavier : vérifier l'ordre de tabulation logique (tab order suit le flux visuel), que le focus est toujours visible (outline non supprimé), que des skip links existent pour sauter la navigation, et qu'aucune keyboard trap ne bloque l'utilisateur.
  1. Sémantique HTML : contrôler l'utilisation correcte des landmarks (<main>, <nav>, <header>, <footer>), la hiérarchie des titres (h1 > h2 > h3 sans saut), les labels associés aux champs, et les rôles implicites des éléments natifs.
  1. ARIA correctement utilisé : s'assurer que aria-label, aria-describedby, aria-expanded, aria-controls et les live regions (aria-live) sont appliqués uniquement là où le HTML natif ne suffit pas — pas d'ARIA redondant ou incorrect.
  1. Contrastes et couleurs : vérifier le ratio de contraste (minimum 4.5:1 pour le texte normal, 3:1 pour les grands textes ≥18px), s'assurer que l'information n'est jamais transmise par la couleur seule, et tester en mode daltonien.
  1. Images et médias : valider les textes alternatifs (alt) informatifs pour les images porteuses de sens, alt="" pour les images décoratives, sous-titres pour les vidéos, audio descriptions pour les contenus visuels complexes, et transcriptions pour les podcasts.
  1. Formulaires accessibles : associer chaque champ à son <label> via for/id, fournir des messages d'erreur clairs liés au champ (aria-describedby), ne pas bloquer la validation sur le seul format visuel, et permettre la correction avant soumission.
  1. Tests avec outils : intégrer axe-core ou Lighthouse pour les tests automatisés, tester manuellement avec NVDA (Windows) et VoiceOver (macOS/iOS), et ajouter pa11y-ci dans la pipeline CI/CD pour prévenir les régressions.

Règles