javascript - Diferencia entre aria-label y aria-labelledby

css screen-readers

Question

Encontré 2 formas de marcar una zona con aria- atributos.

El primero:

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

Segundo:

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

JAWS los lee absolutamente iguales. Entonces, ¿cuál es la diferencia y qué elegirías?

Answer 1

Este site da la razón de su respuesta: -

En teoría, debe usar aria-labelledby si el texto está visualmente en pantalla en algún lugar y este formulario es preferible. Solo debe usar aria-label cuando no sea posible tener la etiqueta visible en la pantalla.

Sin embargo, con el soporte actual, siempre debe usar aria-labelledby, incluso si necesita que la etiqueta esté oculta. Mientras que al menos JAWS 12 y VoiceOver leen la etiqueta aria como se esperaba, resulta que VoiceOver no lee correctamente la jerarquía si la etiqueta aria está en uso. Por ejemplo:

<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>

todo aquí está usando aria-labelledby y VoiceOver leerá el botón como "Botón del primer grupo externo". En otras palabras, la etiqueta del botón, la etiqueta del grupo y luego el tipo de objeto.

Sin embargo, si cambia alguno de los elementos para usar aria-label, por ejemplo:

<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 ahora leerá el botón como simple "Botón del primer elemento". No parece importar qué elemento use aria-label, si está en algún lugar de la jerarquía, solo se leerá la etiqueta del botón en sí.

Desde el MDN : -

El atributo aria-labelledby se usa para indicar los ID de los elementos que son las etiquetas para el objeto. Se utiliza para establecer una relación entre los widgets o grupos y sus etiquetas. Los usuarios de tecnologías de asistencia, como los lectores de pantalla, generalmente navegan por una página haciendo tabulaciones entre las áreas de la pantalla. Si una etiqueta no está asociada con un elemento de entrada, widget o grupo, no será leída por un lector de pantalla.

Y this : -

El atributo aria-label se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que una etiqueta de texto no sea visible en la pantalla. (Si hay texto visible etiquetando el elemento, use aria-labelledby en su lugar.)