Создание доступных уведомлений, алёртов и других асинхронных элементов

Сергей Кригер

@_sergeikriger

Загрузка страницы

Загрузка страницы

URL

Загрузка страницы

URL
Загрузка

Загрузка страницы

URL
Загрузка
Контент

Загрузка страницы

URL
Загрузка
Контент
Готово!

5 3

Что, если ошибка?

Информировать

Live Regions

aria-live="polite | assertive | off"

Как работает Live Region

         
        <div></div>

Шаг 1: Добавить аттрибут

         
        <div aria-live="polite"></div>

Шаг 2: Обновить контент

         
        <div aria-live="polite"></div>
         
        const el = document.querySelector('div');
        el.textContent = 'Вам понравилось.'

polite vs. assertive vs. off

off = ничего

"Мама всегда говорила, что жизнь как коробка шоколадных конфет – никогда не знаешь, что внутри."

Live Regions

aria-live="polite" aria-live="assertive" aria-live="off" aria-controls="[ID] [ID]"

role="log" role="status" role="alert" role="progressbar" role="marquee" role="timer"

ARIA Live Regions

Советы по
Live Region

Не будет работать

         
        <div></div>
         
        const el = document.querySelector('div');
        el.setAttribute('aria-live', 'polite');
        el.textContent = 'Вам понравилось.'

А так будет!

         
        <div aria-live="polite"></div>
         
        const el = document.querySelector('div');
        el.textContent = 'Вам понравилось.'

Совместимость

         
        <div role="status" aria-live="polite"></div>
         
        <div role="alert" aria-live="assertive"></div>

on-demand-live-region

On Demand Live Region

         
        const liveRegion = new OnDemandLiveRegion({
          level: 'polite'
        });
         
        liveRegion.say('Вам понравилось.');