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

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

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

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

Я пробовал aria-related, aria-atomic и т. д., Но, похоже, ничего не сработало.

3
0
1 403
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

<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>

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

Другие вопросы по теме