Pour qu'un lecteur d'écran présente une UI vocale à l'utilisateur, les éléments significatifs doivent disposer de libellés appropriés ou d'autres textes alternatifs. Un libellé ou une alternative textuelle donne à un élément son nom accessible, l'une des propriétés clés permettant d'exprimer la sémantique des éléments dans l'arborescence d'accessibilité.
Lorsque le nom d'un élément est associé à son rôle, l'utilisateur bénéficie d'un contexte lui permettant de comprendre avec quel type d'élément il interagit et comment il est représenté sur la page. En l'absence de nom, le lecteur d'écran énonce uniquement le rôle de l'élément. Imaginez que vous essayez de naviguer sur une page et d'entendre les mots clés "bouton", "case à cocher" et "image" sans aucun contexte supplémentaire. C'est pourquoi les libellés et les alternatives au texte sont essentiels pour une expérience de qualité et accessible.
Inspecter le nom d'un élément
Vous pouvez facilement vérifier le nom accessible d'un élément à l'aide des outils pour les développeurs Chrome:
- Faites un clic droit sur un élément, puis sélectionnez Inspecter. Le panneau "Éléments des outils de développement" s'ouvre.
- Dans le panneau "Elements", recherchez le volet Accessibility (Accessibilité). Il peut être masqué derrière un symbole
». - Dans la liste déroulante Propriétés calculées, recherchez la propriété Nom.
Que vous examiniez un élément img avec du texte alt ou un élément input avec un élément label, tous ces scénarios aboutissent au même résultat: attribuer un nom accessible à un élément.
Vérifiez qu'il n'y a pas de noms manquants
Il existe différentes manières d'ajouter un nom accessible à un élément, en fonction de son type. Le tableau suivant répertorie les types d'éléments les plus courants nécessitant des noms accessibles et des liens vers des explications sur la façon de les ajouter.
| Type d'élément | Ajouter un nom |
|---|---|
| Document HTML | Ajouter un libellé aux documents et aux cadres |
Éléments <frame> ou <iframe>
|
Ajouter un libellé aux documents et aux cadres |
| Éléments image | Inclure du texte alternatif pour les images et les objets |
Éléments <input type="image">
|
Inclure du texte alternatif pour les images et les objets |
Éléments <object>
|
Inclure du texte alternatif pour les images et les objets |
| Boutons | Boutons et liens de libellés |
| Liens | Boutons et liens de libellés |
| Éléments du formulaire | Ajouter des libellés aux éléments du formulaire |
Étiqueter les documents et les cadres
Chaque page doit comporter un élément title qui explique brièvement le sujet de la page. L'élément title donne son nom accessible à la page. Lorsqu'un lecteur d'écran entre dans la page, c'est le premier texte annoncé.
Par exemple, la page ci-dessous s'intitule "Recette de pâtisserie rapide de Mary's Maple Bar":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
De même, tous les éléments frame ou iframe doivent avoir des attributs title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Bien que le contenu d'un iframe puisse contenir son propre élément title interne, un lecteur d'écran s'arrête généralement à la limite du frame et annonce le rôle de l'élément ("frame") et son nom accessible, fournis par l'attribut title. Cela permet à l'utilisateur de décider s'il souhaite entrer dans la trame ou la contourner.
Inclure des alternatives au texte pour les images et les objets
Un élément img doit toujours être accompagné d'un attribut alt pour donner à l'image son nom accessible. Si l'image ne se charge pas, le texte alt est utilisé comme espace réservé afin que les utilisateurs aient une idée de ce que l'image essayait de transmettre.
Écrire un texte alt efficace est un peu de l'art, mais voici quelques consignes que vous pouvez suivre:
- Déterminez si l'image fournit un contenu qui serait autrement difficile à obtenir à partir du texte qui l'entoure.
- Si c'est le cas, expliquez le contenu de la manière la plus succincte possible.
Si l'image fait office de décoration et ne fournit aucun contenu utile, vous pouvez lui attribuer un attribut alt="" vide pour la supprimer de l'arborescence d'accessibilité.
Images en tant que liens et entrées
Une image encapsulée dans un lien doit utiliser l'attribut alt de img pour décrire la page vers laquelle l'utilisateur sera redirigé s'il clique sur le lien:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
De même, si un élément <input type="image"> est utilisé pour créer un bouton d'image, il doit contenir du texte alt décrivant l'action qui se produit lorsque l'utilisateur clique sur le bouton:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
Objets intégrés
Les éléments <object>, généralement utilisés pour les intégrations telles que Flash, PDF ou ActiveX, doivent également contenir du texte alternatif. Comme pour les images, ce texte s'affiche si l'élément ne s'affiche pas. Le texte alternatif est inséré dans l'élément object sous forme de texte normal, comme "Rapport annuel" ci-dessous:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Ajouter des libellés aux boutons et aux liens
Les boutons et les liens sont souvent essentiels à l'expérience utilisateur d'un site, et il est important que les deux noms soient accessibles.
Boutons
Un élément button tente toujours de calculer son nom accessible à l'aide de son contenu textuel. Pour les boutons qui ne font pas partie d'un form, il suffit d'écrire une action claire, car le contenu textuel peut être tout ce dont vous avez besoin pour créer un nom accessible.
<button>Book Room</button>
Les boutons en forme d'icône constituent une exception courante à cette règle. Un bouton d'icône peut utiliser une image ou une police d'icône pour fournir le contenu textuel du bouton. Par exemple, les boutons utilisés dans un éditeur WYSIWYG (What You See Is What You Get) pour mettre en forme du texte ne sont généralement que des symboles graphiques:
Lorsque vous utilisez des boutons en forme d'icône, il peut être utile de leur attribuer un nom explicite accessible à l'aide de l'attribut aria-label. aria-label remplace tout contenu textuel à l'intérieur du bouton, ce qui vous permet de décrire clairement l'action à toute personne utilisant un lecteur d'écran.
<button aria-label="Left align"></button>
Liens
Comme les boutons, les liens obtiennent principalement leur nom accessible à partir de leur contenu textuel. Une astuce consiste à insérer le texte le plus pertinent dans le lien lui-même, plutôt que des mots de remplissage tels que "Ici" ou "Lire la suite".
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Cela est particulièrement utile pour les lecteurs d'écran qui proposent des raccourcis pour répertorier tous les liens de la page. Si les liens sont remplis de texte de remplissage répétitif, les raccourcis suivants deviennent beaucoup moins utiles:
Ajouter des libellés aux éléments du formulaire
Il existe deux façons d'associer un libellé à un élément de formulaire (une case à cocher, par exemple). Ces deux méthodes permettent au texte du libellé de devenir également une cible de clic pour la case à cocher, ce qui est également utile pour les utilisateurs de souris ou d'écrans tactiles. Pour associer un libellé à un élément, vous avez deux possibilités:
- Placer l'élément d'entrée à l'intérieur d'un élément de libellé
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- Vous pouvez également utiliser l'attribut
fordu libellé et faire référence auidde l'élément.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Lorsque la case à cocher a été correctement libellée, le lecteur d'écran peut signaler que l'élément a le rôle de case à cocher, qu'il est coché et qu'il est nommé "Recevoir des offres promotionnelles ?", comme dans l'exemple VoiceOver ci-dessous:
À FAIRE: Site DevSite – Évaluation Think and Check