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
Automatisez vos commits Git avec l'IA : le prompt ultime
Ce prompt analyse un diff Git et génère automatiquement des messages de commit structurés selon les conventions du projet, avec découpage atomique si nécessaire.
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.
Refactoring de code legacy
Refactorisez du code legacy de manière sécurisée et incrémentale en suivant les principes SOLID et les bonnes pratiques modernes.
Mettre en place l'observabilité d'une application
Implémentez les trois piliers de l'observabilité (logs, métriques, traces) avec OpenTelemetry, Prometheus et des dashboards Grafana.