Compétences fixing-accessibility
♿

fixing-accessibility

Sûr

Résoudre les problèmes d'accessibilité

Les problèmes d'accessibilité peuvent empêcher les utilisateurs en situation de handicap d'utiliser votre produit. Cette compétence fournit des règles claires et des corrections pratiques pour les problèmes d'accessibilité courants dans les composants d'interface.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "fixing-accessibility". /fixing-accessibility button.jsx

Résultat attendu:

  • Violation : Le bouton icône manque d'un nom accessible (ligne 5)
  • Pourquoi c'est important : Les utilisateurs de lecteur d'écran ne peuvent pas identifier l'action du bouton
  • Correction : Ajouter aria-label ou utiliser aria-labelledby pour fournir un nom accessible

Utilisation de "fixing-accessibility". Comment rendre une boîte de dialogue modale accessible ?

Résultat attendu:

  • Exigences clés pour les modales accessibles :
  • 1. Piéger le focus à l'intérieur de la boîte de dialogue lorsqu'elle est ouverte
  • 2. Restaurer le focus sur l'élément déclencheur à la fermeture
  • 3. Définir le focus initial sur le premier élément interactif
  • 4. Fermer avec la touche Échap
  • 5. Assurer les attributs aria-modal et role='dialog' appropriés

Audit de sécurité

Sûr
v1 • 2/16/2026

All static findings are false positives. The skill is a benign accessibility guidelines document containing slash commands for invoking the skill and technical terms related to accessibility (aria-invalid, aria-describedby). No actual security risks detected.

1
Fichiers analysés
120
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé

Motifs détectés

False Positive: External Commands DetectionFalse Positive: Weak Cryptographic AlgorithmFalse Positive: System Reconnaissance
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
85
Contenu
50
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Appliquer les règles d'accessibilité aux nouvelles interfaces

Lors de la création de nouveaux boutons, formulaires ou boîtes de dialogue, invoquez la compétence pour vous assurer que tout le travail suit les bonnes pratiques d'accessibilité dès le départ.

Examiner le code existant pour détecter des problèmes

Exécutez la compétence sur le code d'interface existant pour identifier les violations d'accessibilité, comprendre leur impact et obtenir des suggestions de correction ciblées.

Apprendre les bonnes pratiques d'accessibilité

Utilisez la compétence comme guide de référence pour apprendre l'accès clavier, la gestion du focus, l'utilisation d'ARIA et le HTML sémantique.

Essayez ces prompts

Appliquer au travail actuel 
/fixing-accessibility

Apply these constraints to any UI work in this conversation.
Examiner un fichier spécifique 
/fixing-accessibility <file>

Review the file against all rules below and report violations (quote the exact line or snippet), explain why it matters (one short sentence), and provide a concrete fix (code-level suggestion).
Corriger un bouton 
Comment rendre un bouton avec uniquement une icône accessible ?
Corriger une erreur de formulaire 
Comment dois-je associer les messages d'erreur aux champs de formulaire pour l'accessibilité ?

Bonnes pratiques

  • Privilégier des corrections minimales et ciblées plutôt qu'un remaniement important pour réduire les risques
  • Utiliser les éléments HTML natifs avant d'ajouter des attributs ARIA
  • Tester manuellement la navigation clavier après avoir appliqué les corrections
  • Citer les extraits de code exacts lors du signalement des violations

Éviter

  • Ne pas utiliser div ou span comme boutons sans support clavier complet
  • Ne pas ajouter d'attributs aria lorsque les sémantiques natives résolvent déjà le problème
  • Ne pas supprimer les contours de focus sans fournir un remplacement visible
  • Ne pas se fier uniquement à la couleur pour transmettre un état ou une signification

Foire aux questions

Quel est l'ordre de priorité pour corriger les problèmes d'accessibilité ?
L'ordre de priorité est : noms accessibles (critique), accès clavier (critique), focus et boîtes de dialogue (critique), sémantique (élevé), formulaires et erreurs (élevé), annonces (moyen-élevé), contraste et états (moyen), médias et mouvements (moyen-bas), et limites des outils (critique).
Cette compétence corrige-t-elle automatiquement les problèmes d'accessibilité ?
Non. La compétence signale les violations avec des explications et des suggestions de correction, mais vous devez appliquer les corrections manuellement à votre code.
Que sont les noms accessibles et pourquoi sont-ils importants ?
Les noms accessibles sont ce que les lecteurs d'écran annoncent pour les éléments interactifs. Chaque bouton, lien et champ de saisie doit avoir un nom accessible significatif afin que les utilisateurs malvoyants puissent comprendre et naviguer dans l'interface.
Quand dois-je utiliser ARIA par rapport au HTML natif ?
Privilégiez toujours les éléments HTML natifs avec une accessibilité intégrée. Utilisez ARIA uniquement lorsque les éléments natifs ne peuvent pas exprimer la sémantique requise. Rappelez-vous : si vous pouvez utiliser un bouton natif, n'utilisez pas de div avec role='button'.
Comment tester si mes corrections d'accessibilité fonctionnent ?
Utilisez la navigation clavier uniquement (Tab, Shift+Tab, Entrée, Échap), les tests de lecteur d'écran (NVDA, VoiceOver) et les inspecteurs d'accessibilité du navigateur. La compétence fournit des conseils mais ne remplace pas les tests manuels.
Qu'est-ce que le piégeage du focus dans les boîtes de dialogue ?
Le piégeage du focus maintient le focus clavier à l'intérieur d'une boîte de dialogue modale lorsqu'elle est ouverte. Les utilisateurs ne doivent pas pouvoir tabuler vers les éléments derrière la boîte de dialogue. Lorsque la boîte de dialogue se ferme, le focus doit revenir à l'élément qui l'a ouverte.

Détails du développeur

Auteur

ibelick

Licence

MIT

Dépôt

https://github.com/ibelick/ui-skills/tree/main/skills/fixing-accessibility/

Réf

main

Structure de fichiers

📄 SKILL.md