Create an accessible React component
Create fully accessible React components complying with 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 : 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.
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 the browsers' native keyboard behavior.</p><p>Focus management is the most often missed aspect in React components: trapping focus in a modal, returning focus to the triggering element after closing are behaviors invisible to visual users but essential for those navigating with keyboard or with a screen reader.</p><p>Integrating jest-axe into 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.
Learn more
Check the full skill on Prompt Guide to master this technique from A to Z.
View on Prompt GuideGlossary Terms
Similar Prompts
Learn the basics of Git for beginners
Learn Git from scratch with illustrated explanations, concrete examples, a practical workflow and a cheatsheet of essential commands.
Define a Git strategy for a team
Define a comprehensive Git strategy adapted to your team: branching model, conventions, code review and release management.
Configure a CI/CD pipeline with GitHub Actions
Configure a professional CI/CD pipeline with GitHub Actions covering testing, security, Docker build and multi-environment deployment.
Write integration tests for an API
Create comprehensive API integration tests with database setup, authentication, CRUD and end-to-end scenarios.