Разница между aria-label и aria-labelledby

Question

Я нашел 2 способа пометить зону с aria- атрибутов.

Первый:

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

Второй:

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

Челюсти читает их абсолютно одинаково. Итак, в чем разница и что бы вы выбрали?

Answer 1

Этот сайт дает причину вашего ответа:-

Теоретически, вы должны использовать aria-labelledby, если текст где-то визуально отображается на экране, и эта форма предпочтительнее. Вы должны использовать aria-label только в том случае, если невозможно отобразить метку на экране.

Однако при текущей поддержке вы всегда должны использовать aria-labelledby, даже если вам нужно, чтобы метка была скрыта. Хотя по крайней мере JAWS 12 и VoiceOver оба читают метку aria, как и ожидалось, оказывается, что VoiceOver неправильно читает иерархию, если используется метка aria. Например:

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

все здесь использует aria-labelledby, и VoiceOver будет читать кнопку как "Кнопка внешнего элемента первой группы". Другими словами, метка кнопки, метка группы, а затем тип объекта.

Однако, если вы измените какой-либо из элементов на использование aria-label, например:

<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 теперь будет читать кнопку как простую кнопку "Первый элемент". Кажется, не имеет значения, какой элемент использует aria-label, если он находится где-либо в иерархии, будет считана только метка для самой кнопки.

Из MDN:-

Атрибут aria-labelledby используется для указания идентификаторов элементов, которые являются метками для объекта. Он используется для установления связи между виджетами или группами и их ярлыками. Пользователи вспомогательных технологий, таких как программы чтения с экрана, обычно перемещаются по страницам, переключаясь между областями экрана. Если метка не связана с элементом ввода, виджетом или группой, она не будет считываться программой чтения с экрана.

И это:-

Атрибут aria-label используется для определения строки, которая маркирует текущий элемент. Используйте его в тех случаях, когда текстовая метка не видна на экране. (Если на элементе виден текст, используйте вместо него aria-labelledby.)

Answer 2

Если вы используете aria-label, программа чтения с экрана произносит значение, заданное для aria-label.

      <p>accessibility</p>   <button aria-label="test">Click Me</button>

Вывод средства чтения с экрана:

тест кнопки доступности

Если у вас уже есть какой-то текст на веб-странице, вы можете использовать aria-labelledby, вы можете просто передать идентификатор этого конкретного элемента другому элементу в качестве значения.

      <p id="accessibilityLabel">accessibility</p>   <button aria-labelledby="accessibilityLabel">Click</button>

Вывод средства чтения с экрана:

доступность кнопки доступности