1. Comprendre l’accessibilité
L’accessibilité consiste à garantir des produits et services numériques facilement accessibles et utilisables par tous, y compris les personnes en situation de handicap. Dans le contexte du développement web, cela signifie que les applications doivent être conçues et développées de manière que les utilisateurs handicapés puissent interagir avec elles sans rencontrer de barrières inutiles.
Par handicap, nous entendons aussi bien les handicaps moteurs que visuels, auditifs, cognitifs… Les applications web accessibles prennent en compte les diverses façons dont ces utilisateurs interagissent avec le contenu et les fonctionnalités en ligne, notamment en utilisant des technologies d’assistance telles que les lecteurs d’écran, les plages braille, les commandes vocales et les dispositifs de pointage adaptés.
Plusieurs raisons font de l’accessibilité un élément incontournable :
- Éthique : il est essentiel de veiller à ce que toutes les personnes, indépendamment de leurs capacités, aient un accès équitable à l’information et aux services en ligne.
- Légal : de nombreux pays ont des lois et des régulations en matière d’accessibilité qui exigent des organisations qu’elles rendent leurs sites internet et applications accessibles.
- Commercial : les applications accessibles peuvent atteindre un public plus large et améliorer l’expérience utilisateur pour tous, ce qui peut conduire à une plus grande satisfaction des clients et à une augmentation des ventes ou de l’engagement.
Les directives pour l’accessibilité web, appelées WCAG (Web Content Accessibility Guidelines), sont une série de recommandations internationalement reconnues élaborées par le World Wide Web Consortium (W3C). Les WCAG fournissent un ensemble de critères organisés en trois niveaux (A, AA et AAA) pour aider les développeurs à rendre leurs applications et sites accessibles. Les niveaux représentent des objectifs d’accessibilité croissants, le niveau AAA étant le plus exigeant. De nombreuses régulations en matière d’accessibilité exigent généralement la conformité au niveau AA.
Dans cet article, nous allons explorer comment appliquer ces principes d’accessibilité lors du développement d’applications Angular, en utilisant Visual Studio Code.
2. Configurer Visual Studio Code pour l’accessibilité
Visual Studio Code (VSCode) est un éditeur de code populaire et puissant qui offre une variété d’extensions et de fonctionnalités pour faciliter le développement d’applications accessibles. Voici quelques étapes pour configurer VSCode afin de t’aider à travailler plus efficacement avec l’accessibilité et Angular :
2.1 Extensions utiles
Plusieurs extensions peuvent améliorer ton expérience de développement d’applications accessibles :
- Angular Language Service : Fournit un ensemble d’outils pour travailler avec Angular, y compris la complétion automatique, la navigation, les erreurs en temps réel et d’autres fonctionnalités utiles.
- Accessibility Insights : Permet d’effectuer des analyses d’accessibilité directement dans VSCode. L’extension utilise les règles d’accessibilité de axe-core pour identifier les problèmes d’accessibilité et suggère des corrections.
- Web Accessibility : Fournit des extraits de code pour ajouter rapidement des attributs ARIA et des éléments HTML accessibles.
- TSLint : Bien que TSLint soit en fin de vie et remplacé par ESLint, si tu travailles avec des projets Angular plus anciens, cette extension peut t’aider à appliquer des règles de linting spécifiques à TypeScript et à Angular, y compris certaines règles liées à l’accessibilité.
2.2 Paramètres de l’éditeur
Tu peux personnaliser les paramètres de VSCode pour améliorer ton expérience de développement. Voici deux paramètres intéressants liés à l’accessibilité:
- accessibilitySupport : Permet d’activer le support d’accessibilité dans VSCode pour les utilisateurs qui ont besoin de technologies d’assistance. Tu peux le régler sur « on » ou « off » selon tes besoins.
- tabCompletion : Activer cette option permet la complétion automatique des extraits de code lors de la saisie d’un mot-clé ou d’un attribut, ce qui peut faciliter l’ajout d’attributs ARIA et d’autres éléments accessibles.
Pour modifier les paramètres de VSCode, va dans Fichier > Préférences > Paramètres (ou Code > Préférences > Paramètres sur macOS) et recherche les paramètres mentionnés ci-dessus.
En configurant Visual Studio Code avec les extensions et les paramètres appropriés, tu seras mieux préparé(e) pour développer des applications Angular accessibles et conformes aux directives WCAG.
3.Les bases de l’accessibilité avec Angular
Angular offre plusieurs fonctionnalités pour faciliter la création d’applications accessibles. Voici quelques concepts clés et exemples de code pour améliorer l’accessibilité avec Angular :
3.1 Utilisation des attributs ARIA
Les attributs ARIA (Accessible Rich Internet Applications) sont des attributs spécifiques pour améliorer l’accessibilité du contenu web interactif. Ils fournissent des informations supplémentaires aux technologies d’assistance, telles que les lecteurs d’écran, pour mieux comprendre le contenu et les contrôles de l’interface utilisateur.
<button aria-label= »Ajouter un nouvel élément » (click)= »ajouterElement() »>
<i class= »fas fa-plus »></i>
</button>
Dans cet exemple, l’attribut aria-label fournit une description textuelle de l’action effectuée par le bouton, information très utile pour les lecteurs d’écran.
3.2 Gestion du focus
La gestion du focus est essentielle pour permettre une navigation fluide et logique au clavier. Tu peux utiliser les directives Angular pour gérer le focus et t’assurer que les éléments interactifs sont accessibles au clavier.
Exemple de code :
<!– Utiliser la directive cdkFocusInitial pour définir le focus initial –>
<button cdkFocusInitial (click)= »action1() »>Action 1</button>
<button (click)= »action2() »>Action 2</button>
Dans cet exemple, la directive cdkFocusInitial (faisant partie d’Angular CDK) est utilisée pour définir le focus initial sur le premier bouton.
3.3 Exploiter les directives Angular pour améliorer l’accessibilité
Il est possible de créer des directives personnalisées pour automatiser et réutiliser des comportements d’accessibilité dans toute ton application :
Exemple de code Typescript :
// Directive pour ajouter un attribut « role » aux éléments
import { Directive, ElementRef, Input, OnInit } from ‘@angular/core’;
@Directive({
selector: ‘[appAriaRole]’
})
export class AriaRoleDirective implements OnInit {
@Input(‘appAriaRole’) role: string;
constructor(private el: ElementRef) {}
ngOnInit(): void {
this.el.nativeElement.setAttribute(‘role’, this.role);
}
}
// Directive pour ajouter un attribut « role » aux éléments
import { Directive, ElementRef, Input, OnInit } from ‘@angular/core’;
Exemple de code Html :
<!– Utiliser la directive personnalisée pour ajouter un rôle ARIA –>
<div appAriaRole= »navigation »>
<!– Contenu de la navigation –>
</div>
ans cet exemple, une directive personnalisée appAriaRole est créée pour ajouter facilement un attribut role aux éléments HTML. Cette directive peut être utilisée dans toute l’application pour rendre les éléments plus accessibles.
En appliquant ces concepts, tu peux améliorer significativement l’accessibilité de tes applications Angular et offrir ainsi une meilleure expérience à tous les utilisateurs.
4. Accessibilité des formulaires Angular
Les formulaires sont une partie essentielle de nombreuses applications. Il est crucial de s’assurer qu’ils sont accessibles.
4.1 Utilisation de labels appropriés
Les labels permettent de décrire la fonction des champs de saisie et de guider les utilisateurs lorsqu’ils remplissent un formulaire. Assure-toi d’associer chaque élément de formulaire à un élément <label> et d’utiliser l’attribut for pour lier le label au champ de saisie correspondant.
Exemple de code:
<label for= »nom »>Nom:</label>
<input id= »nom » type= »text » formControlName= »nom » />
4.2 Groupe de boutons radio et cases à cocher
Les boutons radio et les cases à cocher doivent être regroupés et clairement étiquetés pour aider les utilisateurs à comprendre les options disponibles. Utilise les éléments <fieldset> et <legend> pour regrouper les contrôles et fournir un titre descriptif pour le groupe.
Exemple de code :
<fieldset>
<legend>Choisissez votre option de paiement:</legend>
<input type= »radio » id= »option1″ name= »paiement » value= »option1″ />
<label for= »option1″>Option 1</label>
<input type= »radio » id= »option2″ name= »paiement » value= »option2″ />
<label for= »option2″>Option 2</label>
</fieldset>
4.3 Validation et messages d’erreur
La validation des données saisies et l’affichage de messages d’erreur clairs sont essentiels pour une expérience utilisateur optimale. Angular fournit des mécanismes de validation intégrés pour les formulaires réactifs et basés sur des modèles. Utilise des messages d’erreur conditionnels qui s’affichent lorsque les champs ne sont pas valides.
Exemple de code TypeScript (formulaire réactif) :
import { FormControl, FormGroup, Validators } from ‘@angular/forms’;
export class AppComponent {
formulaire = new FormGroup({
email: new FormControl( », [Validators.required, Validators.email])
});
}
Exemple de code Html :
<form [formGroup]= »formulaire »>
<label for= »email »>Adresse e-mail:</label>
<input id= »email » type= »email » formControlName= »email » />
<div *ngIf= »formulaire.controls.email.invalid && formulaire.controls.email.touched »>
Veuillez fournir une adresse e-mail valide.
</div>
</form>
5. Navigation et structuration du contenu dans Angular
La navigation et la structuration du contenu sont essentielles pour permettre aux utilisateurs de comprendre et d’interagir facilement avec votre application Angular.
5.1 Éléments HTML sémantiques
Utiliser des éléments HTML sémantiques permet de structurer et organiser ton contenu de manière logique, aidant ainsi les technologies d’assistance à comprendre la structure de la page et à fournir une navigation plus efficace.
Exemples d’éléments HTML sémantiques :
<header> : en-tête de la page ou d’une section
<nav> : navigation principale
<main> : contenu principal de la page
<article> : contenu autonome, comme un article de blog
<section> : section générique d’un document
<footer> : pied de page de la page ou d’une section
5.2 Organisation logique du contenu
Organise le contenu de ton application Angular de manière logique et hiérarchique en utilisant des titres (de <h1> à <h6>) pour indiquer l’importance relative des sections. Veille à n’utiliser qu’un seul <h1> par page pour indiquer le titre principal.
Exemple de code :
<main>
<h1>Titre principal de la page</h1>
<section>
<h2>Sous-titre de la section</h2>
<article>
<h3>Titre de l’article</h3>
<!– Contenu de l’article –>
</article>
</section>
</main>
5.3 Navigation au clavier
Assure-toi que ton application Angular est entièrement navigable au clavier. Tous les éléments interactifs doivent être accessibles et utilisables avec le clavier. N’oublie pas de gérer les ordres de tabulation en utilisant l’attribut tabindex pour garantir une navigation logique.
Exemple de code :
<!– Ordre de tabulation personnalisé –>
<button tabindex= »1″>Bouton 1</button>
<button tabindex= »2″>Bouton 2</button>
5.4 Gestion des liens d’évitement
Les liens d’évitement permettent aux utilisateurs de sauter rapidement les sections répétitives de la page, comme la navigation, pour accéder directement au contenu principal. Ajoute des liens d’évitement en haut de chaque page pour améliorer l’expérience de navigation des utilisateurs de technologies d’assistance.
Exemple de code :
<a href= »#contenu-principal »>Aller au contenu principal</a>
<nav>
<!– Navigation –>
</nav>
<main id= »contenu-principal »>
<!– Contenu principal –>
</main>
6. Tester l’accessibilité d’une application Angular
Il est important de tester régulièrement l’accessibilité d’une application Angular.
6.1 Test manuel
Effectue des tests manuels pour vérifier si ton application est navigable et utilisable au clavier. Parcours ton application en utilisant uniquement le clavier, en prêtant attention aux points suivants :
- La navigation est-elle logique et cohérente ?
- Les éléments interactifs sont-ils accessibles au clavier ?
- Les informations visuelles sont-elles également disponibles sous forme textuelle ?
6.2 Utilisation de lecteurs d’écran
Tu peux tester ton application avec différents lecteurs d’écran, tels que NVDA, JAWS et VoiceOver. Ces outils t’aideront à comprendre comment les utilisateurs de technologies d’assistance perçoivent et interagissent avec ton application.
6.3 Outils d’audit d’accessibilité
Utilise des outils d’audit d’accessibilité pour identifier les problèmes d’accessibilité potentiels dans ton application.
- Lighthouse : Intégré à Google Chrome DevTools, Lighthouse te permet d’effectuer un audit d’accessibilité de ton application et fournit des conseils pour améliorer les performances, l’accessibilité et la compatibilité mobile.
- axe : axe est une bibliothèque JavaScript open-source qui analyse automatiquement ton application et détecte les problèmes d’accessibilité. Des extensions de navigateur comme Axe DevTools sont disponibles pour faciliter son utilisation.
- Accessibility Insights : Il s’agit d’un outil proposé par Microsoft qui analyse ton application pour détecter les problèmes d’accessibilité et te guide dans leur résolution. Il est disponible sous forme d’extension de navigateur et d’extension pour Visual Studio Code.
6.4 Intégration de tests d’accessibilité automatisés
Intègre des tests d’accessibilité automatisés dans ton processus de développement pour détecter les problèmes d’accessibilité plus tôt et éviter les régressions. Tu peux utiliser des outils tels que Jest-Axe ou Protractor-Axe pour intégrer des tests d’accessibilité dans ton pipeline de tests unitaires ou de bout en bout.
Exemple de code :
// Exemple de test d’accessibilité avec Jest et Axe
import { render } from ‘@testing-library/angular’;
import { axe, toHaveNoViolations } from ‘jest-axe’;
import { AppComponent } from ‘./app.component’;
expect.extend(toHaveNoViolations);
describe(‘AppComponent’, () => {
it(‘doit passer les tests d\’accessibilité’, async () => {
const { container } = await render(AppComponent);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
});