Pour qu'un lecteur d'écran puisse présenter une interface utilisateur vocale à l'utilisateur, les éléments doivent comporter des étiquettes ou des alternatives textuelles appropriées. Libellé ou texte donne à un élément son nom accessible, l'une des propriétés clés pour exprimer la sémantique des éléments dans l'arborescence d'accessibilité.
Lorsque le nom d'un élément est associé à son rôle, le rôle le contexte de l’utilisateur afin qu’il puisse comprendre le type d’élément avec lequel il interagit et comment elles sont représentées sur la page. Si aucun nom n'est présent, alors un le lecteur d'écran n'énonce que le rôle de l'élément. Imaginez essayer de naviguer une page et entendre, « bouton », « case à cocher », "image" sans aucune le contexte. C'est pourquoi les autres étiquettes et textes sont essentiels à une bonne, plus accessible.
Inspecter le nom d'un élément
Vous pouvez facilement vérifier le nom accessible d'un élément à l'aide des outils de développement de Chrome:
- Effectuez un clic droit sur un élément, puis sélectionnez Inspecter. Les outils de développement s'ouvrent Panneau "Éléments".
- Dans le panneau "Éléments", recherchez le volet Accessibilité. Il est peut-être masqué
derrière le symbole
». - Dans la liste déroulante Computed Properties (Propriétés calculées), recherchez la propriété Name (Nom).
<ph type="x-smartling-placeholder">Que vous regardiez un img avec du texte alt ou un input avec un
label, tous ces scénarios aboutissent au même résultat: l'attribution d'une
son nom accessible.
Rechercher des 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 qui ont besoin de noms accessibles et de liens vers des explications sur la façon de les ajouter.
| Type d'élément | Ajouter un nom |
|---|---|
| Document HTML | Étiqueter des documents et des cadres |
Éléments <frame> ou <iframe>
|
Étiqueter des documents et des cadres |
| Éléments image | <ph type="x-smartling-placeholder"></ph> Inclure du texte de remplacement pour les images et les objets |
Éléments <input type="image">
|
<ph type="x-smartling-placeholder"></ph> Inclure du texte alternatif pour les images et les objets |
Éléments <object>
|
<ph type="x-smartling-placeholder"></ph> Inclure du texte alternatif pour les images et les objets |
| Boutons | Ajouter des libellés aux boutons et aux liens |
| Liens | Ajouter des libellés aux boutons et aux liens |
| Éléments du formulaire | Ajouter des libellés aux éléments du formulaire |
Étiqueter les documents et les cadres
Chaque page doit avoir un
title
qui explique brièvement le sujet de la page. L'élément title donne
à la page son nom accessible. Lorsqu'un lecteur d'écran accède à la page, il s'agit
premier texte annoncé.
Par exemple, la page ci-dessous a pour titre "Recette de pâtisserie 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 comporter des attributs title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Bien que le contenu d'une iframe puisse contenir son propre élément title interne,
le lecteur d'écran s'arrête généralement à la limite de l'image et annonce l'élément
"frame" et son nom accessible, fourni par l'attribut title. Ce
permet à l'utilisateur de décider s'il souhaite entrer dans le cadre ou l'ignorer.
Inclure du texte alternatif pour les images et les objets
Un élément img doit toujours être accompagné d'un
alt
pour donner à l'image son nom accessible. Si le chargement de l'image échoue,
Le texte alt sert d'espace réservé afin que les utilisateurs aient une idée de l'image
que j'essaie de transmettre.
Rédiger du texte alt de qualité est un peu un art, mais il y a quelques consignes.
vous pouvez suivre:
- Déterminez si l'image fournit du contenu qu'il serait autrement difficile d'y accéder. à obtenir en lisant le texte environnant.
- Si c'est le cas, présentez le contenu aussi succinctement que possible.
Si l'image joue un rôle de décoration
et ne fournit aucun contenu utile,
vous pouvez lui attribuer un attribut alt="" vide pour le supprimer de l'accessibilité
arborescence.
Images en tant que liens et entrées
Une image incluse dans un lien doit utiliser l'attribut alt de img pour décrire
vers lequel 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 une 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>, qui sont généralement utilisés pour les intégrations comme Flash, PDF ou
ActiveX doit également contenir un texte alternatif. Semblable aux images, ce texte est
s'affiche si l'élément ne s'affiche pas. Le texte alternatif est placé dans la
object sous forme de texte standard, comme "Rapport annuel" ci-dessous:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Ajouter un libellé aux boutons et aux liens
Les boutons et les liens sont souvent essentiels à l'expérience d'un site. important que les deux aient de bons noms accessibles.
Boutons
Un élément button tente toujours de calculer son nom accessible à l'aide de son
du contenu textuel. Pour les boutons qui ne font pas partie d'un form, écrire une
car le contenu textuel peut suffire à créer une bonne
son nom.
<button>Book Room</button>
Les boutons représentant une icône constituent une exception courante à cette règle. Un bouton d'icône peut utiliser une d'une image ou d'une police d'icône pour fournir le contenu textuel du bouton. Par exemple : boutons utilisés dans un éditeur WYSIWYG (What You See Is What You Get) pour le formatage ne sont généralement que des symboles graphiques:
Lorsque vous travaillez avec des boutons d’icône, il peut être utile de leur donner une
nom accessible à l'aide de l'attribut aria-label. aria-label remplace toute
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 tirent principalement leur nom accessible de leur texte contenus. Pour créer un lien, il est conseillé de placer l'élément le plus pertinent de texte dans le lien lui-même, plutôt que des mots de remplissage comme "Ici" ou « Lire Plus."
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 lister des liens sur la page. Si les liens sont remplis de texte de remplissage répétitif, ces les raccourcis deviennent beaucoup moins utiles:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">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). Si vous utilisez l'une ou l'autre de ces méthodes, le texte du libellé devient aussi une cible de clic pour la case à cocher, ce qui est également utile pour les utilisateurs d'une souris ou d'un écran tactile. Pour associer un libellé avec un élément, soit:
- Placer l'élément d'entrée dans 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>
Si la case a été correctement libellée, le lecteur d'écran peut signaler que l'élément a un rôle de case à cocher, est coché et s'appelle "Recevoir des offres promotionnelles ?" comme dans l'exemple VoiceOver ci-dessous:
À FAIRE: DevSite – Évaluation "Think and Check"