98.8K+Télécharger
Aller au guide d’utilisation
accessibilitypar Addy Osmani

Accessibility Skill.

Un skill Claude Code et Codex pour la revue de conception : audite et améliore l'accessibilité web selon WCAG 2.2.

  • Revue de conception et accessibilité
  • Rapport de revue
Télécharger OpenDesignVoir le guide d'utilisation
addyosmani/web-quality-skills · skills/accessibility/SKILL.mdSKILL.md
--- name: accessibility description: Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". --- ## Evidence-led audit workflow ## WCAG Principles: POUR ## Conformance levels ## Perceivable ## Operable ## Understandable
En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 14 265 caractères au total

01 Ce qu'il fait

Ce que le Skill d'accessibilité 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 audite et corrige l'accessibilité web selon WCAG 2.2, organisée autour de POUR — Perceivable, Operable, Understandable, Robust — et des niveaux de conformité A, AA et AAA. Il suit un workflow guidé par les preuves : lorsqu'une page rendue est disponible, lancez un audit d'accessibilité Lighthouse en direct (lighthouse_audit avec Chrome DevTools MCP), utilisez les nœuds en échec pour localiser le composant, inspectez l'arbre d'accessibilité avec take_snapshot, puis corrigez la source et relancez.

Si les outils en direct font défaut, Lighthouse CLI ou axe couvrent la moitié automatisée et les mêmes vérifications manuelles s'appliquent. Le skill fournit des règles au niveau du code pour le texte alternatif, les ratios de contraste, la visibilité du focus, la taille des cibles, la réduction des animations, les erreurs de formulaire et l'authentification accessible, ainsi qu'une liste de triage classée critique, sérieux et modéré.

Ce qu'il produit

  • Une liste de problèmes priorisée, groupée en niveaux Critique (à corriger immédiatement), Sérieux (à corriger avant la mise en ligne) et Modéré (à corriger bientôt), avec des exemples nommés.
  • Balisage corrigé et extraits prêts à coller, dont un utilitaire visuellement masqué pour exposer les libellés des boutons-icônes aux technologies d'assistance.
  • Implémentations de référence complètes dans references/A11Y-PATTERNS.md, couvrant les libellés de formulaire, le piège de focus des modales, le lien d'évitement, les onglets ARIA, les régions live, la gestion des erreurs et les commandes de lecteur d'écran.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Lancer un audit d'accessibilité en direct

    Partez d'une page rendue et lancez un audit d'accessibilité Lighthouse en direct, en mode navigation mobile pour les pages publiques générales ou en mode snapshot lorsque le rechargement ferait perdre l'état authentifié.

  2. 02
    Localiser le composant en échec

    Utilisez les nœuds d'audit en échec pour pointer vers le composant ou le template précis plutôt que de parcourir tout le dépôt à la recherche de motifs génériques.

  3. 03
    Inspecter l'arbre d'accessibilité

    Lisez un instantané de l'arbre d'accessibilité rendu pour vérifier les noms, les rôles, les états, les repères et la structure des titres, puis parcourez le flux concerné au clavier.

  4. 04
    Corriger la source et revérifier

    Modifiez la source plutôt que la sortie rendue, puis répétez le même audit et la même interaction manuelle pour confirmer la correction.

  5. 05
    Repli sur l'outillage CLI

    Lorsque l'outillage navigateur en direct n'est pas disponible, associez la sortie de Lighthouse CLI ou d'axe aux mêmes vérifications manuelles : l'automatisation seule ne couvre qu'une partie des barrières.

02 Trouvez celui qui vous convient

Quand utiliser le Skill accessibility

Utiliser le skill accessibility dans Claude Code ou Codex lorsque le travail consiste en une revue de conception de ce type. La portée et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

  • Une demande formulée comme un audit a11y, un travail de conformité WCAG, la prise en charge des lecteurs d'écran, la navigation au clavier ou « rendre accessible ».
  • Des équipes visant le niveau AA, que le fichier traite comme la cible standard et une obligation légale dans de nombreuses juridictions.
  • Des pages où les en-têtes ou pieds de page collants avalent l'anneau de focus du clavier, un critère nouveau dans WCAG 2.2.
  • Interfaces qui doivent être entièrement utilisables sans souris, y compris les widgets personnalisés construits à partir d'éléments non interactifs.

Connaître les limites

  • Les liens texte en ligne, les dimensions contrôlées par le navigateur et les cibles dont le cercle de 24px n'en chevauche aucune autre sont exemptés de la règle de taille minimale des cibles.
  • Le niveau AAA est traité comme optionnel plutôt que comme une exigence.
  • Anti-pattern que le fichier signale : ajouter une activation clavier manuelle à un bouton natif, ce qui déclenche l'action deux fois, car Entrée et Espace déclenchent déjà le clic.

Quoi fournir

  • Une page rendueLe workflow en direct démarre dès qu'une page rendue est disponible, puisque l'audit, la liste des nœuds et l'arbre d'accessibilité en proviennent tous.
  • Le mode de navigation de la pageIndiquez à l'agent s'il s'agit d'une page publique générale ou d'un parcours où un rechargement ferait perdre un état authentifié ou créé par l'utilisateur, car c'est ce qui détermine le mode de navigation mobile ou de snapshot.
  • Le parcours clavier à testerPréparez-vous à parcourir au clavier l'interaction concernée pendant l'audit, en parallèle de l'inspection de l'arbre d'accessibilité.

03 Dans le skill

Les règles que le Skill d'accessibilité donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Privilégier d'abord un élément natif

    Un bouton natif, un lien et les contrôles de formulaire gèrent déjà l'activation par Entrée/Espace, le focus et la sémantique pour les technologies d'assistance : la gestion manuelle du clavier est donc un dernier recours pour les éléments que vous ne pouvez pas remplacer.

  2. Conserver un style de focus visible

    Ne jamais supprimer les contours de focus.

  3. Respecter la taille minimale de cible de 24 × 24

    Au niveau AA, les cibles interactives doivent mesurer au moins 24 × 24 pixels CSS, la taille de 44 × 44 étant recommandée comme dimension tactile confortable pour les boutons, les cases à cocher et les libellés de boutons radio.

  4. Neutraliser les animations sur demande

    Sous prefers-reduced-motion, le fichier ramène les durées d'animation et de transition à 0.01ms, plafonne le nombre d'itérations à 1 et réinitialise scroll-behavior sur auto.

  5. Ne jamais signaler par la couleur seule

    Les états d'erreur combinent la couleur avec une icône et du texte ; le balisage associe aria-invalid="true" à aria-describedby pointant vers l'élément du message d'erreur.

  6. Annoncer les erreurs et y déplacer le focus

    Transmettez les erreurs aux lecteurs d'écran avec role="alert" ou aria-live, marquez les champs fautifs et déplacez le focus sur la première erreur lors de la soumission.

  7. Réduire la charge cognitive de l'authentification

    Les parcours de connexion ne doivent pas dépendre de la mémorisation d'un mot de passe ni de la résolution d'un puzzle, sauf si le copier-coller ou le remplissage automatique fonctionne, si une alternative existe (clé d'accès ou lien par e-mail) ou si le test repose sur la reconnaissance d'objets ou sur un contenu personnel.

04 Mettez-le en pratique

Installer accessibility 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 à 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/addyosmani/web-quality-skills --skill accessibility

Forme générique de la CLI skills pour skills/accessibility/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 [page URL or route] with Lighthouse and then fix the accessibility problems in the source. The form inputs in [component path] have no programmatically associated labels, the icon buttons have no accessible names, and focus outlines are being removed on [element]. Re-run the same audit afterwards and check keyboard navigation and target sizes.

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 :

  • Parcourez toute la page avec Tab et activez les contrôles avec Entrée et Espace.

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

Télécharger OpenDesignLire 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
Addy Osmani
Repository
github.com/addyosmani/web-quality-skills Branche main
Fichier du skill
skills/accessibility/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit afa8da9
License
MIT D'après LICENSE ; le SKILL.md indique « MIT ».
Étoiles du dépôt
2 786 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt addyosmani/web-quality-skills. Il ne s'agit ni d'une note ni d'un compteur d'utilisation pour accessibility.
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.
Description du skill lui-même
« Auditer et améliorer l'accessibilité web selon les directives WCAG 2.2. À utiliser lorsqu'on demande "améliorer l'accessibilité", "audit a11y", "conformité WCAG", "support lecteur d'écran", "navigation au clavier" ou "rendre accessible". »

Description en en-tête du SKILL.md. Le fichier complet fait environ 14 265 caractères. Lire le fichier complet sur GitHub.

Accessibility

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

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

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows