Angular est-il accessible par défaut ?

Angular n'est pas accessible par défaut, mais il fournit des outils puissants via le CDK a11y (FocusTrap, LiveAnnouncer, FocusMonitor). Angular Material offre des composants avec une bonne base d'accessibilité. Le développeur doit cependant les utiliser correctement et tester manuellement.

Quelle est la différence entre le CDK a11y et Angular Material pour l'accessibilité ?

Le CDK a11y est une boîte à outils bas niveau (FocusTrap, LiveAnnouncer, etc.) pour construire vos propres composants accessibles. Angular Material est une bibliothèque de composants UI prêts à l'emploi qui UTILISE le CDK a11y en interne. Vous pouvez utiliser le CDK sans Angular Material.

Comment gérer le focus lors de la navigation dans une SPA Angular ?

Abonnez-vous aux événements NavigationEnd du routeur Angular. À chaque changement de route, utilisez le service Title pour mettre à jour document.title, LiveAnnouncer pour annoncer la nouvelle page, et ViewChild pour déplacer le focus vers le h1 ou le main.

Accessibilité Angular : CDK a11y, directives et composants conformes au RGAA

Angular et l'accessibilité : un framework structuré pour l'a11y

Angular, développé par Google, est particulièrement populaire dans les grandes entreprises et les applications métier. Son approche structurée (TypeScript, modules, injection de dépendances) et son CDK (Component Dev Kit) a11y en font un framework bien outillé pour l'accessibilité.

Le CDK a11y : boîte à outils d'accessibilité

Le @angular/cdk/a11y est le module d'accessibilité du Component Dev Kit d'Angular. Il fournit des services et directives spécialisés :

FocusTrap

Le FocusTrap enferme le focus à l'intérieur d'un élément (modale, panneau latéral). Utilisation :

<div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">  </div>

Le focus reste prisonnier à l'intérieur du conteneur jusqu'à ce que le piège soit désactivé.

LiveAnnouncer

Le service LiveAnnouncer annonce des messages aux lecteurs d'écran via une live region :

constructor(private liveAnnouncer: LiveAnnouncer) {} onSearch() { this.liveAnnouncer.announce(`${this.results.length} résultats trouvés`); }

C'est indispensable pour annoncer les résultats de recherche, les notifications, les changements d'état dynamiques.

FocusMonitor

Le FocusMonitor détecte la source du focus (souris, clavier, toucher, programme). Cela permet d'afficher l'indicateur de focus uniquement pour la navigation clavier :

constructor(private focusMonitor: FocusMonitor) {} ngAfterViewInit() { this.focusMonitor.monitor(this.elementRef).subscribe(origin => { // origin: 'mouse' | 'keyboard' | 'touch' | 'program' | null }); }

InteractivityChecker

Vérifie si un élément est focusable, tabbable, visible ou désactivé — utile pour la gestion programmatique du focus.

HighContrastModeDetector

Détecte si l'utilisateur utilise le mode contraste élevé de Windows. Permet d'adapter les styles en conséquence.

Angular Material et l'accessibilité

Angular Material est la bibliothèque officielle de composants Material Design pour Angular. Elle intègre nativement l'accessibilité :

MatButton : gestion clavier automatique, ripple accessible
MatFormField : association label/input automatique, messages d'erreur liés
MatSelect : dropdown conforme au pattern ARIA listbox
MatDialog : focus trap, fermeture Escape, restauration du focus
MatTable : tableaux avec en-têtes et tri accessible
MatDatepicker : sélecteur de date avec navigation clavier
MatSnackBar : notifications avec annonce live region

Angular Material n'est pas parfait mais offre une des meilleures bases d'accessibilité parmi les bibliothèques de composants.

Directives Angular pour l'accessibilité

Directive d'accessibilité des images

Créez une directive qui vérifie la présence d'un alt sur les images :

@Directive({ selector: 'img' }) export class ImgAltDirective implements OnInit { @HostBinding('attr.alt') alt?: string; ngOnInit() { if (!this.alt && this.alt !== '') { console.warn('Image sans texte alternatif détectée'); } } }

Directive aria-current pour la navigation

Marquez automatiquement le lien actif dans la navigation avec aria-current="page" :

@Directive({ selector: '[routerLinkActive]' }) export class AriaCurrentDirective { @HostBinding('attr.aria-current') get ariaCurrent() { return this.isActive ? 'page' : null; } }

Routeur Angular et accessibilité

Le routeur Angular ne gère pas nativement l'accessibilité lors des changements de route. Vous devez :

Écouter les événements NavigationEnd pour mettre à jour le titre de la page et déplacer le focus
Utiliser le Title service pour mettre à jour document.title
Déplacer le focus vers le <h1> ou un élément skip link après chaque navigation
Annoncer le changement de page via LiveAnnouncer

Tests d'accessibilité Angular

Codelyzer : linter avec règles d'accessibilité pour Angular (vérifie les templates)
Protractor + axe-webdriverjs : tests e2e avec vérification d'accessibilité (ou Cypress + cypress-axe)
Karma + jest-axe : tests unitaires de conformité
Angular ESLint : règles a11y pour les templates Angular

Le CDK a11y d'Angular est l'un des meilleurs outils d'accessibilité intégrés à un framework front-end. Exploitez-le pleinement pour créer des applications conformes au RGAA.