aria-haspopup

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

        
          
          <div role="menubar">  <button    role="menuitem"    type="button"    aria-expanded="false"    aria-controls="fonts"    aria-haspopup="menu"  >    Начертание  </button>  <ul role="menu" id="fonts">    <!-- Элементы подменю -->  </ul>  <!-- Остальные элементы строки меню --></div>
          <div role="menubar">
  <button
    role="menuitem"
    type="button"
    aria-expanded="false"
    aria-controls="fonts"
    aria-haspopup="menu"
  >
    Начертание
  </button>

  <ul role="menu" id="fonts">
    <!-- Элементы подменю -->
  </ul>

  <!-- Остальные элементы строки меню -->
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При фокусе на первом пункте меню скринридер прочитает код примерно так: «Начертание, подменю, один из пяти».

Добавьте к тегу или элементу с ARIA-ролью, который открывает попап, атрибут aria-haspopup. У него может быть одно из шести значений:

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

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

Элемент, который открывает попап, обязательно должен быть интерактивным — на нём можно сделать фокус с клавиатуры, а также кликнуть или тапнуть по нему. Вот роли и теги, которым можно задавать aria-haspopup:

• <button>, <summary>, <input> c типами button, image, reset, submit или роли button.
• <a> или роли link.
• <input type="range"> или роли slider.
• <textarea>, <input> с типами text, email, tel, url или роли textbox.
• <select> или роли combobox.
• tab.
• application.
• gridcell.
• menuitem.
• treeitem.

У <select> уже по умолчанию есть aria-haspopup со значением listbox.

Часто у элементов с попапами есть визуальный указатель на то, что они что-то открывают. Это может быть иконка с треугольником, стрелкой, точками или линиями как в бургерном меню.

Пока что aria-haspopup хорошо поддерживают JAWS и NVDA, начиная с версий 2023 года. Также с атрибутом знакомы все современные браузеры. Более старые версии скринридеров могут не поддерживать все значения атрибута, игнорировать его у ссылок и кнопок, а ещё не рассказывать о типе попапа.