Уведомление доступных пользователей о том, что у родительского контейнера появился новый «текущий» дочерний элемент

Question

У нас есть веб-приложение, которое в основном состоит из набора дочерних <div> тегов (экранов) внутри одного родителя <main> (контейнера). У каждого дочернего экрана есть по крайней мере один путь к другому братскому экрану, но у нескольких есть несколько путей. Только один экран может быть активным одновременно. Визуально экраны скользят справа и выходят слева. Все экраны, которые не показаны, имеют атрибут hidden, установленный после завершения их перехода. Упрощенная версия DOM будет:

<main>
    <div data-screen-name="Intro"></div>
    <div hidden data-screen-name="Getting started"></div>
    <div hidden data-screen-name="Create an account"></div>
    <div hidden data-screen-name="Learn more about XYZ"></div>
</main>

Мы используем JS для перехода / скрытия вещей, но по большей части AJAX отсутствует, а DOM работает точно так же, как предоставляемый сервером HTML.

Мой вопрос в том, что при такой настройке, каков наилучший способ, если таковой имеется, чтобы невизуальные пользователи знали, что <main> имеет новый контент?

Мы смотрели на aria-live вместе с aria-atomic="true" на <main>, но не уверены, что это слишком разрушительно. Мы определенно что-то меняем, но считаем, что оповещение может быть слишком сильным.

Answer 1

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

Однако, если вы просто показываете существующий элемент DOM, действие скрытия / отображения не объявляется.

Звучит так, словно у вас есть приложение на одной странице (SPA) или что-то вроде карусели.

Инициирует ли пользователь изменение содержимого?Они выбирают следующую кнопку?Есть ли в скрытом контенте какие-либо фокусируемые элементы?Одна возможность состоит в том, чтобы сосредоточиться на заголовке нового контента.Для заголовка потребуется tabindex="-1", чтобы вы могли вызывать focus () для него.Вы не хотите, чтобы tabindex равнялся 0, потому что это позволило бы сосредоточиться на нем с помощью обычной вкладки клавиатуры, и вы обычно не хотите, чтобы фокус переместился на что-то, что не является интерактивным.Но программно ставить акцент на заголовок - это нормально.Затем пользователь может перейти к следующему фокусируемому элементу в новом контенте.

Если вы не сфокусируете внимание на заголовке нового контента, тогда вы можете сосредоточиться напервый фокусируемый элемент в содержании, но это не так хорошо, как решение.Пользователь программы чтения с экрана должен был бы выяснить свой контекст этого нового элемента и, вероятно, просмотрел бы DOM назад, чтобы увидеть, где он находится.Программно сфокусировавшись на заголовке, вы сделали для них работу.