Short Guide on Using the ARIA-haspopup (Property)

Description
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
A popup element usually appears as a block of content that is on top of other content. Authors MUST ensure that the role of the element that serves as the container for the popup content is menu, listbox, tree, grid, or dialog, and that the value of aria-haspopup matches the role of the popup container.
For the popup element to be keyboard accessible, authors SHOULD ensure that the element that can trigger the popup is focusable, that there is a keyboard mechanism for opening the popup, and that the popup element manages focus of all its descendants as described in Managing Focus.
The aria-haspopup property is an enumerated type. User agents MUST treat any value of aria-haspopup that is not included in the list of allowed values, including an empty string, as if the value false had been provided. To provide backward compatibility with ARIA 1.0 content, user agents MUST treat an aria-haspopup value of true as equivalent to a value of menu.
Assistive technologies SHOULD NOT expose the aria-haspopup property if it has a value of false.
Note: A tooltip is not considered to be a popup in this context.
Token Values
The token values for the aria-haspopup attribute were introduced in the WAI-ARIA 1.1 specification. Before the token values, there were only three values for aria-haspopup : aria-haspopup=true , aria-haspopup=menu and aria-haspopup=false . Adding more token values helps assistive technology users identify some custom components like trees, grids, and dialog elements more easily, as these token values provide necessary semantic identifiers to the custom elements.
There are 7 defined token values in aria-haspopup (property):
- Aria-haspopup=”false”, indicates the element does not have any popup.
- Aria-haspopup=”true”, indicates that popup is menu
- Aria-haspopup=”menu”, indicates that popup is menu
- Aria-haspopup=”dialog”, indicates that popup is dialog
- Aria-haspopup=”grid”, indicates that popup is grid
- Aria-haspopup=”listbox”, indicates that popup is listbox
- Aria-haspopup=”tree”, indicates that popup is true
Browser Compatibility
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaHasPopup | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support
Screen reader support for the aria-haspopup attribute has improved over the years. Instead of reinventing the wheel, here is a note from Manuel Matuzovic on how aria-haspopup is supported by various screen readers and their behaviors. Manuel’s testing is more thorough and provides insights on how different screen readers interpret the same attribute differently. It is crucial to understand that while the aria-haspopup attribute remains the same, screen reader announcements might vary depending on the browser and screen reader used.
Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
MUST convey the “false” value | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
MUST convey the “dialog” value | supported | supported | supported | partial | supported | supported | supported | supported | partial | supported | supported |
MUST convey the “grid” value | supported | supported | supported | partial | supported | supported | supported | supported | partial | supported | supported |
MUST convey the “listbox” value | partial (1/2) | partial (1/2) | partial (1/2) | partial (1/2) | partial (1/2) | partial (1/2) | partial (1/2) | partial (1/2) | some partial support | supported | supported |
MUST convey the “menu” value | supported | supported | supported | partial | supported | supported | supported | supported | supported | supported | supported |
MUST convey the “tree” value | supported | supported | supported | partial | supported | supported | supported | supported | partial | supported | supported |
MUST convey the “true” value (see note) | supported | supported | supported | some partial support | supported | supported | supported | partial (1/2) | partial (1/2) | supported | supported |
aria-haspopup Example
Using the aria-haspopup attribute on a dropdown menu will help assistive technologies, such as screen readers, identify that there are submenus present.
<nav role="navigation" aria-label="example with dropdowns">
<ul class="with-dropdowns">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="/about" aria-haspopup="true">About</a>
<ul aria-hidden="true" aria-label="submenu">
<li>
<a href="/about/#who-we-are">Who we are</a>
</li>
<li>
<a href="/about/#what-we-do">What we do</a>
</li>
<li>
<a href="/about/#why">Why</a>
</li>
</ul>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
Characteristics
Related Concepts
- aria-controls
- User Agent Accessibility Guidelines [UAAG10] conditional content
Used in Roles
- All elements of the base markup
Value
- token: One of a limited set of allowed values. An explicit value of undefined for this type is the equivalent of providing no value.
- false (default): Indicates the element does not have a popup.
- true: Indicates the popup is a menu.
- menu: Indicates the popup is a menu.
- listbox: Indicates the popup is a listbox.
- tree: Indicates the popup is a tree.
- grid: Indicates the popup is a grid.
- dialog: Indicates the popup is a dialog.
Semantic HTML
No HTML element equivalent.
References
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-haspopup. - A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for aria-haspopup. - MDN Web Docs
The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-haspopup.