Le but d'utiliser "aria-labelledby" sur des éléments d'entrée déjà étiquetés?
De nombreux sites de démonstration Aria utilisent du code tel que:
<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">
Mais quel est le but de l'utilisation de l'attribut aria-labelledby dans ce cas? L'élément input a déjà été étiqueté par l'élément label qui utilise l'attribut for, n'est-ce pas?
2 réponses
Il y a quelques bons exemples de son utilisation sur Mozilla Developer pages . Peut-être que le meilleur de leurs exemples est l'endroit où il est utilisé pour associer un menu contextuel à l'élément de menu parent-c'est L'exemple 7 dans la page:
<div role="menubar">
<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
<div role="menu" aria-labelledby="fileMenu">
<div role="menuitem">Open</div>
<div role="menuitem">Save</div>
<div role="menuitem">Save as ...</div>
...
</div>
...
Les attributs ARIA ont tendance à être les plus utiles dans la construction D'Applications Internet Rich accessibles : tant que vous vous en tenez au HTML sémantique standard-en utilisant des formulaires avec des étiquettes standard-vous ne devriez pas en avoir besoin du tout: il n'y a donc aucune raison pour l'utiliser sur une paire étiquette / entrée. Mais si vous construisez une "interface utilisateur riche" à partir de zéro (DIVs et autres éléments de bas niveau avec javascript ajoutant de l'interactivité), il est essentiel de laisser un lecteur d'écran savoir quelle est l'intention de niveau supérieur.
Il y a toujours des problèmes de support UA avec quelque chose de nouveau, c'est pourquoi les développeurs se tournent vers l'amélioration progressive. Cette technique Aria offre la possibilité de supprimer l'attribut "for" et permet à d'autres éléments de faire partie de la forme riche. Ces techniques deviendront une pratique courante.