Framework JS

Audit d'accessibilité RGAA pour applications React

Pourquoi React pose des problèmes d'accessibilité

React est le framework JavaScript le plus utilisé pour construire des interfaces web modernes, mais les applications React présentent des problèmes d'accessibilité spécifiques et insidieux. Le routing côté client (React Router) ne déclenche pas d'annonce aux lecteurs d'écran lors des changements de page : l'utilisateur clique sur un lien, le contenu change, mais rien n'est annoncé. Les composants custom (dropdown, tabs, modales, accordions) sont construits avec des div et des span au lieu d'éléments HTML natifs, sans les attributs ARIA nécessaires. Le state management provoque des re-renders qui retirent et rajoutent des éléments du DOM, perdant le focus clavier au passage. Les formulaires contrôlés par React gèrent les erreurs dans le state mais n'associent pas les messages d'erreur aux champs via aria-describedby. Les portals React (utilisés pour les modales et tooltips) créent des éléments en dehors de l'arbre DOM principal, cassant l'ordre de tabulation naturel. Ces problèmes sont invisibles visuellement mais rendent l'application inutilisable pour les personnes dépendant de technologies d'assistance.

Problèmes fréquents sur React

Navigation SPA sans annonce aux lecteurs d'écran

RGAA 7.4

React Router change le contenu de la page sans rechargement du navigateur. Les lecteurs d'écran ne détectent pas ce changement et n'annoncent ni le nouveau titre de page ni le nouveau contenu. L'utilisateur non-voyant ne sait pas que la navigation a fonctionné. Il faut implémenter un système d'annonce via aria-live ou un focus management sur le nouveau contenu, ce qui est rarement fait.

Composants custom sans sémantique ni ARIA

RGAA 7.1

Les composants React UI (dropdown, tabs, accordion, autocomplete) sont construits avec des div et onClick au lieu d'éléments HTML natifs (select, button, details). Ils ne portent pas les rôles ARIA requis (role=tablist, role=tab, aria-selected, aria-expanded). Les utilisateurs de lecteurs d'écran ne peuvent pas identifier le type de composant ni son état (ouvert/fermé, sélectionné/non sélectionné).

Perte de focus lors des re-renders

RGAA 7.3

Les changements de state React provoquent des re-renders qui suppriment et recréent des éléments DOM. Si l'élément qui avait le focus est supprimé, le focus revient au début du document. L'utilisateur de clavier perd sa position dans la page et doit re-tabuler depuis le début. Ce problème est particulièrement fréquent dans les listes dynamiques, les formulaires conditionnels et les composants avec chargement asynchrone.

Contenu dynamique non annoncé (aria-live absent)

RGAA 7.4

Les applications React mettent à jour le contenu dynamiquement (notifications, résultats de recherche en temps réel, messages de chat, compteurs). Ces mises à jour ne sont pas encadrées par des régions aria-live, donc les lecteurs d'écran ne les annoncent pas. L'utilisateur non-voyant manque des informations critiques qui apparaissent pourtant à l'écran.

Testez votre site React

Découvrez les non-conformités RGAA de votre site React en 5 minutes. Gratuit, sans engagement.

Lancer l'audit gratuit

Ce que Scrutia détecte sur React

Scrutia exécute votre application React dans un navigateur réel et teste les interactions dynamiques. Notre moteur détecte les changements de route sans annonce, les composants interactifs sans rôles ARIA, les pertes de focus lors des re-renders et les mises à jour de contenu non annoncées. Nous simulons un parcours utilisateur complet au clavier, incluant la navigation entre pages, l'interaction avec les composants et la soumission de formulaires. Chaque problème est localisé dans le rendu HTML avec le code correctif React/JSX correspondant.

Questions fréquentes — React

Scrutia peut-il analyser une application React avec authentification ?
Par défaut, Scrutia teste les pages accessibles publiquement. Les applications React avec authentification (dashboard, espace client) peuvent être auditées sur un environnement de staging exposé publiquement.
Les corrections sont-elles fournies en JSX React ?
Oui. Le rapport fournit les corrections en JSX avec les attributs ARIA corrects, les hooks de gestion de focus (useRef, useEffect) et les composants aria-live à intégrer. Les corrections sont directement copiables dans vos composants React.
Scrutia détecte-t-il les problèmes causés par les librairies UI comme MUI ou Chakra ?
Oui. Scrutia teste le HTML rendu dans le navigateur, quelle que soit la librairie utilisée. Si Material UI, Chakra UI, Ant Design ou Radix génèrent des composants avec des problèmes ARIA, ils seront détectés et signalés avec la correction adaptée.

Auditer d'autres technologies

Framework JS

Next.js

Framework JS

Angular

Framework JS

Vue.js

Auditez votre site React maintenant

106 critères RGAA testés en 5 minutes. Score gratuit, rapport complet multi-pages avec corrections de code à partir de 149€.

Tester mon site React