ARIA Haspopup property

This page demonstrates uses of the aria-haspopup attribute.

• Tooltips are not considered popups under ARIA

Please note: According to the current ARIA 1.0 specification the aria-haspopup attribute should only be used to indicate the presence of a menu, submenu, or button menu. Under ARIA 1.1 the aria-haspopup attribute should not be used to indicate when a dialog or modal window will open. These are potential good uses for the attribute and are addressed by future versions of the ARIA specification. Currently screen readers such as JAWS and NVDA will announce "menu", "sub menu", or "haspopup" for the different uses of this attribute.

Note: The controls below have the attribute set to "true" but do not actually have a menu associated with them. Thus, nothing will happen when you interact with the control.

Input type color (browser support varies)

Colors:

Input type button

Button element

Colors

Link

Colors

Span with role of button

Colors

Radio button

yes No

ARIA 1.1 values for the aria-haspopup property

Values under 1.1 are:

• menu
• listbox
• tree
• grid
• dialog
• "true" is supported for backward compatibility and maps to "menu"

Buttons with varies haspopup values

Open menu

Open listbox

Open tree

Open grid

Open dialog

Links with varies haspopup values

Link with menu attached

Link with list box attached

Link with tree attached

Link with grid attached

Link with dialog attached

Radio buttons with various haspopup values

Menu: Value

Listbox: Value

Tree: Value

Grid: Value

Dialog: Value

Input with various haspopup values

Menu: Value

Listbox: Value:

Tree: Value:

Grid: Value:

Dialog: Value:

Button with aria-expanded

A widget can appear as a popup, while the button that triggered the popup remains interactive and hides the popup. (Experimental)

HasPopup=true, not expanded: Take Action

HasPopup=true, expanded: Take Action

Menu, not expanded: Take Action

Menu, expanded: Take Action

Listbox, not expanded: Take Action

Listbox, expanded: Take Action

Tree, not expanded: Take Action

Tree, expanded: Take Action

Grid, not expanded: Take Action

Grid, expanded: Take Action

Dialog, not expanded: Take Action

Dialog, expanded: Take Action

Assistive Technology

• iOS 10.3.3 and VoiceOver
  • ARIA 1.0 "true": Announced as "shows popup"
  • ARIA 1.1 values: Not announced. No pop-up indication provided at all.
  • ARIA 1.0 "true" and aria-expanded: Announced as "shows popup". The aria-expanded state is not announced.
  • ARIA 1.1 values and aria-expanded: Pop-up values are not announced. The aria-expanded state is announced as "expanded" or "collapsed".
• JAWS 18 (tested with Firefox 56.0 and Internet Explorer 11)
  • On links: Announces appropriate popup value like "listbox", "grid", etc.
  • On radio buttons: Announces appropriate popup value like "listbox", "grid", etc.
  • On buttons: Announces "menu", regardless of haspopup value
    • Exception: If the button also has an aria-expanded attribute, in JAWS + Internet Explorer (not Firefox), when not in forms mode, it announces both "menu" and the appropriate popup value. Example: "menu [collapsed|expanded] haspopup dialog".
  • On text inputs: Announces "has popup", regardless of haspopup value
  • On other element types: Announces "has popup", regardless of haspopup value
• NVDA 2017.3 + Firefox 56.0
  • On buttons
    • With haspopup "true": Announces "menu button submenu"
    • With ARIA 1.1 values: Announces "button submenu"
    • With aria-expanded: Same announcements, plus inserting the appropriate value of [collapsed|expanded]
  • On text inputs
    • In forms mode: Announces "edit with autocomplete submenu"
    • Not in forms mode: Announces "edit submenu"
  • On other element types: Announces "submenu"

JAWS 18 support (Firefox 56.0 and Internet Explorer 11)

This is the same information as above, in a table format.

JAWS announcements

	Button	Input text	Input radio	Link
aria-haspopup="true"	menu	haspopup	haspopup	haspopup
aria-haspopup="menu"	menu	haspopup	has pop up menu	has pop up menu
aria-haspopup="listbox"	menu	haspopup	has pop up listbox	has pop up listbox
aria-haspopup="tree"	menu	haspopup	has pop up tree	has pop up tree
aria-haspopup="grid"	menu	haspopup	has pop up grid	has pop up grid
aria-haspopup="dialog"	menu	haspopup	has pop up dialog	has pop up dialog