Я реализовал всплывающее окно, которое запускается кнопкой на моей веб-странице. Это всплывающее окно почти заполняет весь экран и не позволяет пользователям взаимодействовать с чем-либо на веб-странице, пока всплывающее окно не будет закрыто. Это хорошо работает для зрячих пользователей, но при использовании VoiceOver на Mac вы по-прежнему можете перемещаться по базовому содержимому веб-страницы, и слепой пользователь не догадывается, что появилось всплывающее окно.
Как я могу запретить VoiceOver перемещаться по всем элементам на странице, кроме одного div
(и каждого элемента в этом div
)?
Я знаю, что можно использовать aria-hidden="true"
, чтобы скрыть это от программ чтения с экрана, и я знаю, что можно принудительно сфокусироваться на элементе, но я не уверен, как лучше всего этого добиться. Нужно ли мне перебирать весь DOM и по существу все скрывать, а затем при закрытии все отображать? Или есть лучший подход, какое-то свойство ARIA, которое определяет этот тип элемента, который представлен?
Веб-сайт, демонстрирующий желаемое поведение, называется Piazza. Когда вы активируете кнопку «Вход», появляется всплывающее модальное диалоговое окно, требующее фокуса, и вы не можете уйти от него, пока не закроете всплывающее окно.
dialog
, который мог бы делать большую часть этого автоматически - , но увы, кажется, что сейчас его отбросили. Кстати, некоторые фреймворки (например, JQueryUI?) Могут делать большую часть вышеперечисленного за вас автоматически; может быть лучшим подходом, чем сворачивание собственной поддержки. 05.01.2015