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
Réponds à 3 questions, Léa adapte le prompt à ta situation.
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
Convertir du CSS en Tailwind
Migrer le style vers Tailwind
Refactoriser du code legacy vers des patterns modernes
Moderniser du code legacy progressivement
Prompt Gemini pour Generer Des Requetes SQL
Gemini, le modèle d'intelligence artificielle de Google, excelle dans la génération de requêtes SQL grâce à sa compréhension approfondie des structures de données et de la syntaxe des bases de données. Que vous travailliez avec MySQL, PostgreSQL, SQL Server ou SQLite, Gemini peut transformer vos descriptions en langage naturel en requêtes SQL optimisées et fonctionnelles. Cette capacité est particulièrement précieuse pour les développeurs qui souhaitent accélérer leur workflow, les analystes de données qui manipulent des jeux de données complexes, et les débutants qui apprennent le SQL. En fournissant un prompt bien structuré à Gemini, vous obtenez non seulement la requête souhaitée, mais aussi des explications sur la logique employée, des suggestions d'optimisation et des alternatives selon votre système de gestion de base de données. L'approche par prompt engineering permet de guider Gemini pour qu'il prenne en compte vos contraintes spécifiques : performance, lisibilité, compatibilité avec un SGBD particulier, ou respect de conventions de nommage propres à votre organisation. Découvrez comment formuler vos prompts pour tirer le meilleur parti de Gemini dans la génération de requêtes SQL.
Mise en œuvre de la gestion des secrets
Gestion sécurisée des informations d'identification