Доступность при загрузке данных

Question

Я работаю над проблемой доступности. У меня есть спинни / загрузчик, который появляется на экране при загрузке данных.

<spinny aria-live="polite" role="alert" aria-label="Loading Page">

Поэтому, когда на экране появляется spinny, программы чтения с экрана сообщают мне, что spinny загружен. Теперь я хочу, чтобы, когда спинни ушел с экрана, я хотел, чтобы программа чтения с экрана выдавала сообщения, такие как загруженные данные или что-то в этом роде.

Я пробовал относиться к арии, к арии и т. Д., Но, похоже, ничего не помогло.

Answer 1

Во-первых, в вашем примере кода указана противоречивая информация. Использование role="alert" дает вам неявное aria-live="assertive", но вы также указываете aria-live="polite". Я бы порекомендовал удалить role="alert". Наличие aria-live="polite" достаточно.

Однако, если вы удалите роль из <spinny> (что, я полагаю, является пользовательским тегом html?), Тогда ваш aria-label может не соблюдаться, поскольку вещам с метками aria часто требуется дополнительная роль. на ярлык для того, чтобы ярлык читался программой чтения с экрана. См. « Практическая поддержка: aria-label, aria-labelledby и aria-описано by »

Но, я думаю, вы все равно могли неправильно использовать метку aria. Ваш регион должен выглядеть примерно так:

<div aria-live="polite" class="sr-only" id="myspinny"></div>

(См. Что такое sr-only в Bootstrap 3? для класса "sr-only". Он будет визуально "скрывать" <div>, так что любой текст, который вы поместите в него, не будет виден зрячему пользователю, но все равно будет доступен пользователям программы чтения с экрана.)

Когда данные загружаются, вы должны вставить текст (через javascript) в « myspinny », чтобы он выглядел так:

<div aria-live="polite" class="sr-only" id="myspinny">Loading Page</div>

Поскольку <div> является действующим регионом, будет объявлен текст («Страница загрузки»).

Когда загрузка данных закончится и вы захотите удалить счетчик, введите новый текст в " myspinny ", чтобы он выглядел так:

<div aria-live="polite" class="sr-only" id="myspinny">Data Loaded</div>

и программа чтения с экрана скажет «Данные загружены».