Доступность: индикатор Page Loader с использованием aria-live

Question

Проблема: у меня есть проблема доступности, с которой я борюсь. У меня угловое веб-приложение. Спиннер / индикатор загрузки страницы отображается при загрузке контента. И когда содержимое страницы загружено, прядильщик скрыт. Этот "div" никогда не удаляется из DOM.

Содержимое загрузочного блока не читается (челюстями NVDA), когда отображается загрузочный блок.

<div class='loading' aria-live='polite' aria-label='Do not refresh the page' tabindex="-1">Do not refresh the page</div>

Я не хотел бы менять структуру приложения, но обойтись с помощью "тегов aria", чтобы решить эту проблему, просто задаваясь вопросом, придется ли мне делать что-то еще, чтобы заставить работать aria-live?

Обновлено (27 июля 2016 г.)

Дополнительные пояснения: я не удаляю контент из DOM, но использую css для показа / скрытия контента (display: none для отображения: block и наоборот)

Answer 1

aria-live запускает программы чтения с экрана, когда элемент с aria-live (или текст внутри элемента с aria-live) добавлен или удален из DOM. Напротив, когда вы скрываете скрытый элемент, ни элементы, ни текст не добавляются и не удаляются из DOM, поэтому элемент aria-live собственность не вступает в игру.

Чтобы программы чтения с экрана объявили "Не обновлять страницу", любой из этих вариантов должен сделать свое дело:

• Вы можете создать <div class='loading' aria-live='polite'> элемент и его текстовое содержимое с нуля, а затем добавить этот элемент в DOM.
• Или вы можете начать с пустого <div class='loading' aria-live='polite'> элемент, а затем заполните его текстовое содержимое.

Несколько других лакомых кусочков:

• Пока текст внутри элемента - это то, что вы хотите прочитать вслух, вы можете опустить элемент aria-label='Do not refresh the page' приписывать.
• Для обледенения на торте не мешало бы включить role атрибут на div, который имеет aria-live, Если вы не уверены, какую роль использовать, перейдите с role="status" - это довольно безопасная ставка.
• Когда или если страница находится в состоянии, когда вам больше не нужно отображать "Не обновлять страницу", обязательно отмените действия, описанные выше. (То есть, если вы выбрали первый вариант и добавили весь элемент в DOM, удалите весь этот элемент из DOM. Или, если вы выбрали второй вариант и заполнили текстовое содержимое элемента, удалите текстовое содержимое элемента.)

Answer 2

Есть несколько проблем с динамически добавляемым или отображаемым / скрытым live-регионом.

Сначала цитата из MDN - живых регионов ARIA:

Просто включив aria-live атрибут или специальная роль живого региона (например, role="alert") в исходной разметке при загрузке не будет иметь никакого эффекта.
Динамическое добавление элемента сaria-live атрибут или специализированный roleк документу также не приведет к каким-либо объявлениям со стороны вспомогательных технологий (поскольку в этот момент браузер / вспомогательные технологии еще не знают о реальном регионе, поэтому не могут отслеживать его изменения).
Всегда убедитесь, что в документе присутствует активная область, и только потом динамически добавляйте / изменяйте любое содержимое.

По моему личному опыту, даже если живой regoin существует в DOM при загрузке страницы, если вы используете show/hide, тогда у NVDA также есть ошибка, которая требует небольшой задержки перед обновлением текста в живом регионе после того, как оно было первоначально показано. Видимо потому, что на момент добавления первого текста региона не существовало, так что это не "обновление". Что касается тайм-аута, вам нужно установить его на что-то большее, чем тик обновления браузера. Я использую 100 мс. Заявление об отказе от ответственности: я категорически против таких обходных путей для устранения проблем с программами чтения с экрана или браузерами, но в некоторых случаях это может быть полезно для кого-то.