aria-relevant

Опциональный ARIA-атрибут для сообщения о том, что именно изменилось в дереве доступности из интерактивной области.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Свойство изменяющихся областей из WAI-ARIA. aria-relevant сообщает вспомогательной технологии, что она может объявить об определённых изменениях в дереве доступности из «живой» области.

Пример

Секция статьи "Пример"
        
          
          <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-relevant с одним из нескольких значений:

  • additions — в часть дерева доступности из интерактивной области добавлены элементы.
  • text — в часть дерева доступности из интерактивной области добавлен текст.
  • removals — из части дерева доступности из интерактивной области удалён текст, элемент или их группа.
  • all — короткая запись для additions removals text.
  • additions text (по умолчанию) — короткая запись для additions text.

В атрибуте можно указать через пробел несколько значений:

        
          
          <div aria-relevant="text removals"></div>
          <div aria-relevant="text removals"></div>

        
        
          
        
      

aria-relevant сочетается со всеми тегами и ARIA-ролями.

Это опциональный атрибут. Используйте его только тогда, когда удаление или добавление текста или элемента действительно важно. Например, если пользователь вышел из чата или кто-то появился в списке друзей.

Как понять

Секция статьи "Как понять"

«Живая» область — это область страницы, в которой что-то постоянно обновляется из-за внешних событий. Например, появляется уведомление или ошибка у поля, когда пользователь ввёл неправильные данные. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.

Дерево доступности — это представление элементов документа в виде дерева на основе DOM (Document Object Model). Оно состоит из доступных объектов (accessible object), которые складываются в узлы (nodes).

Атрибут aria-relevant отслеживает, что именно изменилось в дереве доступности и его узлах, и сообщает об этом скринридерам.