Атрибуты ARIA позволяют изменять состояния и свойства элемента, определенные в дереве специальных возможностей.
Примечание: ARIA изменяет только дерево специальных возможностей, изменяя то, как вспомогательные технологии представляют контент вашим пользователям.
ARIA ничего не меняет в функциях или поведении элемента.
Если семантические HTML-элементы не используются по назначению и функциональности по умолчанию, необходимо использовать JavaScript для управления поведением, фокусом и состояниями ARIA.
Типы атрибутов ARIA
Существует 4 категории состояний и свойств ARIA:
Атрибуты виджета, атрибуты области действия (интерактивных элементов), атрибуты перетаскивания, атрибуты отношений.
Глобальные атрибуты ARIA
Некоторые состояния и свойства применяются ко всем элементам HTML независимо от того, применяется ли роль ARIA. Они определены как "глобальные" атрибуты. Глобальные состояния и свойства поддерживаются всеми ролями и базовыми элементами разметки.
Многие из атрибутов являются глобальными, что означает, что они могут быть включены в любой элемент, если это специально не запрещено. Подробнее.
Команды ARIA должны иметь доступное имя
Почему это важно
Боты, в том числе и поисковые не могут определить назначение элементов с role="ссылка", role="кнопка" или role="элемент меню", у которых нет доступного имени.
Описание правила
Элементы команды ARIA должны содержать различимый текст, который четко описывает назначение, цель, функцию или действие для пользователей программы чтения с экрана.
Алгоритм
Проверяет все элементы с помощью role="link", role="button" или role="menuitem", чтобы убедиться, что у них различимое, доступное имя.
Как устранить проблему
Правильные решения для разметки
Правило aria-command-name содержит четыре шаблона разметки, которые соответствуют критериям тестирования:
<div role="link" id="al" aria-label="Name"></div>
<div role="button" id="alb" aria-labelledby="labeldiv"></div>
<div role="menuitem" id="combo" aria-label="Aria Name">Name</div>
<div role="link" id="title" title="Title"></div>
Убедитесь, что каждый элемент с role="link", role="button" или role="menuitem" имеет одну из следующих характеристик:
Внутренний текст, который различим для пользователей программы чтения с экрана.
Непустой атрибут aria-label.
aria-помечается путем указания на элемент с текстом, который различим для пользователей программы чтения с экрана.
Неправильные решения для разметки
Правило aria-command-name содержит четыре шаблона разметки, которые не соответствуют критериям тестирования:
<div role="link" id="empty"></div>
<div role="button" id="alempty" aria-label=""></div>
<div role="menuitem" id="albmissing" aria-labelledby="nonexistent"></div>
<div role="link" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>
aria-label
Атрибут aria-label определяет строковое значение, которое помечает интерактивный элемент.
Описание
Иногда доступное по умолчанию имя элемента отсутствует или неточно описывает его содержимое, и в DOM нет видимого содержимого, которое можно было бы связать с объектом, чтобы придать ему смысл. Распространенным примером является кнопка, содержащая шрифт SVG или icon (который вы не должны использовать) без какого-либо текста.В случаях, когда интерактивный элемент не имеет доступного имени или доступное имя является неточным, и в DOM нет видимого содержимого, на которое можно ссылаться с помощью атрибута aria-labelledby, атрибут aria-label может использоваться для определения строки, которая помечает интерактивный элемент, на который он ссылается. установлено. Это предоставляет элементу его доступное имя.
<button aria-label="Close" onclick="myDialog.close()">
<svg
aria-hidden="true"
focusable="false"
width="17"
height="17"
xmlns="http://www.w3.org/2000/svg">
<path
d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
fill="#000" />
</svg>
</button>
Примечание: aria-label предназначен для использования с интерактивными элементами или элементами, сделанными интерактивными с помощью других объявлений ARIA, когда в DOM нет соответствующего текста, на который можно было бы ссылаться как на метку
У большинства содержимого есть доступное имя, сгенерированное из текстового содержимого элемента, непосредственно заключающего его. Доступные имена также могут быть созданы с помощью определенных атрибутов или связанных элементов.
По умолчанию доступным именем кнопки является содержимое между открывающим и закрывающим тегами <button>, доступным именем изображения является содержимое его атрибута alt, а доступным именем ввода формы является содержимое связанного элемента <label>.
Если ни один из этих параметров недоступен или если доступное имя по умолчанию не подходит, используйте атрибут aria-label для определения доступного имени элемента.
aria-label можно использовать в случаях, когда текст, который мог бы обозначать элемент, не виден. Если есть видимый текст, который помечает элемент, используйте вместо него aria-labelledby.
Назначение aria-label такое же, как и aria-labelledby. Оба предоставляют доступное имя для элемента. Если для элемента, на который вы можете ссылаться, нет видимого имени, используйте aria-label, чтобы предоставить пользователю узнаваемое доступное имя. Если текст метки доступен в DOM и ссылается на содержимое DOM и приемлемый пользовательский опыт, предпочтите использовать aria-labelledby. Не включайте оба. Если оба присутствуют в одном элементе, aria-labelledby будет иметь приоритет над aria-label.
Примечание: Хотя aria-label разрешен для любого элемента, который может иметь доступное имя, на практике aria-label поддерживается только для интерактивных элементов, виджетов, ориентиров, изображений и iframes.
Атрибут aria-label может использоваться с обычными семантическими элементами HTML; он не ограничивается элементами, которым назначена роль ARIA.
Не "злоупотребляйте" aria-label. Например, используйте видимый текст с aria-describedby или aria-description, а не aria-label, чтобы предоставить дополнительные инструкции или прояснить пользовательский интерфейс. Всегда помните, что вам не нужно настраивать инструкции только для программ чтения с экрана; если инструкции необходимы, предоставьте их всем (или, предпочтительно, сделайте свой пользовательский интерфейс более интуитивно понятным).
Не всем элементам можно присвоить доступное имя. Ни aria-label, ни aria-labelledby не должны использоваться с неинтерактивными элементами или встроенными структурными ролями, такими как код, термин или акцент, а также с ролями, семантика которых не будет сопоставлена с API специальных возможностей, включая представление, нет и скрыто. Атрибут aria-label предназначен только для интерактивных элементов. Используйте aria-label, чтобы обеспечить доступное имя, если оно не отображается в DOM для всех интерактивных элементов, таких как ссылки, видео, элементы управления формами, роли ориентиров и роли виджетов.
Если вы присваиваете своим <iframe> заголовкам, вашим изображениям атрибуты alt и связанные с вашими входными данными <label>, aria-label необязателен. Но, если он присутствует, aria-метка будет иметь приоритет над заголовком, alt и <label> в качестве доступного имени вашего iframe, изображения или ввода соответственно.
Примечание: aria-метка "видна" только для вспомогательных технологий. Если информация достаточно важна, чтобы добавлять ее для других пользователей, подумайте о том, чтобы сделать ее видимой для всех пользователей.
