aria-haspopup

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

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

Кратко

Скопировано

Свойство виджета из 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:

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

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

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