Aller au guide d’utilisation
fixing-accessibilitypar Julien Thibeaut

Fixing Accessibility Skill.

Un skill Claude Code et Codex pour la revue de design : audite et corrige les erreurs ARIA, clavier, focus, contraste et formulaires.

  • Revue de conception et accessibilité
  • Rapport de revue
ibelick/ui-skills · skills/fixing-accessibility/SKILL.mdSKILL.md
--- name: fixing-accessibility description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. --- ## how to use ## when to apply ## rule categories by priority ## common fixes ## review guidance
En-tête et titres de section lus depuis le fichier amont le 14 septembre 2026 · 4 714 caractères au total

01 Ce qu'il fait

Ce que fait le skill fixing-accessibility 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

Un ensemble de règles de référence et de correction pour l'accessibilité HTML, destiné aux designers et développeurs qui ajoutent ou révisent une UI interactive dans un agent de code. Il classe neuf catégories de règles par priorité et impact, des noms accessibles, de l'accès clavier, du focus et des dialogues, et des limites d'outils au niveau critique, jusqu'à la sémantique, les formulaires et les erreurs, les annonces, le contraste et les états, puis les médias et le mouvement.

Chaque catégorie est une courte liste d'exigences concrètes, telles que aria-label sur les boutons icône seule, aucun tabindex supérieur à 0, et aria-invalid sur les champs en échec. Un bloc de corrections communes montre du HTML avant-après pour les boutons icône seule, les div en guise de bouton, et les erreurs de formulaire non liées, et le mode de revue rapporte chaque violation avec la ligne citée, une phrase expliquant pourquoi, et une correction au niveau du code.

Rapport de revue
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Appliquer les contraintes sur place

    Exécuter la commande brute transforme les règles en contraintes permanentes sur tout travail d'UI effectué dans cette conversation, et non en une seule passe d'audit.

  2. 02
    Pointer vers un fichier pour un rapport de violations

    Avec un argument de fichier, il vérifie ce fichier au regard de toutes les règles et rapporte chaque violation sous forme d'une ligne ou d'un extrait cité, une courte phrase sur pourquoi cela compte, et une correction au niveau du code.

  3. 03
    Traiter les catégories par ordre de priorité

    Les règles sont regroupées en catégories classées avec une note d'impact ; les noms accessibles occupent la priorité 1, marquée critique.

  4. 04
    Garder le changement minimal

    Le skill précise explicitement qu'il ne doit pas réécrire de grandes parties de l'UI, et que les corrections doivent être minimales et ciblées.

02 Trouvez celui qui vous convient

Quand utiliser le Skill fixing-accessibility

Utilisez le skill fixing-accessibility dans Claude Code ou Codex quand le travail consiste en une revue design de ce type. Les cas d'usage et limites ci-dessous proviennent du fichier propre au skill.

Bon choix

  • Ajouter ou modifier des boutons, liens, champs, menus, dialogues, onglets ou listes déroulantes dans une interface existante.
  • Construire des formulaires avec validation, états d'erreur et texte d'aide.
  • Implémenter des raccourcis clavier ou d'autres interactions personnalisées.
  • Travail sur les états de focus, le piégeage du focus ou le comportement des modales.
  • Rendu de contrôles avec icône seule, ou ajout d'interactions au survol uniquement et de contenu masqué.

Connaître les limites

  • Refactorisation de code sans rapport avec le problème d'accessibilité à corriger.
  • Utilisation de bidouilles à base de rôles là où un bouton, un lien ou un champ natif ferait le même travail.
  • Lecture automatique de médias avec son.

03 Dans le skill

Règles que le skill fixing-accessibility donne à Claude Code et Codex

8 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. Nommer chaque contrôle avec icône seule

    Les boutons avec icône seule doivent avoir un nom accessible via aria-label ou aria-labelledby, pas seulement un glyphe visible.

  2. Ne jamais utiliser un tabindex positif

    Les valeurs de tabindex supérieures à 0 sont exclues d'emblée ; l'ordre de tabulation suit la séquence naturelle.

  3. Piéger, initialiser et restaurer le focus dans les dialogues

    Les modales doivent piéger le focus lorsqu'elles sont ouvertes, définir le focus initial à l'intérieur du dialogue, et rendre le focus à l'élément déclencheur à leur fermeture.

  4. Lier les erreurs à leur champ

    Les erreurs doivent être associées au champ via aria-describedby afin que le message soit annoncé avec le champ.

  5. Marquer les champs en erreur comme invalides

    Un champ invalide doit définir aria-invalid, et pas seulement afficher un style d'erreur.

  6. Ne pas ajouter d'ARIA quand la sémantique native suffit déjà

    Ne pas ajouter d'aria quand la sémantique native résout déjà le problème ; ceci relève des limites de l'outil en tant que contrainte critique.

  7. Garder le focus visible

    Les contours de focus ne peuvent pas être supprimés, sauf si un remplacement visible est fourni.

  8. Ne pas migrer les bibliothèques d'UI

    Remplacer une bibliothèque d'UI est hors périmètre, sauf demande explicite de l'utilisateur.

04 Mettez-le en pratique

Installer fixing-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 fixing-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/ibelick/ui-skills --skill fixing-accessibility

Forme générique de la CLI skills pour skills/fixing-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

Le SKILL.md ne contient pas d'exemple de prompt ; ce démarrage est rédigé à partir du résumé en une ligne du catalogue. Remplacez la ligne de tâche par votre vrai brief.

Starter prompt
Use the fixing-accessibility skill on the material I attach. What the skill should do here: Audits and fixes ARIA, keyboard, focus, contrast, and form errors. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Source : prompt de démarrage rédigé à partir de l'utilisation en une ligne du catalogue (pas à partir du SKILL.md).

Vérifiez le premier résultat

Avant d'accepter le résultat, recherchez ceci dans la transcription et les fichiers :

  • Le résultat est livré sous forme de rapport de revue, tel que listé dans le catalogue pour ce skill.
  • L'agent nomme le skill fixing-accessibility dans son plan ou sa transcription avant de produire le résultat.
  • Votre propre contenu, vos noms et vos chiffres apparaissent inchangés dans la sortie.

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

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.

Repository
github.com/ibelick/ui-skills Branche main
Fichier du skill
skills/fixing-accessibility/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 79081ab
License
MIT Depuis LICENSE.
Étoiles du dépôt
8 402 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt ibelick/ui-skills, qui contient 5 skills dans ce catalogue. Ce n'est pas une note ou un compteur d'utilisation pour fixing-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 corriger les problèmes d'accessibilité HTML incluant les labels ARIA, la navigation au clavier, la gestion du focus, le contraste des couleurs et les erreurs de formulaire. À utiliser lors de l'ajout de contrôles interactifs, formulaires, dialogues ou de la vérification de la conformité WCAG. »

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

Fixing Accessibility

Exécuter fixing-accessibility sur une tâche de revue de design réelle.

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

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-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