Кратко
СкопированоСвойство изменяющихся областей из WAI-ARIA. aria
сообщает вспомогательной технологии, что она может объявить об определённых изменениях в дереве доступности из «живой» области.
Пример
Скопировано<div aria-live="polite" aria-atomic="false" aria-relevant="all"> <h2>Друзья в сети</h2> <ul> <li>Джим Моррисон</li> <li>Йен Кёртис</li> <li>Эми Уайнхаус</li> </ul></div>
<div aria-live="polite" aria-atomic="false" aria-relevant="all"> <h2>Друзья в сети</h2> <ul> <li>Джим Моррисон</li> <li>Йен Кёртис</li> <li>Эми Уайнхаус</li> </ul> </div>
Как пишется
СкопированоДобавьте к тегу атрибут aria
с одним из нескольких значений:
additions
— в часть дерева доступности из интерактивной области добавлены элементы.text
— в часть дерева доступности из интерактивной области добавлен текст.removals
— из части дерева доступности из интерактивной области удалён текст, элемент или их группа.all
— короткая запись дляadditions removals text
.additions text
(по умолчанию) — короткая запись дляadditions text
.
В атрибуте можно указать через пробел несколько значений:
<div aria-relevant="text removals"></div>
<div aria-relevant="text removals"></div>
aria
сочетается со всеми тегами и ARIA-ролями.
Это опциональный атрибут. Используйте его только тогда, когда удаление или добавление текста или элемента действительно важно. Например, если пользователь вышел из чата или кто-то появился в списке друзей.
Как понять
Скопировано«Живая» область — это область страницы, в которой что-то постоянно обновляется из-за внешних событий. Например, появляется уведомление или ошибка у поля, когда пользователь ввёл неправильные данные. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.
Дерево доступности — это представление элементов документа в виде дерева на основе DOM (Document Object Model). Оно состоит из доступных объектов (accessible object), которые складываются в узлы (nodes).
Атрибут aria
отслеживает, что именно изменилось в дереве доступности и его узлах, и сообщает об этом скринридерам.