accessibility-compliancepar Seth Hobson

Accessibility Compliance Skill.

Un skill Claude Code et Codex pour la revue de conception : interfaces conformes WCAG 2.2 avec accessibilité mobile et support des technologies d'assistance.

Revue de conception et accessibilité
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md

--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools

En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 2 402 caractères au total

01 Ce qu'il fait

Ce que le skill accessibility-compliance fait dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill met en œuvre des interfaces conformes WCAG 2.2 avec accessibilité mobile et prise en charge des technologies d'assistance. Il guide les agents à travers le HTML sémantique, les patterns ARIA, la navigation au clavier, la gestion du focus, la compatibilité avec les lecteurs d'écran et les annonces de contenu dynamique. Le skill couvre iOS VoiceOver, Android TalkBack et les lecteurs d'écran de bureau (NVDA, JAWS).

Il privilégie les éléments natifs aux ARIA personnalisés, respecte les préférences utilisateur comme prefers-reduced-motion et prefers-contrast, et s'appuie sur des tests menés avec des outils automatisés (axe DevTools, WAVE, Lighthouse) et de véritables technologies d'assistance. Le skill traite les violations les plus fréquentes : texte alternatif manquant, contraste insuffisant, pièges au clavier et champs de formulaire sans étiquette.

Ce qu'il produit

Des interfaces conformes à WCAG 2.2, avec des patterns ARIA appropriés, la gestion du focus et la prise en charge des lecteurs d'écran

Voir l'exemple de prompt ↗

Fonctionnement

01
Concevoir des interactions avec le clavier en priorité
Veillez à ce que tous les composants interactifs fonctionnent sans souris, en mettant en place la navigation au clavier avant d'ajouter les événements de pointeur.

02 Trouvez celui qui vous convient

Quand utiliser le Skill accessibility-compliance

Utilisez le skill accessibility-compliance dans Claude Code ou Codex lorsque la tâche consiste en une design review de ce type. La portée et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

Mettre une application web ou un site en conformité WCAG 2.2 niveau AA ou AAA
Créer des interfaces accessibles aux lecteurs d'écran, compatibles avec VoiceOver, NVDA, JAWS ou TalkBack
Ajouter la navigation au clavier et la gestion du focus aux composants interactifs
Réaliser des audits d'accessibilité et corriger les non-conformités des interfaces existantes
Prendre en charge les préférences utilisateur de mouvement réduit et de contraste élevé dans l'interface

03 Dans le skill

Ce que le skill accessibility-compliance apporte à la revue de design

2 choses que le fichier SKILL.md demande à Claude Code ou Codex de faire, dans l'ordre des sections du fichier.

Bonnes pratiques
Privilégier les éléments natifs plutôt qu'ARIA lorsque possible ; inclure les personnes en situation de handicap dans les tests utilisateurs ; concevoir des interactions fonctionnelles sans souris
Outils de test
axe DevTools, WAVE, Lighthouse ; VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android) ; NoCoffee (vision), Silktide (handicaps divers)

04 Mettez-le en pratique

Installer accessibility-compliance dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter accessibility-compliance à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

Forme CLI générique skills pour plugins/ui-design/skills/accessibility-compliance/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de révision de conception

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Audit the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Testez manuellement avec VoiceOver sur macOS ou iOS pour vérifier les annonces et la navigation du lecteur d'écran
Utilisez des simulateurs de vision comme NoCoffee et des simulateurs de handicap comme Silktide pour tester diverses déficiences

Dans OpenDesign, importez accessibility-compliance depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branche main
Fichier du skill: plugins/ui-design/skills/accessibility-compliance/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4236bb9
License: MIT D'après LICENSE.
Étoiles du dépôt: 39 635 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour accessibility-compliance.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand utiliser ce skillConformité WCAG, lecteurs d'écran, navigation au clavier, gestion du focus, formulaires, accessibilité mobile, audits
Patterns détaillés et exemples concretsRenvoie à references/details.md pour la documentation des patterns lorsque les indications de premier niveau ne suffisent pas
Bonnes pratiquesHuit règles fondamentales : HTML sémantique, tests avec de vrais utilisateurs, priorité au clavier, styles de focus, alternatives textuelles, zoom, régions live, préférences
Problèmes courantsTexte alternatif manquant, contraste insuffisant, pièges au clavier, champs de saisie sans étiquette, lecture automatique, contrôles personnalisés défaillants, liens d'évitement, ordre de focus
Outils de testOutils automatisés (axe, WAVE, Lighthouse), lecteurs d'écran en manuel (VoiceOver, NVDA, JAWS, TalkBack), simulateurs (NoCoffee, Silktide)

Description du skill lui-même

« Implémenter des interfaces conformes WCAG 2.2 avec accessibilité mobile, motifs de conception inclusive et support des technologies d'assistance. À utiliser lors de l'audit d'accessibilité, de l'implémentation de motifs ARIA, de la conception pour lecteurs d'écran ou pour garantir des expériences utilisateur inclusives. »

Description du front-matter provenant de SKILL.md. Le fichier complet fait environ 2 402 caractères. Lire le fichier complet sur GitHub.

Conformité accessibilité

Exécutez accessibility-compliance sur une vraie tâche de revue de design.

Téléchargez OpenDesign, importez accessibility-compliance depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills