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
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
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.
Go further
Similar Prompts
Perplexity Prompt for Creating a Software Architecture
Perplexity stands out as a particularly powerful tool for software architecture design thanks to its ability to synthesize recent and verified technical sources. Unlike a classic LLM that relies solely on its training data, Perplexity queries the web in real time to integrate the latest best practices, emerging architectural patterns, and community feedback. Whether you are designing a microservices architecture, a modular monolith, or an event-driven system, a well-structured prompt allows you to obtain contextualized recommendations with verifiable sources. The challenge is to provide enough business and technical context for Perplexity to cross-reference relevant information: technology stack, scalability constraints, infrastructure budget, and team skills. By phrasing your request precisely, you transform Perplexity into a true consultant architect capable of proposing component diagrams, reasoned technology choices, and deployment strategies tailored to your specific context.
Kubernetes Backup Strategy
Kubernetes Disaster Recovery Plan
Adapting an API for Different Clients
Tailoring API responses to client needs
Implement cost optimization with Terraform
Reduce cloud infrastructure costs