Skip to content

Commit

Permalink
Добавляет доку про aria-live (#4804)
Browse files Browse the repository at this point in the history
* branch update

* Добавлена подсказка

* добавил информации по значениям для aria-live

* Добавлен текст по подсказкам

* Удалены лишние ссылки

* add first demo

* Изменил демо

* Доделан пример

* Изменён title

* Добавлено примечание по демке

* Добавляет пустую строку

* Правит мету

* Исправлена орфография

* Изменен порядок вызова функции

* Редачит текст, добавляет ключевые слова

* Исправляет ошибку ( ゚д゚)つ Bye

* Немного улучшает демку

* Изменяет `title` фрейма

* Добавляет забытое

---------

Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>
  • Loading branch information
OskarStud and TatianaFokina authored Nov 9, 2023
1 parent ffe30cc commit 24b83c7
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 11 deletions.
173 changes: 173 additions & 0 deletions a11y/aria-live/demos/assertive-more-important/index.html
Original file line number Diff line number Diff line change
@@ -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>
34 changes: 23 additions & 11 deletions a11y/aria-live/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 или «живой» областью. Благодаря атрибуту вспомогательные технологии узнают обо всех изменениях в такой области.

## Пример

Expand All @@ -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).

0 comments on commit 24b83c7

Please sign in to comment.