Skip to content
DigitalA11y logo blue fill

DigitalA11Y

Your Accessibility Partner

  • Home
  • About
  • Blog
  • ResourcesExpand
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
  • Contact
DigitalA11y logo blue fill
DigitalA11Y
Your Accessibility Partner

Short Guide on Using the ARIA-haspopup (Property)

Home » Short Guide on Using the ARIA-haspopup (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated :January 15, 2023
Table of Contents
  • Description
    • What are the token values of aria-haspopup?
  • Browser Compatibility For aria-haspopup
  • Screen Reader Support For aria-haspopup
  • aria-haspopup Example
  • Characteristics
    • Related Concepts
    • Used in Roles
    • Value
  • Semantic HTML
  • Reference

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.

What are the token values of aria-haspopup?

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 For aria-haspopup

desktopmobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
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 For aria-haspopup

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey the “false” valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the “dialog” valuenonenonenonenonenonenonenonenonepartialsupportedsupported
MUST convey the “grid” valuenonenonenonenonenonenonenonenonepartialsupportedsupported
MUST convey the “listbox” valuenonenonenonepartial (1/2)nonenonenonenonesome partial supportsupportedsupported
MUST convey the “menu” valuesupportedsupportedsupportednonesupportedsupportedsupportednonepartialsupportedsupported
MUST convey the “tree” valuenonenonenonenonenonenonenonenonepartialsupportedsupported
MUST convey the “true” valuesupportedsupportedsupportednonesupportedsupportedsupportednonepartialsupportedsupported

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.

Reference

  • W3C (opens new window)
  • A11Y Support
  • MDN Web Docs

Services

  • Accessibility Audits
  • Accessibility Consulting
  • Accessibility Training

Resources

  • Understanding WCAG
  • Understanding WAI ARIA
  • WCAG 2.1 Checklist

Terms & Conditions

Privacy Policy

Accessibility Statement

Disclaimer

© 2023 DigitalA11Y
All Rights Reserved

Linkedin Twitter Facebook
DigitalA11Y

Plot No 108, 3rd Cross Rd, Saipuri Colony,
Hastinapuri Colony, Sainikpuri, Secunderabad

500094
Telangana, India

Tel:(+91)99082 66680,
E-mail: [email protected]

Scroll to top
  • Home
  • About
  • Blog
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
  • Contact
Search