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
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Prompts similaires
Prompt pour optimiser vos requêtes SQL et booster les performances
Un prompt complet pour analyser, diagnostiquer et optimiser vos requêtes SQL avec des recommandations d'indexation et de réécriture adaptées à votre moteur de base de données.
Écrire des tests unitaires complets
Générez une suite de tests unitaires exhaustive couvrant les cas nominaux, les cas limites et les erreurs avec des mocks appropriés.
Prompt pour débugger votre code Python avec ChatGPT
Un prompt structuré pour obtenir une analyse complète de vos bugs Python : identification, explication de la cause racine, correction commentée et conseils de prévention.
Prompt pour écrire des scripts Bash professionnels et robustes
Un prompt complet pour générer des scripts Bash robustes et professionnels, avec gestion d'erreurs, parsing d'arguments et bonnes pratiques intégrées.