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