aria-haspopup

ARIA-атрибут, который нужен для попапов.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Свойство виджета из WAI-ARIA. Означает, что элемент может раскрыть попап. Например, это может быть диалоговое окно или выпадающее меню как в десктопной программе.

Пример

Секция статьи "Пример"
        
          
          <button type="button" id="menubutton" aria-controls="real-menu" aria-haspopup="true">  Настройки профиля <span class="chevron-icon"></span></button><ul role="menu" id="real-menu" aria-labelledby="menubutton">  <li role="menuitem" data-selector-id="editProfile">    Редактировать профиль  </li>  <li role="menuitem" data-selector-id="showNotification">    Посмотреть уведомления  </li></ul>
          <button type="button" id="menubutton" aria-controls="real-menu" aria-haspopup="true">
  Настройки профиля <span class="chevron-icon"></span>
</button>
<ul role="menu" id="real-menu" aria-labelledby="menubutton">
  <li role="menuitem" data-selector-id="editProfile">
    Редактировать профиль
  </li>
  <li role="menuitem" data-selector-id="showNotification">
    Посмотреть уведомления
  </li>
</ul>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу атрибут aria-haspopup с одним из значений:

  • false (по умолчанию) — у элемента нет попапа.
  • true, menu — у элемента попап с ролью menu.
  • listbox — у элемента попап с ролью listbox.
  • tree — у элемента попап с ролью tree.
  • grid — у элемента попап с ролью grid.
  • dialog — у элемента попап с ролью dialog.

Значение aria-haspopup должно совпадать с ролью попапа.

Атрибут можно использовать только для некоторых тегов и ролей:

Как понять

Секция статьи "Как понять"

aria-haspopup нужен для сложных элементов, которые раскрывают попап — блок с содержимым, который появляется поверх всего остального на странице. У таких элементов есть визуальный указатель на то, что они открывают попап. Это может быть иконка с треугольником, стрелкой или точками или линиями как в бургерном меню.

Этот атрибут не подходит для тултипов и простой навигации по сайту со ссылками на другие страницы.