Skip to content

Commit

Permalink
Правит опечатки в статье про live region (doka-guide#4766)
Browse files Browse the repository at this point in the history
  • Loading branch information
monochromer authored and baileys-li committed Dec 19, 2024
1 parent bcbf197 commit a2428be
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions a11y/live-region/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ _Изменяющаяся или «живая» область (live region)_

### HTML-теги

Первый полезный тег — [`<output>`](/html/output/). Его используют для вывода результатов. Это могут быть математические расчёты как в калькуляторе или правильное пропущенное слово в предложении как тестах в тестах на знание грамматики. Ещё один неочевидный случай использования — всплывающие уведомления или тосты. Это оповещения, которые выезжают внизу или вверху экрана и исчезают через какое-то время.
Первый полезный тег — [`<output>`](/html/output/). Его используют для вывода результатов. Это могут быть математические расчёты как в калькуляторе или правильное пропущенное слово в предложении в тестах на знание грамматики. Ещё один неочевидный случай использования — всплывающие уведомления или тосты. Это оповещения, которые выезжают внизу или вверху экрана и исчезают через какое-то время.

Внутри тега лучше размещать фразовый контент. Например, заголовки, списки или параграфы. Если вложите внутрь кнопку, ссылку или таблицу, скринридеры могут вас не понять 🤔

Expand Down Expand Up @@ -108,7 +108,7 @@ _Изменяющаяся или «живая» область (live region)_

В тег по умолчанию встроена роль [`progressbar`](/a11y/role-progressbar/). Это не роль изменяющейся области, но скринридеры всё равно объявляют о прогрессе загрузки в процентах или при помощи особого звукового оповещения.

Не забывайте задавать `<progress>` атрибуты `max` и `val`. Без них скринридеры не смогут отследить прогресс загрузки, когда у неё есть чёткие начало и конец. Так что изменяйте значение `val` с помощью JavaScript и явно задавайте значение `max`.
Не забывайте задавать `<progress>` атрибуты `max` и `value`. Без них скринридеры не смогут отследить прогресс загрузки, когда у неё есть чёткие начало и конец. Так что изменяйте значение `value` с помощью JavaScript и явно задавайте значение `max`.

Если вложите внутрь `<progress>` кнопку, ссылку, заголовок и другие элементы, для вспомогательных технологий это просто текст без встроенных в теги ролей.

Expand All @@ -127,7 +127,7 @@ _Изменяющаяся или «живая» область (live region)_
<progress aria-label="Очищаем корзину" max="100" value="0"></progress>
```

Посмотрим на прогресс-бар на практике. Для подписи используем `<label>`, с помощью JavaScript обновим значение атрибута `val` и визуальный индикатор в виде числа и заливки.
Посмотрим на прогресс-бар на практике. Для подписи используем `<label>`, с помощью JavaScript обновим значение атрибута `value` и визуальный индикатор в виде числа и заливки.

```html
<label for="progress-bar">Очищаем корзину</label>
Expand Down Expand Up @@ -193,7 +193,7 @@ _Изменяющаяся или «живая» область (live region)_
</div>
```

[`aria-atomic`](/a11y/aria-atomic/) рассказывает скринридеру об объёме изменений, о которых надо рассказать. Это вся изменяющаяся область область или её часть. Атрибут крайне полезен для таймеров.
[`aria-atomic`](/a11y/aria-atomic/) рассказывает скринридеру об объёме изменений, о которых надо рассказать. Это вся изменяющаяся область или её часть. Атрибут крайне полезен для таймеров.

Если используете `aria-atomic="true"` в таймере, вспомогательные технологии будут правильно объявлять текущее время: сначала часы, даже если они не изменились, потом минуты. Без атрибута скринридеры расскажут только об изменившихся минутах.

Expand Down

0 comments on commit a2428be

Please sign in to comment.