Mises à jour d’accessibilité d’Angular 13 et ce qu’elles signifient pour nous

Apprenez à utiliser la puissance d’Angular, des attributs ARIA et du CDK Angular Material pour améliorer l’expérience utilisateur et supprimer les obstacles.

Le Web est un endroit où nos applications sont ouvertes à une liste complète de variétés d’utilisateurs, y compris ceux qui ont des déficiences visuelles ou motrices. Nous sommes responsables de la création d’applications prêtes à interagir avec chacun d’eux tout en offrant la meilleure expérience utilisateur.

L’accessibilité est essentielle dans nos applications car elle garantit que tous les utilisateurs peuvent interagir sans difficultés. L’accessibilité sur le Web tient compte de la cécité, de la surdité, de la motricité restreinte, du daltonisme et plus encore.

L’équipe Angular a annoncé un Accent mis sur l’accessibilité (a11y) autour de la sortie d’Angular 13, et nous pouvons voir que c’est partie de leur feuille de route.

Aujourd’hui, nous allons montrer comment créer des applications angulaires qui fonctionnent bien pour tous les utilisateurs, y compris ceux qui s’appuient sur des technologies d’assistance. Nous expliquerons comment utiliser Angular pour améliorer l’expérience utilisateur dans les points suivants :

• Attributs d’accessibilité
• Composants de matériaux angulaires
• Routage

Attributs d’accessibilité

La Attributs ARIA nous aider à fournir une expérience accessible aux utilisateurs. Cela pourrait fonctionner avec la liaison d’attributs dans Angular dans les modèles de composants.

Nous utilisons le attr. préfixe avec la spécification ARIA sur les éléments HTML en tant qu’attributs, par exemple, un bouton pour fermer une action.

Si l’attribut ARIA est statique, n’exigez pas l’utilisation de la liaison d’attribut.

Utilisation de la liaison d’attribut :

<button [attr.aria-label]="Close Form">CloseFrom</button>

Utilisation d’ARIA statique :

<button aria-label="Close Form">CloseFrom</button>

En savoir plus sur les sujets précédents :

Composants de matériaux angulaires

Angular Material nous aide à offrir une expérience utilisateur fantastique dans nos applications et fournit une suite de composants d’interface utilisateur entièrement accessibles.

Le CDK Angular Material utilise le package a11y pour prendre en charge l’accessibilité, en fournissant une liste de services, de directives et d’utilitaires de styles.

Plongeons-nous dans certains d’entre eux :

Moniteur de mise au point

Le FocusMonitor est un service qui fournit un moyen facile d’écouter les changements dans l’état de focus d’un élément.

Exemple:

focusMonitor.monitor(el).subscribe(origin => this.ngZone.run(() =>console.log("users focus") ));

Annonceur en direct

Le LiveAnnouncer aide à annoncer des messages pour les lecteurs d’écran utilisant l’aria-live.

Exemple:

@Component({...})
export class MyComponent {

  constructor(liveAnnouncer: LiveAnnouncer) {
    liveAnnouncer.announce("Welcome to Progress.com");
  }
}

CdkTrapFocus

Le CdkTrapFocus est la directive puissante pour travailler avec le focus dans les modaux et les éléments.

Exemple:

<div class="my-inner-dialog-content" cdkTrapFocus>
  
</div>

Gestionnaire FocusKey

Le gestionnaire FocusKey nous aide lorsque les options sont directement ciblées par le navigateur. Il utilise deux types de ListKeyManager : FocusKeyManager et ActiveDescendantKeyManager.

interface FocusableOption extends ListKeyManagerOption {
  focus(): void;
}

En savoir plus sur le Matériau angulaire CDK.

Routage

Dans Angular, l’utilisation du routeur nous aide à travailler avec la navigation, et l’accent est essentiel pour fournir l’accessibilité et le suivre pour donner à une page l’accent sur la navigation.

Prendre soin de la navigation et de la mise au point est très important pour les utilisateurs. Utiliser un événement de routeur comme NavigationEndnous pouvons nous concentrer sur un domaine de notre application, tel que le formulaire de connexion.

router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
  const loginForm= document.querySelector('#login-form')
  if (loginForm) {
    loginForm.focus();
  }
});

Un autre point important est l’actif routerLinkActive et ariaCurrentWhenActive.

<nav>
  <a routerLink="home"
   routerLinkActive="active-page"
   ariaCurrentWhenActive="page">
  Login
  </a>
</nav>

En savoir plus sur les sujets précédents :

Conclusion

Nous avons appris à utiliser la puissance d’Angular, des attributs ARIA et du CDK Angular Material pour améliorer l’expérience utilisateur et supprimer les obstacles. J’espère que ces conseils vous aideront à créer une application angulaire qui pourra profiter à tous les utilisateurs !