Audit Accessibilité Angular : Guide RGAA 2026
Angular est le framework de choix pour les applications enterprise et le secteur public. Son écosystème inclut des outils d'accessibilité natifs via le CDK (Component Dev Kit), mais leur utilisation correcte demande une bonne compréhension des patterns accessibles.
Angular dans le secteur public et enterprise
Angular domine le secteur enterprise et les grandes administrations grâce à sa structure opinionée et son typage TypeScript strict. En France, de nombreuses applications métier critiques utilisent Angular. La conformité RGAA est donc un enjeu majeur pour ces projets.
35%+
Part entreprise/gov
5M+
Apps Angular enterprise
CDK A11y
Outils a11y natifs
En Bref : L'essentiel à retenir
- Framework : Angular nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : Angular CDK A11y.
- Critères RGAA clés : 7.1, 7.3, 10.7.
Accessibilité selon les versions Angular
| Version | Support | Fonctionnalités A11y |
|---|---|---|
| Angular 14-15 | LTS |
|
| Angular 16-17 | Stable |
|
| Angular 18+ | Latest |
|
Comment auditer un site Angular en 5 étapes
Suivez ce guide étape par étape pour réaliser un audit RGAA complet de votre application Angular.
Scanner RGAA automatique
Lancez RGAA Checker sur votre application Angular en production pour identifier les non-conformités.
Vérifier le CDK A11y
Assurez-vous que FocusTrap, LiveAnnouncer et FocusMonitor sont utilisés dans les composants complexes.
Auditer les formulaires
Les Reactive Forms doivent avoir des labels associés, des messages d'erreur accessibles et une gestion du focus.
Tester le Router
Vérifiez que le focus se déplace correctement après chaque navigation et que le titre change.
Validation lecteur d'écran
Testez avec NVDA/VoiceOver les annonces du LiveAnnouncer et la navigation dans les composants Material.
Erreurs Fréquentes avec Angular
(click) sur des éléments non-sémantiques
Utiliser (click) sur une div sans role="button" ni tabindex="0" rend l'élément invisible au clavier et aux technologies d'assistance.
<div (click)="save()">Sauvegarder</div><button (click)="save()">Sauvegarder</button>Focus non géré après navigation
Le Router Angular ne gère pas automatiquement le focus après une navigation, laissant l'utilisateur "perdu" dans le DOM.
Formulaires réactifs sans labels
Les Reactive Forms génèrent des inputs mais pas les labels. Oublier de lier label et input via for/id est une erreur fréquente.
<input [formControl]="email"><label for="email">Email</label><input id="email" [formControl]="email">Material sans configuration a11y
Angular Material est accessible par défaut, mais certains composants nécessitent des attributs supplémentaires (mat-label, aria-label).
Animations sans prefers-reduced-motion
Les animations Angular (@angular/animations) ne respectent pas automatiquement les préférences utilisateur.
Packages à éviter
Ces packages sont connus pour causer des problèmes d'accessibilité. Évitez-les ou configurez-les correctement.
ng-select (anciennes versions)
Accessibilité limitée dans les versions < 8
Alternative : Angular Material Select ou ng-select 9+
ngx-carousel
Navigation clavier souvent défaillante
Alternative : Swiper Angular ou implémentation custom accessible
ngx-bootstrap modals (config défaut)
Focus trap incomplet sans configuration
Alternative : Angular CDK Dialog ou configuration explicite
Bonnes Pratiques Angular
Angular CDK A11y
Utilisez le package @angular/cdk/a11y : FocusTrap pour les modales, LiveAnnouncer pour les notifications, FocusMonitor pour le suivi du focus.
Router Focus Management
Écoutez NavigationEnd et utilisez ViewChild + focus() pour déplacer le focus sur le titre h1 ou un skip link après chaque navigation.
Angular Material accessible
Préférez Angular Material pour les composants UI : il implémente les patterns ARIA WAI et gère le focus automatiquement.
Title Strategy
Configurez une TitleStrategy personnalisée pour que chaque route ait un titre unique et descriptif annoncé aux lecteurs d'écran.
Codelyzer / angular-eslint
Activez les règles d'accessibilité dans votre linter : template-accessibility-alt-text, template-accessibility-label-for, etc.
Critères RGAA clés pour Angular
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Angular.
Scripts
Les composants Angular doivent fonctionner avec les technologies d'assistance
Composants interactifs
Chaque directive (click) doit être sur un élément interactif
Focus visible
Les styles Angular ne doivent pas masquer le focus natif
Labels de formulaires
Reactive Forms doivent avoir des labels associés
Navigation clavier
Router Angular doit gérer le focus après navigation
Checklist accessibilité Angular
Vérifiez ces points essentiels avant de mettre votre site Angular en production.
- Tous les (click) sont sur des éléments natifs interactifs
- FocusTrap utilisé dans toutes les modales
- LiveAnnouncer pour les notifications et changements d'état
- TitleStrategy configuré pour les titres de route
- Labels associés à tous les champs de formulaire
- mat-label ou aria-label sur les composants Material
- NavigationEnd gère le déplacement du focus
- angular-eslint règles a11y activées
Questions Fréquentes sur Angular et l'accessibilité
Comment auditer l'accessibilité d'une application Angular ?
Utilisez RGAA Checker pour un scan automatique, vérifiez que le CDK A11y est utilisé correctement, et testez manuellement avec le clavier et un lecteur d'écran. Activez les règles a11y dans angular-eslint.
Angular est-il accessible par défaut ?
Partiellement. Angular fournit le CDK A11y et Material est accessible, mais le développeur doit les utiliser correctement. Les templates avec (click) sur des div restent inaccessibles.
Comment gérer le focus après navigation dans Angular ?
Injectez Router, écoutez NavigationEnd, puis utilisez @ViewChild et ElementRef pour appeler focus() sur le h1 ou un élément avec tabindex="-1". Configurez aussi scrollPositionRestoration.
Angular Material est-il conforme RGAA ?
Angular Material implémente les patterns WAI-ARIA et est largement accessible. Certains composants nécessitent des attributs supplémentaires (aria-label sur les icon buttons par exemple).
Quels modules Angular éviter pour l'accessibilité ?
Évitez les carousels non maintenus (ngx-carousel), les anciennes versions de ng-select, et les modales sans configuration FocusTrap explicite.
Outils Recommandés pour Angular
Angular CDK A11y
Module officiel avec FocusTrap, LiveAnnouncer, FocusMonitor, InteractivityChecker et HighContrast detection.
Angular Material
Bibliothèque de composants UI avec accessibilité intégrée : Dialog, Menu, Autocomplete, Table, etc.
angular-eslint
Linter avec règles d'accessibilité pour les templates Angular : alt-text, label-for, tabindex-no-positive.
Cypress Component Testing
Tests de composants Angular avec cypress-axe pour vérifier l'accessibilité de chaque composant isolément.
Auditez votre site Angular gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit