Разница между ариями и ариями

Я нашел два способа маркировки зоны с атрибутами 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>

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

Ответы

Ответ 1

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

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

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

<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, например:

<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 используется для указания идентификаторов элементы, которые являются метками для объекта. Он используется для отношения между виджетами или группами и их ярлыками. Пользователи вспомогательные технологии, такие как устройства чтения с экрана, обычно на вкладке между областями экрана. Если ярлык не связанный с элементом ввода, виджемом или группой, он не будет считаться с помощью устройства чтения с экрана.

И this: -

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