polite и assertive: выбор срочности
Решайте, должно ли обновление прерывать пользователя.
«polite и assertive: выбор срочности» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Что такое живой регион
Живой регион — это элемент, за которым следит средство чтения с экрана, поэтому оно озвучивает любой изменившийся текст внутри него, не перемещая туда фокус.
Два уровня вежливости
Атрибут aria-live имеет два полезных значения, к которым Вы будете постоянно обращаться: вежливое и настойчивое. Они определяют способ доставки обновления. 🔊
Вежливое объявление ждёт своей очереди
При значении вежливое средство чтения с экрана заканчивает текущую фразу, а затем читает Ваше обновление. Оно никогда не перебивает пользователя на полуслове.
<div aria-live="polite">Draft saved</div>Настойчивое объявление прерывает сразу
При значении настойчивое средство чтения с экрана прекращает текущее чтение и сразу объявляет обновление. Используйте этот вариант только тогда, когда ожидание навредит пользователю.
<div aria-live="assertive">Connection lost</div>Вежливый вариант выбирают по умолчанию
Почти всегда выбирайте вежливое объявление. Обновления сохранения, сортировки, фильтрации и хода выполнения могут немного подождать, не вводя никого в заблуждение.
Оставляйте настойчивый вариант для настоящей срочности
Используйте настойчивое объявление только для того, что пользователь должен услышать немедленно, например для неудачного платежа или скорого завершения сеанса.
Есть также отключённый вариант
Значение отключено указывает средству чтения с экрана игнорировать изменения в этом элементе. Это неявное значение по умолчанию для элементов, которые не были отмечены как живые.
<div aria-live="off">Silent updates</div>Регион должен существовать заранее
Живой элемент должен находиться в DOM до изменения текста. Средства чтения с экрана следят за уже существующими регионами, поэтому сначала добавьте его пустым, а заполните позже.
<div id="msg" aria-live="polite"></div>Изменяйте текст, а не регион
Объявляйте обновление, изменяя текстовое содержимое внутри существующего региона. Полная замена региона может привести к тому, что объявление не прозвучит.
document.getElementById('msg').textContent = 'Saved';Настойчивые объявления могут накапливаться
Если быстро отправить несколько настойчивых обновлений, они начнут перебивать друг друга и перекрывать предыдущее. Вежливый режим вместо этого ставит их в очередь.
Соотносите срочность с важностью
Выбирая уровень, спросите себя, насколько полезно прерывание. Для большинства обновлений подходит вежливый режим. Для ошибок и предупреждений, требующих действия пользователя, — настойчивый.
Быстрая проверка
Вы добавляете небольшое подтверждение того, что список отсортирован. Какой уровень вежливости лучше всего подходит?
Итоги: выбор срочности
Вы узнали, что вежливый режим ждёт, а настойчивый прерывает. Выбирайте вежливый режим по умолчанию, оставляйте настойчивый для настоящей срочности и сохраняйте регион в DOM. ✅
Часто задаваемые вопросы
Урок «polite и assertive: выбор срочности» бесплатный?
Да — полный текст урока «polite и assertive: выбор срочности» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «polite и assertive: выбор срочности»?
Решайте, должно ли обновление прерывать пользователя. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «polite и assertive: выбор срочности»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- polite и assertive: выбор срочности
- Роли status, alert и log
- Озвучивание всплывающих уведомлений, индикаторов загрузки и счётчиков
- Почему динамические области не работают и как это исправить