web-dev-qa-db-fra.com

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 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 aria-labelledby attribut 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?

htmllabelaccessibilitywai-aria
76
Ian Y.

Il existe quelques bons exemples d’utilisation à pages Mozilla Developer . Le meilleur de leurs exemples est peut-être 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 particulièrement utiles pour créer Accessible Rich Internet Applications: tant que vous vous en tenez au code HTML sémantique standard (utilisation de formulaires avec étiquettes standard), vous ne devriez pas en avoir besoin du tout. : il n'y a donc aucune raison de l'utiliser sur une paire LABEL/INPUT. Mais si vous construisez à partir de rien une "interface utilisateur riche" (DIV et autres éléments de bas niveau avec une interactivité javascript), il est essentiel de permettre à un lecteur d'écran de savoir quelle est l'intention du niveau supérieur.

63
BrendanMcK

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.

4
user2323922