Кратко
СкопированоСвойство виджета из 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
с одним из значений:
false
(по умолчанию) — у элемента нет попапа.true
,menu
— у элемента попап с рольюmenu
.listbox
— у элемента попап с рольюlistbox
.tree
— у элемента попап с рольюtree
.grid
— у элемента попап с рольюgrid
.dialog
— у элемента попап с рольюdialog
.
Значение aria
должно совпадать с ролью попапа.
Атрибут можно использовать только для некоторых тегов и ролей:
<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
.
Как понять
Скопированоaria
нужен для сложных элементов, которые раскрывают попап — блок с содержимым, который появляется поверх всего остального на странице. У таких элементов есть визуальный указатель на то, что они открывают попап. Это может быть иконка с треугольником, стрелкой или точками или линиями как в бургерном меню.
Этот атрибут не подходит для тултипов и простой навигации по сайту со ссылками на другие страницы.