Я нашел два способа маркировки зоны с атрибутами 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 читает их абсолютно одинаково. Итак, какая разница и что вы выберете?
Этот сайт дает причину вашего ответа: -
В теории вы должны использовать 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 вместо.)