aria-relevant

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

        
          
          <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-relevant со значением из списка:

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

У атрибута может быть несколько значений, которые разделяют пробелом.

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

К сожалению, пока что только 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-relevant отслеживает, что именно изменилось в дереве доступности и его узлах, и сообщает об этом скринридерам.

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