Frontend Accessibility
Modèles d'accessibilité pour React et Next.js : HTML sémantique, ARIA bien utilisé, étiquetage des formulaires, navigation clavier et gestion du focus, avec exemples MAUVAIS/BON tirés de vraies revues de code.
- Quoi
- Modèles d'accessibilité pour React et Next.js : HTML sémantique, ARIA bien utilisé, étiquetage des formulaires, navigation clavier et gestion du focus, avec exemples MAUVAIS/BON tirés de vraies revues de code.
- Coût
- Gratuit
- Prérequis
- Utilisez « Accessibilité frontend » avec votre Muse.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor : des modèles d'accessibilité pratiques pour React et Next.js qui corrigent les problèmes les plus souvent signalés en revue de code : étiquettes de formulaire manquantes, mauvais usage d'ARIA, éléments interactifs non sémantiques et navigation clavier cassée. Chaque modèle est présenté en paire MAUVAIS/BON : étiquettes déconnectées des champs contre appariement htmlFor/id, astérisques purement visuels contre required plus aria-required, textes d'erreur orphelins contre liaison aria-describedby, divs avec onClick contre vrais boutons, et le même traitement pour modales, menus déroulants, infobulles et onglets avec une vraie gestion du focus. Il explique aussi quand utiliser ARIA et quand le HTML natif fait déjà le travail, pour arrêter de saupoudrer des attributs aria-* qui luttent contre la plateforme. À utiliser pour construire ou relire des composants, corriger des findings de lint a11y, ou câbler le support clavier. Par @affaan-m, listé ici avec crédit à son créateur. Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : des modèles, pas un substitut aux tests avec un vrai lecteur d'écran ; les besoins d'accessibilité varient selon le public, validez avec de vrais utilisateurs quand ça compte. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans MuseLe prompt d'installation ci-dessous inclut déjà les étapes de vérification : votre agent suit la checklist communautaire avant d'installer tout ce qui contient du code exécutable. Vous en voulez plus ?
Utilisez « Accessibilité frontend » avec votre Muse. Prérequis : rien à installer. Pur guide pour React/Next.js ; ayez sous la main le composant à vérifier. 1. Ouvrez le skill : https://github.com/affaan-m/ECC/blob/main/skills/frontend-a11y/SKILL.md et copiez le texte complet du SKILL.md. 2. Collez-le dans un chat avec Muse et ajoutez : « Relis ce composant pour des problèmes d'accessibilité : [collez le composant]. » 3. Corrigez chaque modèle MAUVAIS signalé (étiquettes, ARIA, clavier, focus) avant de livrer. Astuce : lancez-le sur les formulaires, modales, menus déroulants et tout ce qui a un onClick sur un div. Sécurité : un skill est du texte d'instructions ; il n'exécute rien tout seul. Testez avec un vrai lecteur d'écran pour tout ce qui est critique.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.