Create an Accessible React Component
Create fully accessible React components meeting WCAG 2.1 with keyboard navigation, ARIA, and screen reader support.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
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.
Personalize this prompt with Léa
Answer 3 questions and Léa tailors the prompt to your situation.
Why this prompt works
<p>This prompt follows the 'semantic HTML first, ARIA second' philosophy which is the fundamental principle of web accessibility: a native HTML button is infinitely more accessible than a div with role='button' because it automatically benefits from native browser keyboard behavior.</p><p>Focus management is the most often missed aspect in React components: trapping focus in a modal, returning focus to the trigger element after closing are behaviors invisible to visual users but essential for those navigating with keyboard or screen reader.</p><p>Integrating jest-axe in automated tests is a modern practice that automatically catches common accessibility violations in the CI pipeline, preventing accessibility regressions from reaching production.</p>
Use Cases
Expected Output
A complete React TypeScript component with WCAG 2.1 accessibility, keyboard navigation, correct ARIA attributes, and accessibility tests.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
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.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.