Accessibilité RGAA avec Angular : le guide de correction

Angular fournit des outils d'accessibilité solides via le CDK, mais encore faut-il les brancher. Voici les corrections qui font le plus bouger un score RGAA sur une application Angular.

Le CDK a11y est votre allié

Le package @angular/cdk/a11y couvre les besoins les plus courants : piège de focus, restauration du focus, annonces vocales.

cdkTrapFocus pour les modales et menus.
LiveAnnouncer pour annoncer les changements dynamiques (chargement, erreurs).
FocusMonitor pour distinguer focus clavier et souris (focus visible).

Focus au changement de route

Comme toute SPA, Angular ne recharge pas la page à la navigation. Abonnez-vous aux événements du Router et déplacez le focus vers le titre de la vue cible, ou annoncez le changement via LiveAnnouncer.

Formulaires réactifs accessibles

Associez chaque contrôle à un label, reliez les messages d'erreur via aria-describedby, et signalez l'état invalide autrement que par la seule couleur. Ne masquez pas les erreurs aux technologies d'assistance.

Scannez une route de votre app Angular

FAQ

Les Material Components sont-ils accessibles par défaut ?

Angular Material vise l'accessibilité, mais l'intégration (labels, ordre de focus, contrastes de votre thème) reste de votre responsabilité.

Comment tester en continu ?

Un scan sur le rendu réel de vos routes clés, idéalement déclenché en CI à chaque déploiement.