log

Роль изменяющихся областей из WAI-ARIA. Делает область с логами изменяющейся или «живой» областью.

Логи — это отдельный документ или часть страницы, где выводятся данные или информация о действиях пользователей в определённой последовательности. Старая информация обычно скрывается по мере добавления новой.

        
          
          <h3>История сообщений</h3><div role="log">  <ul>    <li>      Одолжишь своего вельш-корги-кардигана      до понедельника? Очень нужно.      <time datetime="2077-04-21T12:09">12:09</time>    </li>    <li>      Тебя снова взломали?      <time datetime="2077-04-21T13:00">13:00</time>    </li>  </ul></div>
          <h3>История сообщений</h3>
<div role="log">
  <ul>
    <li>
      Одолжишь своего вельш-корги-кардигана
      до понедельника? Очень нужно.
      <time datetime="2077-04-21T12:09">12:09</time>
    </li>
    <li>
      Тебя снова взломали?
      <time datetime="2077-04-21T13:00">13:00</time>
    </li>
  </ul>
</div>

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

Добавьте к элементу role="log". Роль можно использовать для всех тегов и ARIA-ролей.

Подходящие ситуации для log:

• чаты;
• логи с ошибками;
• история изменений документа;
• любые другие логи.

По умолчанию роли заданы свойство aria-live="polite" и состояние aria-atomic="false". Это значит, что скринридеры не сразу расскажут об изменениях внутри такой области.

Если это крайне важные изменения, задайте логам aria-live="assertive". Делайте это с большой осторожностью, так как в этом случае скринридеры будут быстро зачитывать изменившееся содержимое и прерывать действия пользователей.

Когда нужно, чтобы пользователи узнали обо всех изменениях в логах, в том числе о старых записях, не обойтись без aria-atomic="true".

Из-за значения polite у aria-live скринридеры будут зачитывать всё добавившееся содержимое. Это может сыграть против вас в чатах. Вспомогательные технологии будут читать не только сообщения от собеседников, но и те, которые отправил сам пользователь. Можно оставить всё как есть. В случае небольших чатов это не проблема. Например, если это чат с техподдержкой сервиса.

Чтобы улучшить опыт пользователей в длинных чатах как в мессенджерах, можно использовать трюк с удалением роли log после отправки пользователем его сообщения на несколько секунд.

Давайте посмотрим на log на примере чата с Докой.

        
          
          <div role="log" id="chat-log" tabindex="0">  <div>    <p>Дока</p>    <p>      Привет, я Дока — дружелюбный справочник для фронтендеров      на понятном языке 🐶 Давай дружить?    </p>    <time datetime="2023-09-18T14:00:00">      14:00    </time>  </div>  <div>    <p>Пользователь Доки</p>    <!-- Текст сообщения и время отправки -->  </div></div>
          <div role="log" id="chat-log" tabindex="0">
  <div>
    <p>Дока</p>
    <p>
      Привет, я Дока — дружелюбный справочник для фронтендеров
      на понятном языке 🐶 Давай дружить?
    </p>
    <time datetime="2023-09-18T14:00:00">
      14:00
    </time>
  </div>
  <div>
    <p>Пользователь Доки</p>
    <!-- Текст сообщения и время отправки -->
  </div>
</div>

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

Так как у контейнера с ролью есть свойство overflow="auto", добавим его в порядок фокуса с помощью tabindex. Пользователи клавиатуры смогут прокрутить его стрелками.

Чтобы скринридеры не зачитывали сообщения, которые отправили читатели, удалим на секунду role="log" и вернём её после этого обратно. С этим поможет setTimeout().

        
          
          const chatLog = document.getElementById('chat-log')chatLog.removeAttribute('role')setTimeout(() => {  chatLog.setAttribute('role', 'log')}, 100)
          const chatLog = document.getElementById('chat-log')

chatLog.removeAttribute('role')

setTimeout(() => {
  chatLog.setAttribute('role', 'log')
}, 100)

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

Элементам с role="log" можно задавать подписи. Для видимой подойдёт атрибут aria-labelledby, а для невидимой — aria-label. Только помните, что хоть на практике и можно добавлять подписи ко всем элементам, спецификация не рекомендует подписывать <div>, <span> и другие неинтерактивные элементы.

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