From b9a63464e27be742356e92d07ad0150f8a0daf00 Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Mon, 9 Oct 2023 21:01:58 +0300
Subject: [PATCH 01/19] branch update

---
 a11y/aria-live/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index 771ed6cf62..83896b0f88 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -23,6 +23,7 @@ tags:
 
 [Свойство изменяющихся областей](/a11y/aria-attrs/#atributy-izmenyayushchihsya-oblastey) из [WAI-ARIA](/a11y/aria-intro/#specifikaciya). Делает часть страницы live region или «живой» областью. Благодаря этому вспомогательные технологии узнают обо всех изменениях в ней.
 
+
 ## Пример
 
 ```html

From 4f69162dc94b92cbfbd1cf0482f87d0714fa5dab Mon Sep 17 00:00:00 2001
From: OskarStud <93986921+OskarStud@users.noreply.github.com>
Date: Mon, 9 Oct 2023 21:26:00 +0300
Subject: [PATCH 02/19] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7?=
 =?UTF-8?q?=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index 83896b0f88..a89def0bf6 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -48,3 +48,7 @@ tags:
 ## Как понять
 
 «Живая» область — это область страницы, в которой что-то обновляется из-за внешних событий. Например, появляется уведомление или ошибка к полю, если пользователь ввёл неправильные данные. Так пользователи [скринридеров](/a11y/screenreaders/) могут узнать об изменениях автоматически, без перехода к этой части страницы.
+
+## Подсказки 
+
+Чтобы испытать работу живых областей можно воспользоваться [интерактивным примером](https://dequeuniversity.com/library/aria/liveregion-playground).

From 4c2384320ee6c13299c0ab44afc73cd7929dcb58 Mon Sep 17 00:00:00 2001
From: OskarStud <93986921+OskarStud@users.noreply.github.com>
Date: Tue, 10 Oct 2023 22:43:01 +0300
Subject: [PATCH 03/19] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D0=B8=20=D0=BF=D0=BE=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=D0=BC=20=D0=B4=D0=BB=D1=8F=20aria-live?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index a89def0bf6..ed571cf48b 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -37,13 +37,13 @@ tags:
 
 Добавьте к тегу атрибут `aria-live` с одним из трёх значений:
 
-- `assertive` — срочные изменения, о них надо рассказать немедленно.
-- `polite` — не очень важные изменения, можно рассказать о них после другого важного содержимого или завершения действия.
-- `off` (по умолчанию) — не самые важные изменения, можно рассказать о них после всего остального.
+- `assertive` — высший приоритет изменений, о них надо рассказать немедленно. Менее важные изменения будут озвучено после. Используется в элементах с [role=`alert`](/a11y/role-alert).
+- `polite` — низкий приоритет изменений, можно рассказать о них после другого важного содержимого или завершения действия. Так ведут себя элементы с [role=`status`](/a11y/role-timer) и [role=`log`](/a11y/role-log).
+- `off` (по умолчанию) — низший приоритет, изменения вообще не рассказываются. Используется в элементах с [role=`marquee`](/a11y/role-marquee) и [role=`timer`](/a11y/role-timer).
 
 Чаще всего понадобится значение `polite`.
 
-`aria-live` можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/).
+`aria-live` можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/). 
 
 ## Как понять
 
@@ -51,4 +51,17 @@ tags:
 
 ## Подсказки 
 
-Чтобы испытать работу живых областей можно воспользоваться [интерактивным примером](https://dequeuniversity.com/library/aria/liveregion-playground).
+💡 Чтобы испытать работу живых областей можно воспользоваться [интерактивным примером](https://dequeuniversity.com/library/aria/liveregion-playground).
+
+💡 Не стоит использовать значение `assertive` без вынужденной необходимости. Потому что прерывания в чтение скринридера могут дизореинтировать пользователей или помещать выполнять им текущую задачу.
+
+
+
+https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live
+https://www.w3.org/TR/wai-aria-1.2/#aria-live
+https://gomakethings.com/how-and-why-to-use-aria-live/
+https://dequeuniversity.com/library/aria/liveregion-playground
+https://web.dev/hiding-and-updating-content/
+https://web-standards.ru/articles/aria-live-regions/
+https://doka.guide/a11y/aria-attrs/
+https://a11ysupport.io/

From ed13968c59c2e515ca8acc0bdeb012cb388e4829 Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Thu, 12 Oct 2023 16:17:10 +0300
Subject: [PATCH 04/19] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=20=D1=82=D0=B5=D0=BA=D1=81=D1=82=20=D0=BF=D0=BE=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B0=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index ed571cf48b..a6ecd0af98 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -41,20 +41,24 @@ tags:
 - `polite` — низкий приоритет изменений, можно рассказать о них после другого важного содержимого или завершения действия. Так ведут себя элементы с [role=`status`](/a11y/role-timer) и [role=`log`](/a11y/role-log).
 - `off` (по умолчанию) — низший приоритет, изменения вообще не рассказываются. Используется в элементах с [role=`marquee`](/a11y/role-marquee) и [role=`timer`](/a11y/role-timer).
 
-Чаще всего понадобится значение `polite`.
+Чаще всего используется значение `polite`.
 
-`aria-live` можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/). 
+`aria-live` можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/).
 
 ## Как понять
 
 «Живая» область — это область страницы, в которой что-то обновляется из-за внешних событий. Например, появляется уведомление или ошибка к полю, если пользователь ввёл неправильные данные. Так пользователи [скринридеров](/a11y/screenreaders/) могут узнать об изменениях автоматически, без перехода к этой части страницы.
 
-## Подсказки 
+«Живая» область включает в себя элемент и всех его потомков. Если атрибута `aria-live` нет у элемента, то значение берется от ближайшего родителя с установленным атрибутом `aria-live`.
 
-💡 Чтобы испытать работу живых областей можно воспользоваться [интерактивным примером](https://dequeuniversity.com/library/aria/liveregion-playground).
+## Подсказки
+
+💡 Чтобы испытать работу «живых» областей можно воспользоваться [интерактивным примером](https://dequeuniversity.com/library/aria/liveregion-playground).
 
 💡 Не стоит использовать значение `assertive` без вынужденной необходимости. Потому что прерывания в чтение скринридера могут дизореинтировать пользователей или помещать выполнять им текущую задачу.
 
+💡 [Сайт](https://a11ysupport.io/) позволит увидеть какие вспомогательные технологии поддерживают `aria-live`.
+
 
 
 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live

From 1deb4d4c127d9050552b84060ecde1380b411af0 Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Thu, 12 Oct 2023 16:27:05 +0300
Subject: [PATCH 05/19] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D1=81=D1=81?=
 =?UTF-8?q?=D1=8B=D0=BB=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index a6ecd0af98..4b8825a0a2 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -49,23 +49,12 @@ tags:
 
 «Живая» область — это область страницы, в которой что-то обновляется из-за внешних событий. Например, появляется уведомление или ошибка к полю, если пользователь ввёл неправильные данные. Так пользователи [скринридеров](/a11y/screenreaders/) могут узнать об изменениях автоматически, без перехода к этой части страницы.
 
-«Живая» область включает в себя элемент и всех его потомков. Если атрибута `aria-live` нет у элемента, то значение берется от ближайшего родителя с установленным атрибутом `aria-live`.
+«Живая» область включает в себя элемент и всех его потомков. Если атрибута `aria-live` нет у элемента, то значение берётся от ближайшего родителя с установленным атрибутом `aria-live`.
 
 ## Подсказки
 
 💡 Чтобы испытать работу «живых» областей можно воспользоваться [интерактивным примером](https://dequeuniversity.com/library/aria/liveregion-playground).
 
-💡 Не стоит использовать значение `assertive` без вынужденной необходимости. Потому что прерывания в чтение скринридера могут дизореинтировать пользователей или помещать выполнять им текущую задачу.
+💡 Не стоит использовать значение `assertive` без вынужденной необходимости. Потому что прерывания в чтение скринридера могут дезореинтировать пользователей или помещать выполнять им текущую задачу.
 
 💡 [Сайт](https://a11ysupport.io/) позволит увидеть какие вспомогательные технологии поддерживают `aria-live`.
-
-
-
-https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live
-https://www.w3.org/TR/wai-aria-1.2/#aria-live
-https://gomakethings.com/how-and-why-to-use-aria-live/
-https://dequeuniversity.com/library/aria/liveregion-playground
-https://web.dev/hiding-and-updating-content/
-https://web-standards.ru/articles/aria-live-regions/
-https://doka.guide/a11y/aria-attrs/
-https://a11ysupport.io/

From ad3af7dd720ffb11bae35a46ad933b81cb6f7462 Mon Sep 17 00:00:00 2001
From: OskarStud <93986921+OskarStud@users.noreply.github.com>
Date: Tue, 17 Oct 2023 22:25:27 +0300
Subject: [PATCH 06/19] add first demo

---
 .../demos/voice-change-content/index.html     | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 a11y/aria-live/demos/voice-change-content/index.html

diff --git a/a11y/aria-live/demos/voice-change-content/index.html b/a11y/aria-live/demos/voice-change-content/index.html
new file mode 100644
index 0000000000..7632d9c879
--- /dev/null
+++ b/a11y/aria-live/demos/voice-change-content/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>DEMO — ARTICLE — Дока</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&display=swap">
+  <style>
+    /* STYLES */
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+     body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    #content {
+        padding: 40px;
+        /* height: 400px;
+        width: 320px; */
+        border: 1px solid firebrick
+    }
+
+  </style>
+  <script>
+
+  </script>
+</head>
+<body>
+  <!-- MARKUP -->
+  <div id="content">
+    <p> new content box </p>
+    <div>
+
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file

From ce740786087a3b065696f6b207b698245166ae14 Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Fri, 20 Oct 2023 15:37:35 +0300
Subject: [PATCH 07/19] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B4=D0=B5=D0=BC=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demos/assertive-more-important/index.html | 179 ++++++++++++++++++
 .../demos/voice-change-content/index.html     |  56 ------
 2 files changed, 179 insertions(+), 56 deletions(-)
 create mode 100644 a11y/aria-live/demos/assertive-more-important/index.html
 delete mode 100644 a11y/aria-live/demos/voice-change-content/index.html

diff --git a/a11y/aria-live/demos/assertive-more-important/index.html b/a11y/aria-live/demos/assertive-more-important/index.html
new file mode 100644
index 0000000000..d68bdc1577
--- /dev/null
+++ b/a11y/aria-live/demos/assertive-more-important/index.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <title>DEMO — ARTICLE — Дока</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&display=swap">
+  <style>
+    /* STYLES */
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    main {}
+
+    #container {
+      display: flex;
+      justify-content: center;
+    }
+
+    #itemContainer {
+      margin: 8px;
+      min-width: 240px;
+    }
+
+    #content {
+      padding: 20px;
+      /* min-width: 200px; */
+      min-height: 200px;
+      border: 1px solid firebrick;
+      text-align: center;
+    }
+
+    #content>p {
+      font-size: 20px;
+      color: red;
+      padding-top: 2em;
+    }
+
+    #buttonContainer {
+      display: flex;
+      justify-content: center;
+    }
+
+    button {
+      margin: 8px;
+      display: block;
+      min-width: 160px;
+      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;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- MARKUP -->
+  <main>
+    <div id="buttonContainer">
+      <!-- <p>
+        Белеет парус одинокой<br>
+        В тумане моря голубом!..<br>
+      </p> -->
+      <button id="politeButtonLive">Оживить</button>
+      <button id="politeButtonStop">Остановить</button>
+    </div>
+
+    <div id="container">
+      <div id="itemContainer">
+
+        <div id="content" aria-live="polite">
+          <span>polite</span>
+          <p id="politeContent"></p>
+        </div>
+      </div>
+      <div id="itemContainer" aria-live="assertive">
+        <!-- <button id="assertiveButtonLive">Оживить</button>
+        <button id="assertiveButtonStop">Остановить</button> -->
+        <div id="content">
+          <span>assertive</span>
+          <p id="assertiveContent"></p>
+
+        </div>
+      </div>
+      <div id="itemContainer" aria-live="off">
+        <!-- <button id="offButtonLive">Оживить</button>
+        <button id="offButtonStop">Остановить</button> -->
+        <div id="content">
+          <span>off</span>
+          <p id="offContent"></p>
+          <div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+<script>
+  politeButtonLive.addEventListener('click', () => {
+    const assertiveText = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'
+    const offText = ['Меня', 'игнорируют', ';(']
+    const randomLetters = () => {
+      return assertiveText[Math.round(Math.random() * 32)]
+    }
+
+
+    politeContent.innerHTML = '1'
+    assertiveContent.innerHTML = assertiveText[32]
+    offContent.innerHTML = `${offText[0]} ${offText[1]} ${offText[2]}`
+
+    const liveInterval = setInterval(() => {
+      politeContent.innerHTML = Math.round(Math.random() * 10)
+      assertiveContent.innerHTML = randomLetters()
+
+    }, 2_000)
+
+    // const assertiveInterval = setInterval(() => {
+    //   assertiveContent.innerHTML = randomLetters()
+    // },2_000)
+
+    politeButtonStop.addEventListener('click', () => {
+      clearInterval(liveInterval)
+      politeContent.innerHTML = ''
+      assertiveContent.innerHTML = ''
+      offContent.innerHTML = ''
+      // clearInterval(assertiveInterval)
+    })
+  })
+
+  assertiveButtonLive.addEventListener('click', () => {
+    // const demoText = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'
+
+    // const randomLetters = () => {
+    //   return demoText[Math.round(Math.random() * 32)]
+    // }
+    // assertiveContent.innerHTML = demoText[32]
+    // const assertiveInterval = setInterval(() => {
+    //   assertiveContent.innerHTML = randomLetters()
+    // },2_000)
+
+    // assertiveButtonStop.addEventListener('click', () => {
+    // clearInterval(assertiveInterval)
+    // assertiveContent.innerHTML = ''
+    // })
+  })
+
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/a11y/aria-live/demos/voice-change-content/index.html b/a11y/aria-live/demos/voice-change-content/index.html
deleted file mode 100644
index 7632d9c879..0000000000
--- a/a11y/aria-live/demos/voice-change-content/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-  <title>DEMO — ARTICLE — Дока</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&display=swap">
-  <style>
-    /* STYLES */
-    *, *::before, *::after {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-     body {
-      min-height: 100vh;
-      padding: 50px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: #18191C;
-      color: #FFFFFF;
-      font-family: "Roboto", sans-serif;
-    }
-
-    @media (max-width: 768px) {
-      body {
-        padding: 30px;
-      }
-    }
-
-    #content {
-        padding: 40px;
-        /* height: 400px;
-        width: 320px; */
-        border: 1px solid firebrick
-    }
-
-  </style>
-  <script>
-
-  </script>
-</head>
-<body>
-  <!-- MARKUP -->
-  <div id="content">
-    <p> new content box </p>
-    <div>
-
-    </div>
-  </div>
-</body>
-</html>
\ No newline at end of file

From 7212f63fe5daf8beb9aeda63881bf92066ce430b Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Mon, 23 Oct 2023 12:03:38 +0300
Subject: [PATCH 08/19] =?UTF-8?q?=D0=94=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BD=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demos/assertive-more-important/index.html | 62 ++++---------------
 a11y/aria-live/index.md                       |  4 ++
 2 files changed, 17 insertions(+), 49 deletions(-)

diff --git a/a11y/aria-live/demos/assertive-more-important/index.html b/a11y/aria-live/demos/assertive-more-important/index.html
index d68bdc1577..d62684dca2 100644
--- a/a11y/aria-live/demos/assertive-more-important/index.html
+++ b/a11y/aria-live/demos/assertive-more-important/index.html
@@ -9,7 +9,6 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
   <style>
-    /* STYLES */
     *,
     *::before,
     *::after {
@@ -35,8 +34,6 @@
       }
     }
 
-    main {}
-
     #container {
       display: flex;
       justify-content: center;
@@ -44,21 +41,20 @@
 
     #itemContainer {
       margin: 8px;
-      min-width: 240px;
+      min-width: 200px;
     }
 
     #content {
       padding: 20px;
-      /* min-width: 200px; */
-      min-height: 200px;
-      border: 1px solid firebrick;
+      min-height: 140px;
+      border: 1px solid #10F3AF;
       text-align: center;
     }
 
     #content>p {
       font-size: 20px;
-      color: red;
-      padding-top: 2em;
+      color: #F498AD;
+      padding-top: 20px;
     }
 
     #buttonContainer {
@@ -83,28 +79,20 @@
 </head>
 
 <body>
-  <!-- MARKUP -->
   <main>
     <div id="buttonContainer">
-      <!-- <p>
-        Белеет парус одинокой<br>
-        В тумане моря голубом!..<br>
-      </p> -->
       <button id="politeButtonLive">Оживить</button>
       <button id="politeButtonStop">Остановить</button>
     </div>
 
     <div id="container">
       <div id="itemContainer">
-
         <div id="content" aria-live="polite">
           <span>polite</span>
           <p id="politeContent"></p>
         </div>
       </div>
       <div id="itemContainer" aria-live="assertive">
-        <!-- <button id="assertiveButtonLive">Оживить</button>
-        <button id="assertiveButtonStop">Остановить</button> -->
         <div id="content">
           <span>assertive</span>
           <p id="assertiveContent"></p>
@@ -112,8 +100,6 @@
         </div>
       </div>
       <div id="itemContainer" aria-live="off">
-        <!-- <button id="offButtonLive">Оживить</button>
-        <button id="offButtonStop">Остановить</button> -->
         <div id="content">
           <span>off</span>
           <p id="offContent"></p>
@@ -126,54 +112,32 @@
 </body>
 <script>
   politeButtonLive.addEventListener('click', () => {
-    const assertiveText = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'
+    const assertiveLetters = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'
     const offText = ['Меня', 'игнорируют', ';(']
     const randomLetters = () => {
-      return assertiveText[Math.round(Math.random() * 32)]
+      return assertiveLetters[Math.round(Math.random() * 32)]
+    }
+    const randomText = () => {
+      return offText[Math.round(Math.random() * 2)]
     }
-
 
     politeContent.innerHTML = '1'
-    assertiveContent.innerHTML = assertiveText[32]
-    offContent.innerHTML = `${offText[0]} ${offText[1]} ${offText[2]}`
+    assertiveContent.innerHTML = assertiveLetters[32]
+    offContent.innerHTML = `${offText[0]} <br> ${offText[1]} ${offText[2]}`
 
     const liveInterval = setInterval(() => {
       politeContent.innerHTML = Math.round(Math.random() * 10)
       assertiveContent.innerHTML = randomLetters()
-
+      offContent.innerHTML = randomText()
     }, 2_000)
 
-    // const assertiveInterval = setInterval(() => {
-    //   assertiveContent.innerHTML = randomLetters()
-    // },2_000)
-
     politeButtonStop.addEventListener('click', () => {
       clearInterval(liveInterval)
       politeContent.innerHTML = ''
       assertiveContent.innerHTML = ''
       offContent.innerHTML = ''
-      // clearInterval(assertiveInterval)
     })
   })
-
-  assertiveButtonLive.addEventListener('click', () => {
-    // const demoText = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'
-
-    // const randomLetters = () => {
-    //   return demoText[Math.round(Math.random() * 32)]
-    // }
-    // assertiveContent.innerHTML = demoText[32]
-    // const assertiveInterval = setInterval(() => {
-    //   assertiveContent.innerHTML = randomLetters()
-    // },2_000)
-
-    // assertiveButtonStop.addEventListener('click', () => {
-    // clearInterval(assertiveInterval)
-    // assertiveContent.innerHTML = ''
-    // })
-  })
-
-
 </script>
 
 </html>
\ No newline at end of file
diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index 4b8825a0a2..3bc5e1f2ec 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -45,6 +45,10 @@ tags:
 
 `aria-live` можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/).
 
+Пример продемонстрирует, что при одновременном изменение контента, будет читаться высший по приоритету тег `assertive`:
+
+<iframe title="Assertive имеет высший приоритет" src="demos/assertive-more-important/" height="400"></iframe>
+
 ## Как понять
 
 «Живая» область — это область страницы, в которой что-то обновляется из-за внешних событий. Например, появляется уведомление или ошибка к полю, если пользователь ввёл неправильные данные. Так пользователи [скринридеров](/a11y/screenreaders/) могут узнать об изменениях автоматически, без перехода к этой части страницы.

From 95ee861385b3053ff7233cbb81f583d9896e5375 Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Mon, 23 Oct 2023 12:06:20 +0300
Subject: [PATCH 09/19] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D1=91?=
 =?UTF-8?q?=D0=BD=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/demos/assertive-more-important/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/a11y/aria-live/demos/assertive-more-important/index.html b/a11y/aria-live/demos/assertive-more-important/index.html
index d62684dca2..e828fd637f 100644
--- a/a11y/aria-live/demos/assertive-more-important/index.html
+++ b/a11y/aria-live/demos/assertive-more-important/index.html
@@ -2,7 +2,7 @@
 <html lang="ru">
 
 <head>
-  <title>DEMO — ARTICLE — Дока</title>
+  <title>Важность тега assertive — aria-live — Дока</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">

From 2fe2b8b382d410d50bc1ea11ade05d7c8679a488 Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Mon, 23 Oct 2023 12:11:42 +0300
Subject: [PATCH 10/19] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=BE=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=87=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE=20=D0=B4=D0=B5=D0=BC=D0=BA?=
 =?UTF-8?q?=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index 3bc5e1f2ec..e8b6df23d3 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -45,7 +45,7 @@ tags:
 
 `aria-live` можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/).
 
-Пример продемонстрирует, что при одновременном изменение контента, будет читаться высший по приоритету тег `assertive`:
+Пример продемонстрирует, что при одновременном изменение контента, будет читаться высший по приоритету тег `assertive`. Для того, чтобы услышать результат необходимо использовать [скринридер](/a11y/screenreaders):
 
 <iframe title="Assertive имеет высший приоритет" src="demos/assertive-more-important/" height="400"></iframe>
 

From 8a1d452593b2e44c6dc11cfe9f617b70b5c00925 Mon Sep 17 00:00:00 2001
From: Tatiana Fokina <fokinatatian@gmail.com>
Date: Mon, 23 Oct 2023 14:21:20 +0400
Subject: [PATCH 11/19] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BF=D1=83=D1=81=D1=82=D1=83=D1=8E=20?=
 =?UTF-8?q?=D1=81=D1=82=D1=80=D0=BE=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/demos/assertive-more-important/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/a11y/aria-live/demos/assertive-more-important/index.html b/a11y/aria-live/demos/assertive-more-important/index.html
index e828fd637f..c677a90f4a 100644
--- a/a11y/aria-live/demos/assertive-more-important/index.html
+++ b/a11y/aria-live/demos/assertive-more-important/index.html
@@ -140,4 +140,4 @@
   })
 </script>
 
-</html>
\ No newline at end of file
+</html>

From 1f51dc7a9d356b2d238b607c52a60eae49517d01 Mon Sep 17 00:00:00 2001
From: Tatiana Fokina <fokinatatian@gmail.com>
Date: Mon, 23 Oct 2023 14:22:11 +0400
Subject: [PATCH 12/19] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=B8=D1=82=20?=
 =?UTF-8?q?=D0=BC=D0=B5=D1=82=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index e8b6df23d3..3988507c8b 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -2,7 +2,7 @@
 title: "`aria-live`"
 description: "Базовый ARIA-атрибут для того, чтобы сделать часть страницы «живой» областью."
 authors:
-  - doka-dog
+  - oskarstud
 keywords:
   - доступность
   - ARIA
@@ -16,7 +16,6 @@ related:
   - a11y/role-alert
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко

From 1d882c12f0a9a6c958594e6ebbfb948d3dcf95a1 Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Mon, 23 Oct 2023 17:05:42 +0300
Subject: [PATCH 13/19] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=80=D1=84=D0=BE=D0=B3=D1=80?=
 =?UTF-8?q?=D0=B0=D1=84=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index e8b6df23d3..ab7684a09d 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -59,6 +59,6 @@ tags:
 
 💡 Чтобы испытать работу «живых» областей можно воспользоваться [интерактивным примером](https://dequeuniversity.com/library/aria/liveregion-playground).
 
-💡 Не стоит использовать значение `assertive` без вынужденной необходимости. Потому что прерывания в чтение скринридера могут дезореинтировать пользователей или помещать выполнять им текущую задачу.
+💡 Не стоит использовать значение `assertive` без вынужденной необходимости. Потому что прерывания в чтение скринридера могут дезориентировать пользователей или помещать выполнять им текущую задачу.
 
 💡 [Сайт](https://a11ysupport.io/) позволит увидеть какие вспомогательные технологии поддерживают `aria-live`.

From 6b135966c73e3661e47585fa007b947c6c661c8d Mon Sep 17 00:00:00 2001
From: Oskar <oskar.stud@gmail.com>
Date: Mon, 23 Oct 2023 17:20:44 +0300
Subject: [PATCH 14/19] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BF=D0=BE=D1=80=D1=8F=D0=B4=D0=BE=D0=BA=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=B7=D0=BE=D0=B2=D0=B0=20=D1=84=D1=83=D0=BD=D0=BA=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/demos/assertive-more-important/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/a11y/aria-live/demos/assertive-more-important/index.html b/a11y/aria-live/demos/assertive-more-important/index.html
index c677a90f4a..561b8b10e0 100644
--- a/a11y/aria-live/demos/assertive-more-important/index.html
+++ b/a11y/aria-live/demos/assertive-more-important/index.html
@@ -126,8 +126,8 @@
     offContent.innerHTML = `${offText[0]} <br> ${offText[1]} ${offText[2]}`
 
     const liveInterval = setInterval(() => {
-      politeContent.innerHTML = Math.round(Math.random() * 10)
       assertiveContent.innerHTML = randomLetters()
+      politeContent.innerHTML = Math.round(Math.random() * 10)
       offContent.innerHTML = randomText()
     }, 2_000)
 

From 1bf360aff71716fd0cbe209bda2e705ce4b06630 Mon Sep 17 00:00:00 2001
From: Tatiana Fokina <fokinatatian@gmail.com>
Date: Tue, 24 Oct 2023 19:13:08 +0400
Subject: [PATCH 15/19] =?UTF-8?q?=D0=A0=D0=B5=D0=B4=D0=B0=D1=87=D0=B8?=
 =?UTF-8?q?=D1=82=20=D1=82=D0=B5=D0=BA=D1=81=D1=82,=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D0=B5=D0=B2=D1=8B=D0=B5=20=D1=81=D0=BB=D0=BE=D0=B2=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index 73e30a75f5..68e80a999e 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -4,11 +4,10 @@ description: "Базовый ARIA-атрибут для того, чтобы с
 authors:
   - oskarstud
 keywords:
+  - a11y
   - доступность
   - ARIA
   - ARIA-атрибут
-  - live region
-  - живая область
   - интерактивная область
 related:
   - a11y/aria-attrs
@@ -20,8 +19,7 @@ tags:
 
 ## Кратко
 
-[Свойство изменяющихся областей](/a11y/aria-attrs/#atributy-izmenyayushchihsya-oblastey) из [WAI-ARIA](/a11y/aria-intro/#specifikaciya). Делает часть страницы live region или «живой» областью. Благодаря этому вспомогательные технологии узнают обо всех изменениях в ней.
-
+[Свойство изменяющихся областей](/a11y/aria-attrs/#atributy-izmenyayushchihsya-oblastey) из [WAI-ARIA](/a11y/aria-intro/#specifikaciya). Делает часть страницы live region или «живой» областью. Благодаря атрибуту вспомогательные технологии узнают обо всех изменениях в такой области.
 
 ## Пример
 
@@ -36,28 +34,28 @@ tags:
 
 Добавьте к тегу атрибут `aria-live` с одним из трёх значений:
 
-- `assertive` — высший приоритет изменений, о них надо рассказать немедленно. Менее важные изменения будут озвучено после. Используется в элементах с [role=`alert`](/a11y/role-alert).
-- `polite` — низкий приоритет изменений, можно рассказать о них после другого важного содержимого или завершения действия. Так ведут себя элементы с [role=`status`](/a11y/role-timer) и [role=`log`](/a11y/role-log).
-- `off` (по умолчанию) — низший приоритет, изменения вообще не рассказываются. Используется в элементах с [role=`marquee`](/a11y/role-marquee) и [role=`timer`](/a11y/role-timer).
+- `assertive` — высший приоритет изменений, о них надо рассказать немедленно. Менее важные изменения будут озвучены после. Используется в элементах с [`role="alert"`](/a11y/role-alert/).
+- `polite` — низкий приоритет изменений, можно рассказать о них после другого важного содержимого или завершения действия. Так ведут себя элементы с [`role="status"`](/a11y/role-status/) и [`role="log"`](/a11y/role-log/).
+- `off` (по умолчанию) — низший приоритет, об изменениях не нужно рассказывать без фокуса на области. Используется в элементах с [`role="marquee"`](/a11y/role-marquee/) и [`role="timer"`](/a11y/role-timer/).
+
+Чаще всего используют значение `polite`.
 
-Чаще всего используется значение `polite`.
+`aria-live` можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/). Внутри контейнера с атрибутом могут быть тексты и интерактивные элементы, но не добавляйте туда содержимое, которое никак не изменяется.
 
-`aria-live` можно использовать для всех тегов и [ARIA-ролей](/a11y/aria-roles/).
+Изменяющаяся область с `aria-live` включает в себя элемент и его потомков. Если у элемента нет атрибута `aria-live`, то значение берётся из ближайшего родителя с этим атрибутом.
 
-Пример продемонстрирует, что при одновременном изменение контента, будет читаться высший по приоритету тег `assertive`. Для того, чтобы услышать результат необходимо использовать [скринридер](/a11y/screenreaders):
+В примере показано, как будет читаться высшее по приоритету значение `assertive` при одновременном изменении содержимого. Для того, чтобы услышать результат, используйте [скринридер](/a11y/screenreaders/):
 
 <iframe title="Assertive имеет высший приоритет" src="demos/assertive-more-important/" height="400"></iframe>
 
 ## Как понять
 
-«Живая» область — это область страницы, в которой что-то обновляется из-за внешних событий. Например, появляется уведомление или ошибка к полю, если пользователь ввёл неправильные данные. Так пользователи [скринридеров](/a11y/screenreaders/) могут узнать об изменениях автоматически, без перехода к этой части страницы.
-
-«Живая» область включает в себя элемент и всех его потомков. Если атрибута `aria-live` нет у элемента, то значение берётся от ближайшего родителя с установленным атрибутом `aria-live`.
+Изменяющаяся область — это область страницы, в которой что-то обновляется из-за внешних событий. Например, появляется уведомление или ошибка к полю, если пользователь ввёл неправильные данные. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.
 
 ## Подсказки
 
-💡 Чтобы испытать работу «живых» областей можно воспользоваться [интерактивным примером](https://dequeuniversity.com/library/aria/liveregion-playground).
+💡 Не стоит использовать значение `assertive` без серьёзной необходимости, потому что прерывание объявлений скринридера может дезориентировать пользователей или помешать им выполнить текущую задачу.
 
-💡 Не стоит использовать значение `assertive` без вынужденной необходимости. Потому что прерывания в чтение скринридера могут дезориентировать пользователей или помещать выполнять им текущую задачу.
+💡 На [сайте с подержкой ARIA-атрибутов](https://a11ysupport.io/) можно увидеть, какие вспомогательные технологии поддерживают `aria-live`.
 
-💡 [Сайт](https://a11ysupport.io/) позволит увидеть какие вспомогательные технологии поддерживают `aria-live`.
+💡 Чтобы испытать работу изменяющихся областей, можно воспользоваться [интерактивным примером Deque](https://dequeuniversity.com/library/aria/liveregion-playground) или [демку из статьи про изменяющиеся области](/a11y/live-region/#pesochnica).

From a999974040337cabf6ae09532c194c1a0565378b Mon Sep 17 00:00:00 2001
From: Tatiana Fokina <fokinatatian@gmail.com>
Date: Tue, 24 Oct 2023 19:18:37 +0400
Subject: [PATCH 16/19] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D1=83?=
 =?UTF-8?q?=20(=20=EF=BE=9F=D0=B4=EF=BE=9F)=E3=81=A4=20Bye?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index 68e80a999e..d843657760 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -56,6 +56,6 @@ tags:
 
 💡 Не стоит использовать значение `assertive` без серьёзной необходимости, потому что прерывание объявлений скринридера может дезориентировать пользователей или помешать им выполнить текущую задачу.
 
-💡 На [сайте с подержкой ARIA-атрибутов](https://a11ysupport.io/) можно увидеть, какие вспомогательные технологии поддерживают `aria-live`.
+💡 На [сайте с поддержкой ARIA-атрибутов](https://a11ysupport.io/) можно увидеть, какие вспомогательные технологии поддерживают `aria-live`.
 
 💡 Чтобы испытать работу изменяющихся областей, можно воспользоваться [интерактивным примером Deque](https://dequeuniversity.com/library/aria/liveregion-playground) или [демку из статьи про изменяющиеся области](/a11y/live-region/#pesochnica).

From bf2185f312df290b2ab134abea01682703758fb0 Mon Sep 17 00:00:00 2001
From: Tatiana Fokina <fokinatatian@gmail.com>
Date: Sat, 28 Oct 2023 23:47:10 +0400
Subject: [PATCH 17/19] =?UTF-8?q?=D0=9D=D0=B5=D0=BC=D0=BD=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=BE=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B0=D0=B5=D1=82=20?=
 =?UTF-8?q?=D0=B4=D0=B5=D0=BC=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demos/assertive-more-important/index.html | 61 ++++++++++++++-----
 1 file changed, 46 insertions(+), 15 deletions(-)

diff --git a/a11y/aria-live/demos/assertive-more-important/index.html b/a11y/aria-live/demos/assertive-more-important/index.html
index 561b8b10e0..d822747b9a 100644
--- a/a11y/aria-live/demos/assertive-more-important/index.html
+++ b/a11y/aria-live/demos/assertive-more-important/index.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html lang="ru">
-
 <head>
-  <title>Важность тега assertive — aria-live — Дока</title>
+  <title>Как работают значения polite, assertive, off — aria-live — Дока</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&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto@300;400&display=swap">
   <style>
     *,
     *::before,
@@ -17,6 +16,11 @@
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 20px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
@@ -36,6 +40,7 @@
 
     #container {
       display: flex;
+      flex-wrap: wrap;
       justify-content: center;
     }
 
@@ -47,19 +52,22 @@
     #content {
       padding: 20px;
       min-height: 140px;
-      border: 1px solid #10F3AF;
+      border: 1px solid #FFFFFF;
       text-align: center;
     }
 
-    #content>p {
-      font-size: 20px;
+    #content > p {
+      font-size: 1rem;
       color: #F498AD;
       padding-top: 20px;
     }
 
     #buttonContainer {
       display: flex;
+      flex-wrap: wrap;
       justify-content: center;
+      gap: 10px;
+      margin-bottom: 20px;
     }
 
     button {
@@ -70,11 +78,36 @@
       border-radius: 6px;
       padding: 9px 15px;
       color: #000000;
-      font-size: 18px;
+      font-size: 1.125rem;
       font-weight: 300;
       font-family: inherit;
       transition: background-color 0.2s linear;
     }
+
+    button#politeButtonLive {
+      background-color: #10F3AF;
+    }
+
+    button#politeButtonStop {
+      background-color: #F498AD;
+    }
+
+    button#politeButtonLive:hover,
+    button#politeButtonStop: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;
+    }
   </style>
 </head>
 
@@ -87,22 +120,21 @@
 
     <div id="container">
       <div id="itemContainer">
-        <div id="content" aria-live="polite">
+        <div id="content">
           <span>polite</span>
-          <p id="politeContent"></p>
+          <p id="politeContent" aria-live="polite"></p>
         </div>
       </div>
-      <div id="itemContainer" aria-live="assertive">
+      <div id="itemContainer">
         <div id="content">
           <span>assertive</span>
-          <p id="assertiveContent"></p>
-
+          <p id="assertiveContent" aria-live="assertive"></p>
         </div>
       </div>
-      <div id="itemContainer" aria-live="off">
+      <div id="itemContainer">
         <div id="content">
           <span>off</span>
-          <p id="offContent"></p>
+          <p id="offContent" aria-live="off"></p>
           <div>
           </div>
         </div>
@@ -139,5 +171,4 @@
     })
   })
 </script>
-
 </html>

From f12667464f91c78b6dbc916dfdc3bc30e79b6bee Mon Sep 17 00:00:00 2001
From: Tatiana Fokina <fokinatatian@gmail.com>
Date: Sat, 28 Oct 2023 23:47:49 +0400
Subject: [PATCH 18/19] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20`title`=20=D1=84=D1=80=D0=B5=D0=B9=D0=BC=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 a11y/aria-live/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/a11y/aria-live/index.md b/a11y/aria-live/index.md
index d843657760..b8e6738441 100644
--- a/a11y/aria-live/index.md
+++ b/a11y/aria-live/index.md
@@ -46,7 +46,7 @@ tags:
 
 В примере показано, как будет читаться высшее по приоритету значение `assertive` при одновременном изменении содержимого. Для того, чтобы услышать результат, используйте [скринридер](/a11y/screenreaders/):
 
-<iframe title="Assertive имеет высший приоритет" src="demos/assertive-more-important/" height="400"></iframe>
+<iframe title="Как работают значения polite, assertive, off" src="demos/assertive-more-important/" height="400"></iframe>
 
 ## Как понять
 

From 32448c4d6a48563f7629292abcf46f5f1ba734b0 Mon Sep 17 00:00:00 2001
From: Tatiana Fokina <fokinatatian@gmail.com>
Date: Sat, 28 Oct 2023 23:58:27 +0400
Subject: [PATCH 19/19] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=B7=D0=B0=D0=B1=D1=8B=D1=82=D0=BE=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demos/assertive-more-important/index.html         | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/a11y/aria-live/demos/assertive-more-important/index.html b/a11y/aria-live/demos/assertive-more-important/index.html
index d822747b9a..8266571384 100644
--- a/a11y/aria-live/demos/assertive-more-important/index.html
+++ b/a11y/aria-live/demos/assertive-more-important/index.html
@@ -6,7 +6,7 @@
   <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@300;400&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap">
   <style>
     *,
     *::before,
@@ -18,7 +18,7 @@
 
     html {
       color-scheme: dark;
-      font-size: 20px;
+      font-size: 18px;
     }
 
     body {
@@ -57,7 +57,7 @@
     }
 
     #content > p {
-      font-size: 1rem;
+      font-size: 1.25rem;
       color: #F498AD;
       padding-top: 20px;
     }
@@ -71,14 +71,13 @@
     }
 
     button {
-      margin: 8px;
       display: block;
-      min-width: 160px;
+      min-width: 210px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
       color: #000000;
-      font-size: 1.125rem;
+      font-size: 1rem;
       font-weight: 300;
       font-family: inherit;
       transition: background-color 0.2s linear;