Audit Accessibilité React : Guide RGAA Complet 2026
React est la librairie UI la plus utilisée au monde avec plus de 40% de part de marché. Son modèle de composants offre une grande flexibilité, mais peut introduire des problèmes d'accessibilité si les bonnes pratiques ne sont pas suivies. Ce guide vous aide à construire des applications React conformes RGAA et WCAG.
React et l'accessibilité en France
Les applications React représentent une part croissante des projets web en France, notamment dans les startups et grandes entreprises. La conformité RGAA est obligatoire pour les services publics et entreprises de plus de 250M€ de CA. Les SPA React posent des défis spécifiques : gestion du focus, annonces dynamiques et navigation clavier.
40%+
Part de marché React
10M+
Apps React en production
35+
Critères RGAA impactés
En Bref : L'essentiel à retenir
- Framework : React nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : eslint-plugin-jsx-a11y.
- Critères RGAA clés : 4.1, 7.1, 7.3.
Accessibilité selon les versions React
| Version | Support | Fonctionnalités A11y |
|---|---|---|
| React 17 | Maintenance |
|
| React 18 | Stable |
|
| React 19 | Latest |
|
Comment auditer un site React en 5 étapes
Suivez ce guide étape par étape pour réaliser un audit RGAA complet de votre application React.
Scanner automatique
Lancez un audit RGAA Checker sur votre application React déployée pour identifier les erreurs automatiquement détectables.
Vérifier la sémantique HTML
Inspectez le DOM généré : les composants utilisent-ils des éléments natifs (button, input) ou des div avec onClick ?
Tester la navigation clavier
Naviguez dans l'app uniquement au clavier (Tab, Entrée, Échap). Vérifiez que le focus est visible et logique.
Valider les changements de route
Lors d'un changement de page, le focus doit se déplacer sur le nouveau contenu et le titre document.title doit changer.
Tester avec un lecteur d'écran
Utilisez NVDA ou VoiceOver pour vérifier les annonces des composants dynamiques (modales, notifications, formulaires).
Erreurs Fréquentes avec React
onClick sur des éléments non-interactifs
Ajouter un onClick sur une div ou un span rend l'élément inaccessible au clavier et invisible aux lecteurs d'écran. C'est l'erreur n°1 des applications React.
<div onClick={handleClick}>Cliquez-moi</div><button onClick={handleClick}>Cliquez-moi</button>Gestion du focus dans les modales
Oublier de piéger le focus à l'intérieur d'une modale permet à l'utilisateur de naviguer en arrière-plan, ce qui est désorientant et non conforme RGAA.
Titres de page statiques (SPA)
Dans une SPA React/Next.js, le titre de la page (document.title) doit changer à chaque navigation. Utilisez useEffect ou le Head de Next.js.
Fragments au lieu d'éléments sémantiques
Remplacer des éléments sémantiques (nav, main, section) par des Fragment ou div inutiles casse la structure du document pour les lecteurs d'écran.
Images sans alt dans les composants
Les images importées ou en props oublient souvent l'attribut alt. Next/Image exige alt mais ne vérifie pas sa pertinence.
<Image src={photo} /><Image src={photo} alt="Description pertinente" />Listes de rendu sans structure
Utiliser map() pour afficher des éléments sans les wrapper dans ul/ol/li casse la sémantique des listes.
{items.map(i => <div key={i.id}>{i.name}</div>)}<ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>Packages à éviter
Ces packages sont connus pour causer des problèmes d'accessibilité. Évitez-les ou configurez-les correctement.
react-modal (config par défaut)
Sans configuration, ne gère pas le focus trap ni les annonces ARIA
Alternative : @radix-ui/react-dialog
react-select (v4 et avant)
Accessibilité limitée, navigation clavier complexe
Alternative : react-select v5+ ou @radix-ui/react-select
react-slick
Carrousel avec navigation clavier défaillante
Alternative : Embla Carousel ou supprimez le carrousel
react-tooltip (anciennes versions)
Tooltips non accessibles au clavier
Alternative : @radix-ui/react-tooltip
Bonnes Pratiques React
HTML Sémantique avant tout
Utilisez toujours les éléments natifs (button, input, nav, main) avant de créer des composants custom. Ils gèrent nativement le focus et les interactions clavier.
Gestion du Focus avec useRef
Utilisez useRef et focus() pour déplacer programmatiquement le focus lors de l'ouverture d'une modale, après soumission d'un formulaire ou lors d'un changement de route.
Live Regions pour les annonces
Pour les notifications, chargements et messages de succès/erreur, utilisez aria-live="polite" ou aria-live="assertive" selon l'urgence.
useId pour les associations ARIA
React 18+ offre useId() pour générer des IDs uniques stables entre serveur et client, parfait pour aria-labelledby et aria-describedby.
Tests automatisés avec jest-axe
Intégrez jest-axe dans vos tests unitaires React Testing Library pour empêcher les régressions d'accessibilité avant le déploiement.
Composants Radix UI ou React Aria
Pour les composants complexes (modales, menus, combobox), utilisez des librairies accessibles par défaut plutôt que de réinventer la roue.
Critères RGAA clés pour React
Ces critères du référentiel RGAA sont particulièrement importants pour les sites React.
Médias temporels
Lecteurs vidéo custom React doivent avoir des contrôles accessibles
Scripts et changements de contexte
Les SPA React modifient le DOM dynamiquement, nécessitant des annonces ARIA
Composants interactifs
Chaque composant interactif doit être utilisable au clavier
Landmarks ARIA
Les layouts React doivent utiliser main, nav, aside correctement
Focus visible
Le focus doit être visible sur tous les composants, CSS-in-JS inclus
Navigation clavier
Tab order logique dans toute l'application
Checklist accessibilité React
Vérifiez ces points essentiels avant de mettre votre site React en production.
- Tous les handlers onClick sont sur des éléments focusables (button, a, input)
- Les modales piègent le focus et se ferment avec Échap
- document.title change à chaque navigation
- Les images ont des alt pertinents (non vides sauf décoratif)
- Les formulaires ont des labels associés aux inputs
- Les erreurs de formulaire sont annoncées (aria-live ou focus)
- La navigation au clavier suit un ordre logique
- Les composants custom ont les rôles ARIA appropriés
- eslint-plugin-jsx-a11y est configuré et sans erreurs
- Les tests incluent des vérifications axe-core
Questions Fréquentes sur React et l'accessibilité
Comment auditer l'accessibilité d'une application React ?
Utilisez RGAA Checker pour un scan automatique, puis complétez avec des tests manuels : navigation clavier (Tab, Entrée, Échap), lecteur d'écran (NVDA/VoiceOver), et vérification des changements de route. Intégrez eslint-plugin-jsx-a11y et jest-axe dans votre CI.
React est-il accessible par défaut ?
Non. React génère le HTML que vous écrivez. Si vous utilisez des div avec onClick au lieu de button, le résultat sera inaccessible. React facilite l'accessibilité avec useId et les refs, mais ne l'impose pas.
Quelle librairie de composants React est la plus accessible ?
Radix UI et React Aria (Adobe) sont les références. Elles gèrent nativement le focus, la navigation clavier et les attributs ARIA. Évitez les librairies qui ne mentionnent pas l'accessibilité dans leur documentation.
Comment gérer le focus dans une SPA React ?
Lors d'un changement de route, déplacez le focus sur le h1 principal ou un élément avec tabindex="-1". Avec Next.js, utilisez le hook usePathname et useEffect. Avec React Router, écoutez les changements de location.
Next.js améliore-t-il l'accessibilité de React ?
Next.js facilite certains aspects : le composant Image exige un alt, le Head gère document.title facilement, et le SSR améliore le contenu initial. Mais les problèmes de composants et navigation restent à gérer manuellement.
Comment rendre un formulaire React accessible ?
Associez chaque input à un label (htmlFor/id ou label englobant), utilisez aria-describedby pour les messages d'aide, affichez les erreurs avec aria-invalid et aria-errormessage, et déplacez le focus sur la première erreur à la soumission.
Outils Recommandés pour React
eslint-plugin-jsx-a11y
Linter statique indispensable pour détecter les erreurs d'accessibilité dans le JSX au moment du développement.
@axe-core/react
Affiche les violations d'accessibilité directement dans la console du navigateur pendant le développement.
React Aria (Adobe)
Bibliothèque de Hooks pour construire des composants accessibles : gestion du focus, clavier, ARIA, internationalisation.
Radix UI
Composants headless accessibles par défaut : Dialog, Dropdown, Tabs, Accordion, etc. Parfait pour les design systems.
jest-axe
Matchers Jest pour tester l'accessibilité avec axe-core dans vos tests unitaires et d'intégration.
Auditez votre site React gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit