HTML — Accessibilité
Une page doit pouvoir se comprendre et s’utiliser de plusieurs façons : à la souris, au clavier, avec un zoom ou un lecteur d’écran. Les bonnes bases se trouvent déjà dans HTML : éléments natifs, libellés, boutons, textes alternatifs et en-têtes de tableaux.
Un HTML accessible aide davantage de personnes à comprendre une page, à s’y repérer et à l’utiliser. Les éléments natifs fournissent déjà une partie des rôles, des états et des interactions au clavier. À vous de choisir les bons éléments, de garder un ordre de lecture cohérent et d’ajouter les noms ou les associations nécessaires pour comprendre le contenu.
Donner un nom, un rôle et un contexte aux éléments
Chaque élément interactif doit avoir un nom accessible, c’est-à-dire un nom que les technologies d’assistance peuvent restituer. Le texte d’un bouton suffit souvent ; label nomme un champ, alt décrit le rôle d’une image informative et legend énonce la question d’un groupe de champs. Les titres permettent de repérer les sujets. Ajoutez ARIA lorsque HTML seul ne permet pas d’exprimer l’information ou l’association nécessaire.
<nav aria-label="Navigation principale">
<a href="/courses">Cours</a>
<a href="/exercises">Exercices</a>
</nav>
<label for="search">Rechercher des leçons</label>
<input id="search" name="query" type="search">
<button type="button" aria-pressed="false">Enregistrer la leçon</button>- Choisissez les éléments interactifs natifs.
