---
title: "Accessibilité des applications React, Vue et Angular"
description: "Rubrique parente : La mise en conformité RGAA. Les trois difficultés spécifiques aux applications monopages Sur leurs contenus statiques, les frameworks JavaScript actuels ne génèrent pas d’anomalies propres. Ils en créent en revanche trois familles qu’un site traditionnel ignore, et que les outils de test automatique repèrent mal. 1. Où va le focus quand la […]"
url: "https://www.newp.fr/mise-en-conformite-rgaa/applications-react-vue-angular/"
author: ""
date: "2026-09-20T09:27:36+00:00"
modified: "2026-09-21T18:30:09+00:00"
lang: "fr_FR"
---

# Accessibilité des applications React, Vue et Angular

 Rubrique parente : [La mise en conformité RGAA](/mise-en-conformite-rgaa/).

 

## Les trois difficultés spécifiques aux applications monopages

 Sur leurs contenus statiques, les frameworks JavaScript actuels ne génèrent pas d’anomalies propres. Ils en créent en revanche trois familles qu’un site traditionnel ignore, et que les outils de test automatique repèrent mal.

### 1. Où va le focus quand la vue change ?

 Sur un site classique, chaque chargement de page remet le focus au début et le lecteur d’écran lit le nouveau titre. Une application monopage ne fait rien de tel : l’adresse se modifie, le contenu se remplace, mais le focus demeure à sa place, parfois sur un lien qui a disparu de l’écran.

 **Solution :** après chaque navigation, placez le focus sur la zone de contenu principale ou sur le titre de la vue affichée, et actualisez le titre du document. Faute de quoi, la personne n’a aucun moyen de savoir qu’elle a changé de page.

### 2. Faire entendre les mises à jour de contenu

 Liste filtrée, produit ajouté au panier, confirmation d’envoi, erreur de saisie : chaque modification qui survient sans navigation doit être signalée. À l’écran, elle est évidente ; pour quelqu’un qui écoute la page, elle reste totalement silencieuse.

 **Solution :** prévoyez une zone de message de statut déjà présente dans le DOM au chargement, puis écrivez-y le texte au moment voulu. Si la zone est créée en même temps que le message, rien n’est annoncé.

### 3. Les composants développés sur mesure

 Liste déroulante, système d’onglets, boîte de dialogue, calendrier reconstruits de zéro : chacun doit restituer les interactions clavier que l’on attend (touches fléchées, touche Échap, retour du focus à la fermeture) et que l’élément HTML natif offrait sans effort.

 ARIA : le moins possible Le premier principe d’ARIA consiste à ne pas y recourir quand un élément natif existe. Un `<button>` réalise déjà ce qu’un `<div role="button">` cherche à imiter, et il fonctionne de manière fiable sur tous les navigateurs et aides techniques. Chaque composant recréé devient une dette de conformité qu’il faudra entretenir.

 

## Rendu serveur : un enjeu d’accessibilité, pas seulement de vitesse

 Le RGAA exige que le contenu reste accessible lorsque les scripts ne s’exécutent pas. Une application rendue uniquement dans le navigateur ne passe pas ce contrôle, et elle devient au passage difficile à exploiter pour les moteurs de réponse, sujet que nous développons dans [accessibilité et visibilité dans les moteurs de réponse](/accessibilite-numerique/accessibilite-et-geo/).

## Quatre fondations à poser dès le départ

1. un composant de routage qui prend en charge le focus et le titre du document à chaque nouvelle vue ;
2. une zone d’annonce centralisée, utilisée par l’ensemble de l’application ;
3. un catalogue de composants accessibles, audité une fois pour toutes puis réemployé dans chaque écran ;
4. des tests automatisés en intégration continue, pour intercepter à chaque déploiement les régressions de structure.
 
 Ces quatre fondations règlent l’essentiel. Pour le reste, une application obéit aux mêmes exigences que tout autre site.

  [ Sujet précédent Rendre une boutique en ligne accessible ](/mise-en-conformite-rgaa/e-commerce/) [ Sujet suivant Accessibilité et Elementor ](/mise-en-conformite-rgaa/elementor/)

---

*Source : [www.newp.fr](https://www.newp.fr/mise-en-conformite-rgaa/applications-react-vue-angular/)*