Accessibilité WCAG AA dans une app Angular

L'accessibilité numérique n'est pas une option — c'est une obligation légale (RGAA) et une responsabilité éthique. Angular offre une base solide pour construire des interfaces accessibles.

Skip Navigation Link

Le premier lien de la page doit permettre de sauter la navigation :

<a class="skip-nav" href="#main-content">Aller au contenu principal</a>
<a class="skip-nav" href="#main-nav">Aller à la navigation</a>

.skip-nav {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;

  &:focus {
    top: 1rem;
  }
}

Focus Visible

Le :focus-visible CSS assure un indicateur de focus uniquement pour la navigation clavier :

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

ARIA dans Angular

@Component({
  template: `
    <button
      [attr.aria-pressed]="isActive()"
      [attr.aria-label]="label()"
      (click)="toggle()">
      {{ label() }}
    </button>
  `
})

prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Conclusion

La conformité WCAG AA est atteignable en Angular avec les bons patterns : skip-nav, focus-visible, ARIA sémantique et respect des préférences système. Ces améliorations bénéficient à tous les utilisateurs.