diff --git a/a11y/role-log/demos/chat-w-log/index.html b/a11y/role-log/demos/chat-w-log/index.html
new file mode 100644
index 0000000000..28e32eb5de
--- /dev/null
+++ b/a11y/role-log/demos/chat-w-log/index.html
@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Чат с ролью log — log — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
+      font-family: "Roboto", sans-serif;
+    }
+
+    p {
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    .chat__item > p:first-of-type {
+      font-size: 0.9rem;
+    }
+
+    span {
+      font-size: 0.9rem;
+    }
+
+    time {
+      font-size: 0.8rem;
+    }
+
+    .container, .message-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .container {
+      width: 65%;
+      gap: 25px;
+      align-items: center;
+    }
+
+    .chat {
+      max-width: 600px;
+      max-height: 400px;
+      height: 400px;
+      gap: 1em;
+      padding: 0 10px;
+      display: grid;
+      align-items: start;
+      overflow: auto;
+    }
+
+    .chat__item {
+      min-width: 50%;
+      max-width: 50%;
+      padding: 10px;
+      word-wrap: break-word;
+      border-radius: 15px;
+    }
+
+    .chat__item--left {
+      justify-self: start;
+      background-color: #10F3AF;
+      border-bottom-left-radius: 0;
+    }
+
+    .chat__item--right {
+      justify-self: end;
+      background-color: #F498AD;
+      border-bottom-right-radius: 0;
+    }
+
+    .message {
+      margin-bottom: 25px;
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+    }
+
+    .message__label {
+      margin-right: 55px;
+      font-size: 1.3rem;
+      font-weight: 500;
+      line-height: 1;
+      align-self: center;
+      color: #FFFFFF;
+    }
+
+    .button {
+      display: block;
+      min-width: 210px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 18px;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+      align-self: self-end;
+    }
+
+    .button:hover {
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:focus-visible {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button:focus {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button-aqua {
+      background-color: #10F3AF;
+    }
+
+    .message__input {
+      max-width: 350px;
+      min-width: 350px;
+      min-height: 100px;
+      max-height: 300px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
+      padding: 10px 15px;
+      background-color: transparent;
+      color: #FFFFFF;
+      font-size: 18px;
+      font-weight: 300;
+      font-family: inherit;
+    }
+
+    .message__input:focus {
+      border-color: #10F3AF;
+      outline: none;
+    }
+
+    .button {
+      width: 350px;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .container,
+      .message-container,
+      .button {
+        width: 100%;
+      }
+
+      .message__input {
+        min-width: 100%;
+      }
+
+      .message {
+        display: block;
+      }
+
+      .message__input {
+        margin-top: 10px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div role="log" class="chat" id="chat-log" tabindex="0">
+      <div class="chat__item chat__item--left">
+        <p>Дока</p>
+        <p>Привет, я Дока — дружелюбный справочник для фронтендеров на понятном языке 🐶 Давай дружить?</p>
+        <time datetime="2023-09-18T14:00:00">14:00</time>
+      </div>
+    </div>
+    <div class="message-container">
+      <div class="message">
+        <label class="message__label" for="user-message">Ваше сообщение:</label>
+        <textarea class="message__input" name="message" id="user-message"></textarea>
+      </div>
+      <button class="button button-aqua" id="send-button">Отправить</button>
+    </div>
+  </div>
+
+  <script>
+    const chatLog = document.getElementById('chat-log')
+    const userMessage = document.getElementById('user-message')
+    const button = document.getElementById('send-button')
+
+    button.addEventListener('click', () => {
+      sendMessage()
+    })
+
+    userMessage.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        sendMessage()
+      }
+    })
+
+    function getFormattedDate() {
+      const now = new Date()
+      const userTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
+      const machineTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}T${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+
+      return {userTime, machineTime}
+    }
+
+    function createMessage(className, userName, text, time) {
+      const message = document.createElement('div')
+      const user = document.createElement('p')
+      const messageText = document.createElement('p')
+      const messageTime = document.createElement('time')
+
+      message.className = className
+      user.textContent = userName
+      messageText.textContent = text
+      messageTime.setAttribute('datetime', time.machineTime)
+      messageTime.textContent = time.userTime
+
+      message.appendChild(user)
+      message.appendChild(messageText)
+      message.appendChild(messageTime)
+
+      return message
+    }
+
+    let userFirstMessage = false
+
+    function sendMessage() {
+      let text = userMessage.value
+
+      if(text.trim()) {
+        const time = getFormattedDate()
+        const userMessageElement = createMessage('chat__item chat__item--right', 'Читатель Доки', text, time)
+
+        chatLog.appendChild(userMessageElement)
+        chatLog.removeAttribute('role')
+        userMessage.value = ''
+
+        setTimeout(() => {
+          chatLog.setAttribute('role', 'log')
+        }, 100)
+
+        if(!userFirstMessage) {
+          const dokaMessageElement = createMessage('chat__item chat__item--left', 'Дока', 'Надеюсь, тебе у нас понравится, и ты даже напишешь свою собственную статью.', time)
+
+          setTimeout(() => {
+            chatLog.appendChild(dokaMessageElement)
+          }, 1000)
+
+          userFirstMessage = true
+        }
+      }
+    }
+  </script>
+</body>
+</html>
diff --git a/a11y/role-log/index.md b/a11y/role-log/index.md
index c8a0cc52cd..e8e767b817 100644
--- a/a11y/role-log/index.md
+++ b/a11y/role-log/index.md
@@ -2,49 +2,116 @@
 title: "`log`"
 description: "Роль для области с логами."
 authors:
-  - doka-dog
+  - tatianafokina
 keywords:
-  - доступность
+  - a11y
   - ARIA
-  - ARIA-атрибут
   - live region
-  - живая область
   - интерактивная область
+  - доступный чат
 related:
   - a11y/role-marquee
   - a11y/role-alert
   - a11y/aria-live
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-[Роль изменяющихся областей](/a11y/aria-roles/#roli-izmenyayushchihsya-oblastey). Делает часть страницы live region или «живой» областью. `log` нужна для областей с логами.
+[Роль изменяющихся областей](/a11y/aria-roles/#roli-izmenyayushchihsya-oblastey) из [WAI-ARIA](/a11y/aria-intro/#specifikaciya). Делает область с логами изменяющейся или «живой» областью.
+
+_Логи_ — это отдельный документ или часть страницы, где выводятся данные или информация о действиях пользователей в определённой последовательности. Старая информация обычно скрывается по мере добавления новой.
 
 ## Пример
 
 ```html
+<h3>История сообщений</h3>
 <div role="log">
-  <h1>История сообщений</h1>
   <ul>
-    <li><time datetime="2077-04-21T13:00+06:00">13:00</time> Тебя снова взломали?</li>
-    <li><time datetime="2077-04-21T12:09+06:00">12:09</time> Одолжишь своего вельш-корги-кардигана до понедельника? Очень нужно.</li>
+    <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"`. Роль можно использовать для всех тегов.
+Добавьте к элементу `role="log"`. Роль можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/).
 
-У `log` по умолчанию есть свойство [`aria-live="polite"`](/a11y/aria-live/).
+Подходящие ситуации для `log`:
 
-[Скринридер](/a11y/screenreaders/) объявит сообщения с ролью `log` после другой, более важной информации.
+- чаты;
+- логи с ошибками;
+- история изменений документа;
+- любые другие логи.
 
-## Как понять
+По умолчанию роли заданы свойство [`aria-live="polite"`](/a11y/aria-live/) и состояние [`aria-atomic="false"`](/a11y/aria-atomic/). Это значит, что [скринридеры](/a11y/screenreaders/) не сразу расскажут об изменениях внутри такой области.
+
+Если это **крайне важные** изменения, задайте логам `aria-live="assertive"`. Делайте это с большой осторожностью, так как в этом случае скринридеры будут быстро зачитывать изменившееся содержимое и прерывать действия пользователей.
+
+Когда нужно, чтобы пользователи узнали обо всех изменениях в логах, в том числе о старых записях, не обойтись без `aria-atomic="true"`.
+
+Из-за значения `polite` у `aria-live` скринридеры будут зачитывать всё добавившееся содержимое. Это может сыграть против вас в чатах. Вспомогательные технологии будут читать не только сообщения от собеседников, но и те, которые отправил сам пользователь. Можно оставить всё как есть. В случае небольших чатов это не проблема. Например, если это чат с техподдержкой сервиса.
+
+Чтобы улучшить опыт пользователей в длинных чатах как в мессенджерах, можно использовать трюк с удалением роли `log` после отправки пользователем его сообщения на несколько секунд.
+
+Давайте посмотрим на `log` на примере чата с Докой.
+
+```html
+<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"`](/css/overflow/), добавили его в порядок фокуса с помощью [`tabindex`](/html/tabindex/). Так пользователи клавиатуры смогут прокрутить его стрелками.
+
+Чтобы скринридеры не зачитывали сообщения, которые отправили читатели, удалим на секунду `role="log"` и вернём её после этого обратно. С этим поможет [`setTimeout()`](/js/settimeout/).
+
+```javascript
+const chatLog = document.getElementById('chat-log')
+
+chatLog.removeAttribute('role')
+
+setTimeout(() => {
+  chatLog.setAttribute('role', 'log')
+}, 100)
+```
+
+<iframe title="Чат с ролью log" src="demos/chat-w-log/" height="700"></iframe>
+
+<video controls width="640">
+  <source src="video/nvda-log-reading.mp4" type="video/mp4">
+  <track
+    label="Russian"
+    kind="subtitles"
+    srclang="ru"
+    src="video/closed-captions.vtt"
+  >
+</video>
+
+Элементам с `role="log"` можно задавать подписи. Для видимой подойдёт атрибут [`aria-labelledby`](/a11y/aria-labelledby/), а для невидимой — [`aria-label`](/a11y/aria-label/). Только помните, что хоть на практике и можно добавлять подписи ко всем элементам, спецификация не рекомендует подписывать [`<div>`](/html/div/), [`<span>`](/html/span/) и другие неинтерактивные элементы.
+
+## Как понять
 
-Роль `log` используют для истории сообщений, списков ошибок и похожей информации. Для логов важна последовательность, в которой появляется новая информация. Старая информация обычно скрывается по мере добавления новой.
+_Изменяющаяся область_ — это область страницы, в которой содержимое обновляется из-за внешних событий или действий пользователей. Благодаря изменяющимся областям вспомогательные технологии узнают об обновлениях на странице и автоматически рассказывают о них пользователям.
diff --git a/a11y/role-log/video/closed-captions.vtt b/a11y/role-log/video/closed-captions.vtt
new file mode 100644
index 0000000000..20b4f62953
--- /dev/null
+++ b/a11y/role-log/video/closed-captions.vtt
@@ -0,0 +1,16 @@
+﻿WEBVTT
+
+00:00:00.000 --> 00:00:04.649
+(NVDA)
+Блэнк. П, р, и, в, е, т, восклицательный знак.
+
+00:00:04.650 --> 00:00:05.737
+(Пауза)
+
+00:00:05.738 --> 00:00:10.195
+Дока, надеюсь, тебе у нас понравится,
+и ты даже напишешь
+
+00:00:10.196 --> 00:00:15.507
+свою собственную статью. 18 часов
+3 минуты.
diff --git a/a11y/role-log/video/nvda-log-reading.mp4 b/a11y/role-log/video/nvda-log-reading.mp4
new file mode 100644
index 0000000000..cc5771d2ca
Binary files /dev/null and b/a11y/role-log/video/nvda-log-reading.mp4 differ
