Créer un composant React accessible
Créez des composants React pleinement accessibles respectant WCAG 2.1 avec navigation clavier, ARIA et support des lecteurs d'écran.
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
Tu es un expert en accessibilité web (a11y) et développeur React senior. Je dois créer un composant React accessible qui respecte les normes WCAG 2.1 niveau AA. **Composant à créer :** [EX: Modal/Dialog, Menu déroulant, Tableau de données avec tri, Formulaire multi-étapes, Carrousel, Autocomplete] **Spécifications fonctionnelles :** [DÉCRIRE_LE_COMPORTEMENT_ATTENDU] **Contexte technique :** - React [VERSION] avec TypeScript - Librairies disponibles : [EX: Radix UI, Headless UI, ou implémentation from scratch] - Design system : [EX: Tailwind CSS, Material UI, CSS modules] - Support navigateurs : [EX: Chrome, Firefox, Safari, Edge + lecteurs d'écran NVDA, VoiceOver] Crée le composant avec une accessibilité complète : 1. **Structure HTML sémantique** : éléments HTML natifs appropriés avant de recourir aux attributs ARIA. 2. **Attributs ARIA** : aria-label, aria-describedby, aria-expanded, aria-controls, roles ARIA appropriés selon le pattern WAI-ARIA. 3. **Navigation clavier** : Tab, Shift+Tab, Entrée, Escape, flèches directionnelles selon le pattern de navigation approprié. 4. **Focus management** : focus trap dans les modals, retour du focus à l'élément déclencheur à la fermeture. 5. **Contenu pour lecteurs d'écran** : annonces dynamiques avec aria-live, textes alternatifs descriptifs. 6. **Tests d'accessibilité** : tests avec jest-axe et exemples de tests manuels avec lecteurs d'écran. 7. **Documentation** : README avec les raccourcis clavier et les comportements attendus des lecteurs d'écran.
Pourquoi ce prompt fonctionne
<p>Ce prompt suit la philosophie 'HTML sémantique d'abord, ARIA ensuite' qui est le principe fondamental de l'accessibilité web : un bouton HTML natif est infiniment plus accessible qu'un div avec role='button' car il bénéficie automatiquement du comportement clavier natif des navigateurs.</p><p>La gestion du focus est l'aspect le plus souvent manqué dans les composants React : piéger le focus dans une modal, retourner le focus à l'élément déclencheur après fermeture sont des comportements invisibles pour les utilisateurs visuels mais essentiels pour ceux naviguant au clavier ou avec un lecteur d'écran.</p><p>L'intégration de jest-axe dans les tests automatisés est une pratique moderne qui catch automatiquement les violations d'accessibilité courantes dans le pipeline CI, empêchant les régressions d'accessibilité d'atteindre la production.</p>
Cas d'usage
Résultat attendu
Un composant React TypeScript complet avec accessibilité WCAG 2.1, navigation clavier, attributs ARIA corrects et tests d'accessibilité.
Formez-vous en profondeur
Découvrez le skill complet sur Prompt Guide pour maîtriser cette technique de A à Z.
Voir sur Prompt GuideTermes du glossaire
Prompts similaires
Apprendre les bases de Git pour débutants
Apprenez Git de zéro avec des explications imagées, des exemples concrets, un workflow pratique et un cheatsheet des commandes essentielles.
Définir une stratégie Git pour une équipe
Définissez une stratégie Git complète adaptée à votre équipe : branching model, conventions, code review et gestion des releases.
Configurer un pipeline CI/CD avec GitHub Actions
Configurez un pipeline CI/CD professionnel avec GitHub Actions couvrant tests, sécurité, build Docker et déploiement multi-environnements.
Écrire des tests d'intégration pour une API
Créez des tests d'intégration API complets avec setup de base de données, authentification, CRUD et scénarios end-to-end.