web-dev-qa-db-fra.com

Différence entre aria-label et aria-labelledby

J'ai trouvé 2 façons de marquer une zone avec aria- les attributs.

Premier:

<div class="main" role="main" aria-label="Search results">
    <a href="">Blah-blah</a>

Deuxième:

<div class="main" role="main" aria-labelledby="res1">
    <h2 id="res1" class="a11y">Search results</h2>
    <a href="">Blah-blah</a>

JAWS les lit absolument de la même manière. Alors, quelle est la différence et que choisiriez-vous?

javascriptcssscreen-readersaccessibility
27
Varvara Stepanova

Ceci site donne la raison de votre réponse: -

En théorie, vous devriez utiliser aria-labelledby si le texte est visuellement à l'écran quelque part et que cette forme est préférable. Vous ne devez utiliser aria-label que lorsqu'il n'est pas possible que l'étiquette soit visible à l'écran.

Cependant, avec le support actuel, vous devez toujours utiliser aria-labelledby, même si vous avez besoin que l'étiquette soit masquée. Alors qu'au moins JAWS 12 et VoiceOver lisent tous les deux l'étiquette aria comme prévu, il s'avère que VoiceOver ne lit pas correctement la hiérarchie si aria-label est utilisé. Par exemple:

<p id="group1">Outer group</p>
<p id="item1">First item</p>
<div role="group" aria-labelledby="group1">
<a href="javascript:" role="button" aria-labelledby="item1">Item Content</a>
</div>

tout ici utilise aria-labelledby et VoiceOver lira le bouton comme "Premier élément Bouton de groupe externe". En d'autres termes, le libellé du bouton, le libellé du groupe puis le type d'objet.

Cependant, si vous modifiez l'un des éléments pour utiliser aria-label, par exemple:

<p id="item1">First item</p>
<div role="group" aria-label="Outer group">
<a href="javascript:" role="button" aria-labelledby="item1">Item Content</a>
</div>

VoiceOver lit désormais le bouton comme un simple "bouton du premier élément". Peu importe l'élément qui utilise l'étiquette aria, s'il se trouve n'importe où dans la hiérarchie, seule l'étiquette du bouton lui-même sera lue.

Depuis le MDN : -

L'attribut aria-labelledby est utilisé pour indiquer les ID des éléments qui sont les étiquettes de l'objet. Il est utilisé pour établir une relation entre des widgets ou des groupes et leurs étiquettes. Les utilisateurs de technologies d'assistance telles que les lecteurs d'écran naviguent généralement sur une page en naviguant entre les zones de l'écran. Si une étiquette n'est pas associée à un élément d'entrée, un widget ou un groupe, elle ne sera pas lue par un lecteur d'écran.

Et ceci : -

L'attribut aria-label est utilisé pour définir une chaîne qui étiquette l'élément courant. Utilisez-le dans les cas où une étiquette de texte n'est pas visible à l'écran. (S'il y a du texte visible étiquetant l'élément, utilisez plutôt aria-labelledby.)

29
Rahul Tripathi