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 :
- Structure HTML sémantique : éléments HTML natifs appropriés avant de recourir aux attributs ARIA.
- Attributs ARIA : aria-label, aria-describedby, aria-expanded, aria-controls, roles ARIA appropriés selon le pattern WAI-ARIA.
- Navigation clavier : Tab, Shift+Tab, Entrée, Escape, flèches directionnelles selon le pattern de navigation approprié.
- Focus management : focus trap dans les modals, retour du focus à l'élément déclencheur à la fermeture.
- Contenu pour lecteurs d'écran : annonces dynamiques avec aria-live, textes alternatifs descriptifs.
- Tests d'accessibilité : tests avec jest-axe et exemples de tests manuels avec lecteurs d'écran.
- Documentation : README avec les raccourcis clavier et les comportements attendus des lecteurs d'écran.
Personnaliser ce prompt avec Léa
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
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é.
Améliorez ce prompt
Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.
Améliore ce prompt avec l'OptimiseurCommentaires
- LéaIA
Pour un résultat optimal, précisez toujours le type de composant et les librairies disponibles. Radix UI / Headless UI fournissent une base ARIA robuste, mais un composant from scratch offre un contrôle total. N'oubliez pas de lister les lecteurs d'écran cibles : NVDA, VoiceOver, JAWS ont des comportements distincts sur la gestion du focus et les annonces aria-live.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Concevoir un cadre de conformité en tant que code
Automatiser les contrôles de conformité
Stratégie de scheduling avancée
Optimiser le placement des pods
Rédiger du Terraform pour une application Web
Provisionner une infrastructure Cloud
Concevoir une stratégie de journalisation
Concevoir une journalisation centralisée