doka-guide · TatianaFokina · Nov 9, 2023 · Oct 9, 2023 · Oct 9, 2023 · Oct 10, 2023
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <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:wght@300;400&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: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    #container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    #itemContainer {
+      margin: 8px;
+      min-width: 200px;
+    }
+
+    #content {
+      padding: 20px;
+      min-height: 140px;
+      border: 1px solid #FFFFFF;
+      text-align: center;
+    }
+
+    #content > p {
+      font-size: 1.25rem;
+      color: #F498AD;
+      padding-top: 20px;
+    }
+
+    #buttonContainer {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+
+    button {
+      display: block;
+      min-width: 210px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 1rem;
+      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>
+
+<body>
+  <main>
+    <div id="buttonContainer">
+      <button id="politeButtonLive">Оживить</button>
+      <button id="politeButtonStop">Остановить</button>
+    </div>
+
+    <div id="container">
+      <div id="itemContainer">
+        <div id="content">
+          <span>polite</span>
+          <p id="politeContent" aria-live="polite"></p>
+        </div>
+      </div>
+      <div id="itemContainer">
+        <div id="content">
+          <span>assertive</span>
+          <p id="assertiveContent" aria-live="assertive"></p>
+        </div>
+      </div>
+      <div id="itemContainer">
+        <div id="content">
+          <span>off</span>
+          <p id="offContent" aria-live="off"></p>
+          <div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+<script>
+  politeButtonLive.addEventListener('click', () => {
+    const assertiveLetters = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'
+    const offText = ['Меня', 'игнорируют', ';(']
+    const randomLetters = () => {
+      return assertiveLetters[Math.round(Math.random() * 32)]
+    }
+    const randomText = () => {
+      return offText[Math.round(Math.random() * 2)]
+    }
+
+    politeContent.innerHTML = '1'
+    assertiveContent.innerHTML = assertiveLetters[32]
+    offContent.innerHTML = `${offText[0]} <br> ${offText[1]} ${offText[2]}`
+
+    const liveInterval = setInterval(() => {
+      assertiveContent.innerHTML = randomLetters()
+      politeContent.innerHTML = Math.round(Math.random() * 10)
+      offContent.innerHTML = randomText()
+    }, 2_000)
+
+    politeButtonStop.addEventListener('click', () => {
+      clearInterval(liveInterval)
+      politeContent.innerHTML = ''
+      assertiveContent.innerHTML = ''
+      offContent.innerHTML = ''
+    })
+  })
+</script>
+</html>
@@ -2,26 +2,24 @@
 title: "`aria-live`"
 description: "Базовый ARIA-атрибут для того, чтобы сделать часть страницы «живой» областью."
 authors:
-  - doka-dog
+  - oskarstud
 keywords:
+  - a11y
   - доступность
   - ARIA
   - ARIA-атрибут
-  - live region
-  - живая область
   - интерактивная область
 related:
   - a11y/aria-attrs
   - a11y/aria-busy
   - a11y/role-alert
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-[Свойство изменяющихся областей](/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,14 +34,28 @@ tags:
 
 Добавьте к тегу атрибут `aria-live` с одним из трёх значений:
 
-- `assertive` — срочные изменения, о них надо рассказать немедленно.
-- `polite` — не очень важные изменения, можно рассказать о них после другого важного содержимого или завершения действия.
-- `off` (по умолчанию) — не самые важные изменения, можно рассказать о них после всего остального.
+- `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/):
+
+<iframe title="Как работают значения polite, assertive, off" src="demos/assertive-more-important/" height="400"></iframe>
 
 ## Как понять
 
-«Живая» область — это область страницы, в которой что-то обновляется из-за внешних событий. Например, появляется уведомление или ошибка к полю, если пользователь ввёл неправильные данные. Так пользователи [скринридеров](/a11y/screenreaders/) могут узнать об изменениях автоматически, без перехода к этой части страницы.
+Изменяющаяся область — это область страницы, в которой что-то обновляется из-за внешних событий. Например, появляется уведомление или ошибка к полю, если пользователь ввёл неправильные данные. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.
+
+## Подсказки
+
+💡 Не стоит использовать значение `assertive` без серьёзной необходимости, потому что прерывание объявлений скринридера может дезориентировать пользователей или помешать им выполнить текущую задачу.
+
+💡 На [сайте с поддержкой ARIA-атрибутов](https://a11ysupport.io/) можно увидеть, какие вспомогательные технологии поддерживают `aria-live`.
+
+💡 Чтобы испытать работу изменяющихся областей, можно воспользоваться [интерактивным примером Deque](https://dequeuniversity.com/library/aria/liveregion-playground) или [демку из статьи про изменяющиеся области](/a11y/live-region/#pesochnica).