Переключить Aria-Live, когда объявление заканчивается?

Question

В настоящее время я работаю над интерактивным проектом для чтения PDF, чтобы сделать его более доступным.Я сделал элемент <p>, который невидим на экране, и присвоил ему атрибут aria-live.Всякий раз, когда я хочу что-то объявить, например открыть ящик, я устанавливаю текст этого элемента <p>.Однако, если пользователь хочет, чтобы вся страница была объявлена, а клавиша для Voice Over - VO + a, элемент <p> также читается, но я хотел бы предотвратить это.

Может кто-нибудь предложить, если это правильный способ объявить изменения?Если это так, то как можно предотвратить чтение элемента <p>, если пользователь хочет, чтобы была прочитана вся страница?В настоящее время я использую элемент <p>, чтобы сообщить, открыт ли / закрыт ящик или есть ли изменение шрифта / номера страницы и т. Д.

Answer 1

Поскольку @quentinc уже объяснил различия между визуально скрытыми и скрытыми элементами программы чтения с экрана, вы не можете иметь элемент, доступный для программы чтения с экрана, но запретите ему команду "read all".

Использованиеaria-live очень удобно во многих ситуациях, но без более подробной информации о вашей конкретной ситуации сложно предложить альтернативные рекомендации.Но, так как вы упомянули «ящик открыт», для меня это звучит как нечто, что может расширяться / разрушаться.Если это так, то вам следует проверить aria-expanded.Вы можете изменить значение этого атрибута с false на true, чтобы указать программе чтения с экрана, что что-то расширилось.Открытие ящика будет считаться расширенным.Программа чтения с экрана позаботится о том, чтобы объявить об изменении, чтобы вам не понадобилось aria-live.

Answer 2

Вы не можете предотвратить чтение элемента aria-live программой чтения с экрана, читающей всю страницу.Вы можете скрыть его визуально с экрана, но не скрыть его от виртуального буфера или внутреннего представления программы чтения с экрана, чтобы он не был доступен и читался.

Чтобы скрыть элемент с экрана, посмотритев CSS классы, такие как .visually-hidden, .sr_only и т. д., присутствующие в популярных фреймворках.Это обычный способ показать что-либо пользователям программы чтения с экрана, скрывая это для обычных пользователей экрана.

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

Вы можете также подумать об использовании display: none или visibility: hidden, чтобы скрыть элемент как от сканера, так и от визуального экрана.Другие приемы такого же типа, такие как font: 0, width / height: 0, opacity: 0, clip: 0 и т. Д., Имеют ту же проблему, и они не обязательно эффективно скрывают элемент повсюду.В этом случае, однако, поведение не состоит.ARia-live будет работать в обычном режиме в некоторых комбинациях программ чтения с экрана и браузера в зависимости от используемого трюка, в то время как он перестанет работать с другими, особенно с VoiceOver на Safari Mac и iOS.

Небольшой трюк состоит изудалив элемент из DOM или сделав его пустым через некоторое время после того, как он был показан или установлен, так, чтобы читатель скрена, просматривая страницу, не мог найти его впоследствии.Тем не менее, вы также должны быть осторожны с этим.Я уже наблюдал в некоторых случаях, что он заставляет программу чтения с экрана немедленно отключить объявление, если элемент был удален слишком рано (в то время как объявление еще продолжалось).И, конечно, у вас нет возможности узнать, закончила ли программа чтения с экрана чтение сообщения, читает ли оно в настоящее время или еще не прочитало.Если вы сделаете это, не торопитесь и оставьте элемент видимым на 5, 10 или более секунд, чтобы убедиться, что сообщение прочитано полностью.

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