Доступность: для чего можно использовать aria-haspopup?

у меня есть хороший авторитет, что aria-haspopup подходит для подменю (например, всплывающее контекстное меню или меню подуровня). Он используется на jQuery UI Selectmenu а также используется в этом отличный пример.

то, что я не смог выяснить, является ли aria-haspopup применимо в следующих 2 примерах:

  • информационные popovers например Bootstrap В. - используется для контекстной информации, но не содержит никаких ссылок
  • всплывающие окна - например, ссылки с target="_blank"

Is aria-haspopup уместно в таких ситуациях? Если нет, есть ли атрибуты ARIA, которые следует использовать вместо этого?

17
accessibility javascript wai-aria

2 ответов

официально он должен использоваться только для меню или подменю, из Aria spec 1.0:

указывает, что элемент имеет контекстное меню или под-меню.

на Whatsock руководство по стилю охватывает это в разделе "модалы":

Это может показаться хорошей идеей, чтобы уведомить пользователей чтения с экрана, что "всплывающее окно" прикреплено, добавив атрибут aria-haspopup= "true" к запуску элемент, но это не очень хорошая идея. ... Короче говоря, не используйте aria-haspopup, если вы не запускаете меню.

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

Я ответ о подсказках Bootstrap что должно помочь.

для всплывающих окон браузера, те объявлены читателями экрана в любом случае, никакой дополнительной разметки не требуется. (NB: это помогает включить визуальный индикатор нового окна для пользователей экранной лупы.)

21

на WAI-ARIA 1.1 spec (который является текущим на момент написания) расширяет использование aria-haspopup по сравнению с 1.0 spec:

[aria-haspopup] указывает наличие и тип интерактивного всплывающего элемента, например меню или диалогового окна, который может быть вызван элементом.

всплывающий элемент обычно отображается как блок содержимого, который находится поверх другого содержимого. Авторы должны убедитесь, что роль элемента, который служит контейнером для содержимого всплывающего окна menu, listbox, tree, grid или dialog, а aria-haspopup соответствует роли всплывающего контейнера.

таким образом, вы должны установить значение aria-haspopup к тому же значению, что и атрибут роли в инициируемом элементе. Если установлено значение true это будет интерпретироваться как menu для выравнивания с 1.0 spec, где aria-haspopup только предназначен для меню.

Примечание это о подсказках (как загрузочный эклеры):

A tooltip не считается всплывающим в этом контексте.

всплывающие окна браузера не являются HTML-элементами на странице, поэтому элементы привязки с target="_blank" не должно быть .

1