В настоящее время я пытаюсь сделать более доступную версию информационного окна путем расширения класса представления наложения карты Google (, основываясь на этом примере ).В моем веб-приложении, когда пользователь нажимает на маркер или на элемент в списке местоположений, отображаемых на боковой панели, информационное окно открывается в позиции соответствующего маркера и отображает дополнительную информацию о выбранном местоположении, которая можетвключает описание, изображения, оценки, советы и т. д., полученные из другого API.В каждый момент времени может быть открыто только одно информационное окно.
Меня смущает, какой семантический элемент или атрибут роли или что не нужно использовать для описания информационного окна и, следовательно, как управлятьсфокусироваться соответственно?Мои нынешние мысли:
- используйте атрибут
role = 'dialog' и разработайте информационное окно как немодальный тип диалога , чтобы внешний контент вне информационного окна все еще был доступен.В этом случае маркер и элементы списка могут иметь атрибут aria-haspopup = 'dialog', который будет приятно предупреждать об открытии информационного окна.Проблема этого подхода заключается в том, что он носит разрушительный характер и не является исключительно важной информацией, отображаемой в информационном окне, а также информацией, в которой пользователь должен ответить на него. - использует элемент
<aside>, поскольку он содержит информацию, дополняющую элемент списка маркера или боковой панели, по которому щелкнули.В информационном окне будет отображаться заголовок местоположения, по которому можно щелкнуть, поэтому информационное окно может рассматриваться как отдельная информация.Однако я не могу использовать атрибут aria-haspopup в этом случае.Я полагаю, что мог бы пометить кнопки маркера и элемента списка таким образом, чтобы предупредить пользователя о том, что информационное окно откроется в результате использования aria-label. - , использовать
role = 'tooltip' и описать информациюокно как виджет всплывающей подсказки .Но это подразумевает, что фокус должен быть пойман в ловушку в информационном окне, пока оно не будет закрыто.В реальной реализации информационного окна на карте Google пользователь может взаимодействовать с чем-либо еще на странице, не фокусируя внимание на закрытии информационного окна, и я не думаю, что имеет смысл изменять это поведение по умолчанию.Есть также аргументы о том, может ли всплывающая подсказка вызываться вне события mouseover / hover, и я хочу, чтобы информационное окно отображалось при событии щелчка или при нажатии клавиши ввода / пробела. - реализовать информационное окно как «складываемое содержимое'и связанные кнопки маркера и элемента списка как кнопки «раскрытия» .Таким образом, пользователь получает предупреждение о появлении дополнительного контента без прерывания работы, и фокус не попадает в информационное окно.Хотя стилизация не будет соответствовать типичным методам стилевого оформления / порядку DOM для разборного содержимого , поскольку html информационного окна не будет отображаться сразу после html кнопки, вызвавшей открытие информационного окна.
Какой вариант (ы) подходит, или есть ли лучший подход, который имеет больше смысла?
В зависимости от того, какой подход выбран, следует ли фокусироваться в информационном окне?Если информационное окно закрыто и фокус не попал в информационное окно, куда направить фокус после его закрытия с помощью события щелчка или сочетания клавиш:
- Кнопка, открывшая информационное окно?
- Последний сфокусированный элемент перед закрытием информационного окна (при условии, что последний сфокусированный элемент находился за пределами информационного окна)?Но что, если последним сфокусированным элементом был элемент в информационном окне?
- Элемент
body или map?
Кроме того, фокус должен немедленно перейти в информациюокно, когда оно открывается, или оно должно оставаться на кнопке, вызвавшей его открытие?