Члены команды разработки Edge анонсировали новую функцию под названием ARIA Notify. Это новый API для вызова оповещений для целей доступности. API пока доступен за origin trial или экспериментальным флагом в Edge 136.
В стандарте ARIA есть концепция «живых регионов» (live regions). Это некоторые области на странице, изменения контента в которых приводят к озвучке этих изменений программами чтения с экрана. Таня Фокина написала подробную статью про «живые регионы» в Доке.
Кратко лишь скажу, что с технической точки зрения это набор ролей, свойств и встроенных HTML-элементов с некоторыми из этих возможностей для оповещения пользователей вспомогательных технологий о каких-либо асинхронных изменениях на странице.
Это применяется для:
- динамически изменяющихся данных (изменение цены в зависимости от выбранных опций, количество товаров в корзине, новые сообщения в чате);
- ошибок (неверные данные в форме, ошибка производимой операции);
- уведомлений (новые письма, изменение статуса заявки, всплывающие «тосты»);
- информирования о событиях (переключение слайда в галерее, окончание загрузки).
Работа с «живыми регионами» достаточно сложная. Нужно разобраться в многообразии ролей и состояний для выбора нужной комбинации. Затем проверить интерпретацию в разных программах чтения с экрана. После написать механизм внедрения «живых регионов» на страницу таким образом, чтобы это срабатывало.
Вместо этого хотелось бы вызвать какой-то простой метод браузера, передать ему текст, который скринридеру нужно озвучить, и важность озвучки. Команда Edge как раз такой метод реализовала в рамках более раннего предложения.
// Вызов оповещения в контексте документа
document.ariaNotify(
'Иван Иванов присоединился к звонку'
);
// Вызов оповещения в контексте конкретного элемента
document
.querySelector('#text-editor')
.ariaNotify(
'Выделен полужирный текст'
);
// Вызов оповещения с обычным приоритетом
document.ariaNotify(
'Настройки профиля обновлены',
{ priority: 'normal' }
);
// Вызов оповещения с высоким приоритетом
document.ariaNotify(
'Данные не сохранены',
{ priority: 'high' }
);
Метод
ariaNotify() вызывается у document или конкретного элемента и генерирует сообщение, как если бы в документ был вставлен «живой регион» или контент существующего был обновлён. Второй аргумент опциональный, принимает объект с единственным пока-что параметром priority.priority: 'normal' генерирует обычное сообщение. Оно озвучивается после того, как программа чтения с экрана закончит начатую ранее озвучку. С 'high' программа приостановит начатую озвучку и немедленно озвучит сообщение. Похоже, это соответствует механике атрибута aria-live="polite" и aria-live="assertive".Посмотрим, чем закончится этот эксперимент и что изменится. Вероятно, ARIA Notify заедет в виде стабильного API в одном из ближайших релизов Edge. А так как это Chromium, вслед за Edge функция может появиться в Chrome и других браузерах на этом движке.
#web_api #a11y
