ARIA fournit des attributs qui donne a un élément une étiquette, un intitulé accessible. Comme ils sont traités différemment dans les navigateurs et lecteurs d’écran modernes, ils doivent être utilisés avec prudence. Ils ont également des effets secondaires notables. Il existe des techniques alternatives beaucoup plus robustes.
Le contexte
La façon dont un élément est annoncé par un lecteur d’écran est généralement déterminée par son contenu. Par exemple, le libellé du lien suivant est « Google » :
<a href="..."> Google </a>
Ainsi, un lecteur d’écran annoncera :
Google. Lien.
Aria
ARIA fournit deux attributs qui permettent de remplacer ces étiquettes.
Définir une étiquette, Mise en place d’un libellé
En utilisant aria-label, l’étiquette d’un élément peut être définie directement. Par exemple, le libellé du lien suivant est « Non, Bing ! » :
<a href="..." aria-label="No, Bing!"> Google </a>
Ainsi, un lecteur d’écran annoncera :
Non, Bing ! Lien.
Le code HTML
<p> How is the following link announced by screen readers? </p> <a aria-label="No, Bing!" href="...">Google</a> <p> Is this what you expected? </p>
Référencer une étiquette
À l’aide aria-labelledby, l’étiquette d’un élément peut être définie en faisant référence à l’ID d’un autre élément. Par exemple, le libellé du lien suivant est « Non, Bing ! » :
<a href="..." aria-labelledby="bing">
Google
</a>
<div id="bing">
No, Bing!
</div>
Au fait, les éléments cachés à l’aide de CSS peuvent toujours être référencés :
#bing {
display: none;
}
Encore une fois, un lecteur d’écran annoncera :
Non, Bing ! Lien.
Différences entre les navigateurs
Alors que Firefox respecte aria-label et aria-labelledby en mode navigation et focus, Internet Explorer ne le respecte qu’en mode focus.
Texte non consultable
Le texte ajouté avec aria-label n’est pas consultable dans les navigateurs. Ceci est déroutant pour les utilisateurs de lecteurs d’écran, car ils ne sont pas conscients de la différence entre le texte « normal » et texte de l’attribut aria-label. Il en va de même pour le texte caché avec display: none mais référencé avec aria-labelledby.
Utilisation
En général, les éléments HTML proposent leur propre façon d’étiqueter :
De nombreux éléments tels que des liens ou des boutons sont étiquetés via leur contenu :<button>This is the label</button>
Les images sont étiquetées à l’aide de l’ altattribut : <img src= »… » alt= »This is the label » />.
Les tableaux sont étiquetés à l’aide de l’attribut caption, voir Exemple de bon tableau général .
Les contrôles de formulaire sont étiquetés à l’aide de l’attribut <label>.
Etc.
En tant que tel, il existe de très rares cas (le cas échéant) où aria-label et aria-labelledby sont vraiment la seule voie à suivre.
Par exemple, une utilisation valide de aria-labelpourrait consister à remplacer une étiquette existante par des informations supplémentaires plus précises spécifiquement destinées aux utilisateurs de lecteurs d’écran :
<button aria-label= »Zoom image: opens a high resolution version, press Esc to close »> Zoom image</button>
Conclusion
Si vous visez à fournir une expérience utilisateur identique pour tous les publics, vous n’aurez probablement jamais besoin aria-label et aria-labelledby. Et en raison des particularités décrites et des effets secondaires, nous ne recommandons pas de les utiliser de toute façon.
Au lieu de cela, essayez de trouver des labels qui fonctionnent pour tous les publics. Et si vous avez vraiment besoin de joindre des informations supplémentaires pour les lecteurs d’écran, mieux vaut utiliser du texte masqué visuellement.
Traduction libre de l’article : https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/label-labelledby/