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
Midjourney Prompt for Creating a Chatbot
Midjourney has become an essential tool for designing a chatbot's visual identity. Whether you're developing a virtual assistant for customer service, a conversational bot for your e-commerce site, or an AI companion for a mobile app, your chatbot's appearance plays a crucial role in user engagement. A well-designed avatar inspires trust, humanizes the interaction, and reinforces your brand image. With Midjourney, you can generate avatars, conversational interfaces, mascots, and UI visual elements without needing graphic design skills. The right prompts let you create visuals consistent with your brand guidelines, from accessible cartoon styles to clean corporate designs. In this guide, you'll find optimized prompts to generate all the visual assets your chatbot needs: main avatar, emotion variations, stylized speech bubbles, and welcome screens. Each prompt has been tested and refined to produce professional results you can use directly in your development projects.
Audit code for SQL injection
Find and fix SQL injection
Access Audit and SIEM
Detect suspicious activities
Claude Prompt to Create a Chatbot
Creating a high-performance chatbot with Claude is a major opportunity to automate your customer interactions, technical support, or internal processes. Thanks to its advanced natural language understanding capabilities, Claude excels at designing chatbots that can maintain contextual conversations, handle complex scenarios, and adapt to your brand's tone. Whether you want to deploy an assistant on your website, integrate a bot into Slack or WhatsApp, or create a specialized conversational agent for your business domain, a well-structured prompt is key to a truly useful chatbot. The challenge is not just generating responses, but defining coherent behavior: handling edge cases, escalating to a human when necessary, adhering to a precise knowledge scope, and maintaining an appropriate tone. The prompts presented here guide you to design a professional chatbot with Claude, from quick prototype to robust production system, covering personality, business rules, context management, and essential safeguards.