Site icon Blog ARC Optimizer

Amélioration de votre accessibilité de navigation: 4 conseils rapides


L’une de ces quatre améliorations à la navigation de votre application ferait progresser son accessibilité. Voir-les dans la pratique dans une application angulaire.

L’accessibilité (A11Y) est une partie cruciale du développement Web, permettant à votre application d’être utilisable par tous, y compris les personnes handicapées. L’un des endroits les plus percutants pour commencer à améliorer l’accessibilité est navigation– La porte et les couloirs de votre demande. Si les utilisateurs ne peuvent pas déplacer votre application efficacement (ou pas du tout), le reste de votre contenu n’a pas d’importance.

Dans cet article, je couvrirai quelques améliorations clés que vous pouvez apporter pour améliorer Accessibilité des lecteur de clavier et d’écran, améliorer le contraste et fournir une meilleure identification de l’état de l’utilisateur dans votre navigation. Bien que ces exemples soient montrés dans une application angulaire, les principes s’appliquent à n’importe quel cadre – l’implémentation est la seule chose qui change.

Certaines mises à jour d’accessibilité sont désormais requises par le Loi sur l’accessibilité européenne. Apprendre encore plus.

Utilisation de RouterLinkactive & Ariacaurrent quand

De nombreux utilisateurs comptent sur repères visuels pour comprendre où ils se trouvent dans une application, mais Tous les utilisateurs ne peuvent pas voir ces indices. Si un lien actif n’est stylé que visuellement (par exemple, avec la couleur), les utilisateurs du lecteur d’écran n’auront pas une indication claire de leur emplacement, et les utilisateurs à faible vision ou à la cécité couleur peuvent avoir du mal à différencier les liens actifs et inactifs.

Pour rendre la navigation plus claire pour tout le mondenous devons:

✅ Indiquez visuellement la page active (par exemple, texte audacieux, souligne ou contraste élevé)
✅ Indiquez programmatique la page active Les technologies d’assistance peuvent donc l’annoncer

Étape 1.1: Configuration des itinéraires dans Angular

Avant de commencer, nous devons définir nos itinéraires. Dans moderne angulaire, les itinéraires sont généralement définis dans un routes.ts fichier et fourni via provideRouter() dans app.config.ts.

routes.ts

import {Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {UserComponent} from './user/user.component';
import { ShopComponent } from './shop/shop.component';
export const routes: Routes = [
  { path: '', title: 'App Home Page', component: HomeComponent },
  { path: 'home', title: 'Home Page', component: HomeComponent },
  { path: 'user', title: 'User Page', component: UserComponent },
  { path: 'shop', title: 'Shop Page', component: ShopComponent },
];

app.config.ts

import {ApplicationConfig} from '@angular/core';
import {provideRouter} from '@angular/router';
import {routes} from './app.routes';
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

Étape 1.2. Ajout de navigation avec un style actif

Ensuite, nous créerons un menu de navigation simple avec routerLink pour connecter chaque itinéraire et un <router-outlet> pour afficher le contenu de l’itinéraire actif.

⚠️ Attention! N’oubliez pas d’importer RouterLink dans votre composant de navigation. Si vous sautez ceci, vos liens peuvent échouer en silence.

app …Component.ts

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="home">Home</a>
      <a routerLink="user">User</a>
      <a routerLink="shop">Shop</a>
    </nav>
    <router-outlet />
  `,
  imports: [RouterOutlet, RouterLink],
})
export class AppComponent {}

Nous avons des itinéraires de travail mais nous devons styliser correctement pour une meilleure visibilité. Utilisons routerLinkActive Pour donner à chaque ancre une classe CSS spéciale, indiquant quelle ancre est actuellement active.

app..

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="home" routerLinkActive="active-page">Home</a>
      <a routerLink="user" routerLinkActive="active-page">User</a>
      <a routerLink="shop" routerLinkActive="active-page">Shop</a>
    </nav>
    <router-outlet />
  `,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
})
export class AppComponent {}

À ce stade, Angular Will Appliquer dynamiquement le active-page classe lorsqu’un lien est actif. Maintenant, ajoutons des CSS pour le rendre visuellement clair.

CSS (soit dans votre fichier de composant ou externe, votre choix)

.active-page { 
  font-weight: 800; //bold would also work
  text-decoration: underline; 
  color: hotpink; 
}

Alors ici, nous donnons au lien actif une classe CSS de active-page puis ajouter des styles à ce nom de classe dans notre fichier CSS:

✅ Maintenant, les utilisateurs peuvent clairement voir quelle page est active.
🚨 Mais nous avons toujours un problème: Cette solution ne profite que utilisateurs aperçus. Les lecteurs d’écran sont encore Impossible de dire quel lien est actif– que nous allons réparer ensuite.

📝 Résumé des améliorations jusqu’à présent:

✔️ Les liens actifs ont désormais des indicateurs visuels clairs (gras + soulignement, ainsi que couleur)
✔️ Les utilisateurs de clavier peuvent naviguer correctement les liens
✔️ Toujours manquant: Un moyen pour les lecteurs d’écran de reconnaître le lien actif (Nous allons réparer cela ensuite!)

Alors que des indicateurs visuels comme couleur, texte audacieux et soulignement aider les utilisateurs aperçus, Les lecteurs d’écran ont besoin d’un contexte supplémentaire. Le RouterLinkActive La directive nous permet de définir un aria-current attribut en utilisant ariaCurrentWhenActive. Ce Dites les technologies d’assistance quel lien représente la page activeAmélioration de l’expérience de navigation pour les utilisateurs non visuels. (Certains lecteurs d’écran annonceront même ce sur quoi vous avez défini cette valeur. Plus à ce sujet plus tard.)

Donc, pour récapituler:

🔹 Les utilisateurs voyants bénéficient de Texte et soulignement audacieuxmais Les utilisateurs du lecteur d’écran ont besoin de plus de contexte.
🔹 le RouterLinkActive directif aide visuellement, mais il ne donne pas de sens sémantique aux technologies d’assistance.
🔹 Solution: Utiliser aria-current à identifier par programme la page active.

app …Component.ts mis à jour!

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="home"
          routerLinkActive="active-page"
          ariaCurrentWhenActive="page">
        Home
      </a>
      <a routerLink="user"
          routerLinkActive="active-page"
          ariaCurrentWhenActive="page">
        User
      </a>
      <a routerLink="shop"
          routerLinkActive="active-page"
          ariaCurrentWhenActive="page">
        Shop
      </a>
    </nav>

    <router-outlet />
  `,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
})
export class AppComponent {}

✅ Avec cela en place, les lecteurs d’écran annoncer La page active lorsque les utilisateurs naviguent, améliorant l’accessibilité.

Demo: regarder Aria-Current en action

Vous trouverez ci-dessous un enregistrement d’écran montrant comment la classe active (active-page) et aria-current Mise à jour de l’attribut lorsque vous naviguez entre les liens.

Principaux à retenir

✅ Utiliser RouterLinkActive avec ariaCurrentWhenActive pour rendre les liens actifs accessibles.
✅ Vérifiez que vos liens actifs faire avoir suffisamment de contraste visuel.
✅ Style Liens actifs avec plus que la couleur– Utilisez le texte audacieux, souligne ou d’autres éléments distinctibles.

3. Testez avec un lecteur d’écran pour fournir aux utilisateurs des commentaires significatifs

Une fois que vous avez ajouté RouterLinkActive avec ariaCurrentWhenActiveil est important de tester comment il se comporte avec un lecteur d’écran. Vérifier que les technologies d’assistance reconnaissent et annoncent correctement les liens actifs est essentiel à la création d’une expérience de navigation accessible.

Après avoir ajouté RouterLinkActive avec ariaCurrentWhenActiveJ’ai testé l’implémentation en utilisant la voix off sur mon Mac. Les améliorations ont été immédiatement perceptibles. Par exemple, j’ai pu utiliser le Tab touche pour naviguer entre les liens, et quand j’ai appuyé Enterle lien sélectionné a été correctement activé. (Cela n’a pas fonctionné auparavant.) De plus, la voix off a correctement annoncé la valeur que nous avons définie pour ariaCurrentWhenActiveindiquant la «page actuelle» lorsque le lien actif a été atteint.

Cela a rendu l’expérience de navigation beaucoup plus claire et plus intuitive pour les utilisateurs qui comptent sur les lecteurs d’écran. Sans ariaCurrentWhenActiveil n’y aurait aucune indication claire de la page actuellement active, conduisant à une confusion potentielle. La capacité de déterminer facilement sa position dans l’application est essentielle à l’accessibilité, et elle améliore l’expérience utilisateur globale pour ceux qui utilisent des technologies d’assistance.

🕰️ Avant:

  • Le Tab La touche pourrait naviguer entre les liens, mais en appuyant sur Enter ne les a pas activés de manière fiable.
  • Les lecteurs d’écran n’ont pas annoncé quel lien était actuellement actif.

✅ Après:

  • Pressage Enter active désormais de manière fiable les liens.
  • VoiceOver annonce correctement la «page actuelle» lorsque le lien actif est atteint.

Étant donné l’utilité de cette fonctionnalité, je souhaite que ariaCurrentWhenActive ont été générés automatiquement chaque fois routerLink est utilisé. Il ferait gagner du temps aux développeurs tout en équipant une meilleure accessibilité par défaut. Jusqu’à ce que cela se produise, c’est une meilleure pratique d’inclure explicitement ariaCurrentWhenActive chaque fois que la mise en œuvre de la navigation dans une application angulaire.

Si vous êtes prêt à commencer à améliorer l’accessibilité, ne vous y pensez pas, choisissez simplement une technologie d’assistance et essayez-la avec votre produit. Vous remarquerez probablement immédiatement les lacunes d’accessibilité. Et ne laissez pas «tester» vous faire fouiller ou vous émousser – en choisir un tâche simple mais commune (Comme naviguer sur votre site, signer ou ajouter quelque chose au chariot) et essayer de le faire avec une technologie d’assistance active, en utilisant uniquement votre clavier au lieu de votre souris.

Voici quelques options pour commencer. Choisissez-en un et passez seulement 10 minutes à tester. Cet effort rapide peut révéler des informations qui amélioreront considérablement votre expérience utilisateur!

Technologies d’assistance recommandées:
🖥 Windows: NVDA (GRATUIT), JAWS (PAYÉ)
💻 Mac: Voix off (intégrée)

En chrome

1. Extensions de test du lecteur d’écran
• Chromevox – Lecteur d’écran de Google pour les tests rapides (pas un remplacement complet des mâchoires / NVDA)
• Lecteur d’écran – Un outil simple basé sur un navigateur pour les tests de navigation de base

2. Outils d’audit d’accessibilité et de débogage
• Ash Devtools – Meilleur pour les tests d’accessibilité automatisés; Identifie les problèmes liés à la navigation sur le lecteur d’écran
• Outil d’évaluation des vagues – met en évidence visuellement les erreurs d’accessibilité
• Aperçu de l’accessibilité pour le Web – tests guidés de Microsoft
• Aria Devtools – vous aide à inspecter les attributs Aria pour vérifier la compatibilité avec les lecteurs d’écran

3. Simuler des déficiences visuelles
• Nocoffee Vision Simulator – vous aide à voir comment les utilisateurs à faible vision, à la cécité couleur ou aux problèmes de contraste éprouvent votre application

Donc, pour un test complet, vous pouvez en sélectionner un dans chaque catégorie pour votre navigateur de choix:

• Ash Devtools ou VAGUE pour un audit initial.
• Chromevox Pour tester la navigation réelle du lecteur d’écran.
• Aria Devtools pour vérifier les attributs ARIA appropriés.
• (ainsi que la voix off, pour les tests du côté du système)

Mais encore une fois, un pas dans la bonne direction est mieux que de regarder dans l’autre sens. Donc, si vous avez juste le temps pour un, alors faites-le!

Utilisez-vous une bibliothèque de composants? Si c’est le cas, je parie qu’ils ont pris des mesures (comme l’équipe angulaire avec leur directive Aria sur les routes) pour aider à s’améliorer accessibilité dans la mesure du possible. Un exemple de cela serait avec le Bibliothèque de composants angulaires de Progress Kendo UI. Il a un nouvel échantillon de thème pour améliorer le contraste.

Progress Kendo Ui Thème bleu océan Adhère aux normes WCAG 2.1 AA:

  • Améliore le contraste des couleurs pour une meilleure lisibilité.
  • Ajuste les tailles de texte et l’espacement pour une meilleure lisibilité.
  • Fonctionne hors de la boîte et peut être plus personnalisé pour des besoins spécifiques A11Y.

Donc, pour commencer avec notre thème Kendo UI A11y, l’installons d’abord dans notre projet. 🩵

1. Installez le package de thème souhaité via NPM:

• Pour le thème par défaut:

npm install --save @progress/kendo-theme-default

2. Incluez le thème de votre projet:

un. Utilisation de SCSS (recommandé pour la personnalisation):

• Importez l’intégralité du thème dans votre fichier SCSS principal (par exemple, styles.scss):

@use "@progress/kendo-theme-default/scss/all.scss";

• Alternativement, pour réduire la taille CSS, importez uniquement les composants que vous utilisez:

@use "@progress/kendo-theme-default/scss/index.scss";
        @include kendo-button;
        @include kendo-grid;

né Utilisation de CSS précompilés:

• Dans votre fichier angular.json, ajoutez le fichier CSS au tableau des styles:

"styles": [
          "node_modules/@progress/kendo-theme-default/dist/all.css",
          "src/styles.css"
          ]

Ensuite, nous allons inclure l’échantillon bleu océanique A11Y au-dessus du thème par défaut. Voici comment:

style.scs

@use "@progress/kendo-theme-default/dist/default-ocean-blue-a11y.scss" as *;

Pour des informations plus détaillées, reportez-vous à Kendo UI pour le style angulaire et la documentation des thèmes.

Maintenant, tous nos composants auront un contraste plus élevé, simplement en permettant ce thème.

Réflexions finales: petits changements, gros impact

L’amélioration de votre accessibilité de navigation ne doit pas être écrasante. En mettant en œuvre quelques changements clés, comme indiquant visuellement et programmatique des liens actifs, testant avec un lecteur d’écran et tirant parti des outils d’accessibilité intégrés– vous pouvez créer un Expérience plus inclusive et conviviale pour tout le monde.

Principaux à retenir

✔️ Utiliser RouterLinkactive avec ariacurrent quand Pour rendre les liens actifs à la fois visuellement et par programme identifiables.
✔️ Testez votre navigation avec des technologies d’assistance– Même 10 minutes de test peuvent révéler les principales lacunes d’accessibilité.
✔️ Profitez des outils disponiblesque ce soit des extensions de navigateur, des lecteurs d’écran ou des thèmes à contraste élevé comme Thème Blue Ocean Blue de Kendo Ui.
🚀 Étapes suivantes: Choisissez une chose de ce guide – juste un – et essayez-le. Si c’est ajouter ariaCurrentWhenActivetester votre application avec un lecteur d’écran, ou ajuster le contraste, Toute étape vers l’accessibilité est un pas dans la bonne direction.

Le Web doit être accessible à tous – le construire de cette façon. 🎉

Le meilleur outil 2023 pour ta croissance Instagram !



Source link
Quitter la version mobile