Le but d'utiliser "aria-labelledby" sur des éléments d'entrée déjà étiquetés?

Question

De nombreux sites de démonstration aria utilisent un 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 d'utiliser 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?

Answer 1

Il y a quelques bons exemples de son utilisation à Mozilla Developer pages. Peut-être le meilleur de ces exemples est l'endroit où il est utilisé pour associer un menu avec l'option 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>  
    ...  

ARIA attributs tend à être de plus grande utilisation dans le bâtiment Accessible Rich Internet Applications: tant que vous êtes en collant avec la norme sémantique HTML à l'aide de formulaires avec les normes d'étiquettes - vous ne devriez pas besoin: donc il n'y a pas de raison de l'utiliser sur l'ÉTIQUETTE d'ENTRÉE/de paire. Mais si vous êtes la construction de "riche de l'INTERFACE utilisateur" à partir de zéro (DIVs et d'autres éléments de niveau avec le javascript pour ajouter de l'interactivité), alors qu'elle est essentielle pour permettre à un lecteur d'écran de savoir ce que le niveau supérieur de l'intention est.

Answer 2

Il y a toujours des problèmes de support UA avec les nouveautés, c'est pourquoi les développeurs se tournent vers l'amélioration progressive. Cette technique ARIA permet de supprimer l'attribut "for" et permet à d'autres éléments de faire partie de la forme enrichie. Ces techniques deviendront une pratique courante.