hasPopup hasPoop

Update: 09/02/2023 – retested in latest JAWS and NVDA, no change to results reported in 2021

In theory aria-haspopup could be really useful as a hint to screen reader peeps as to what type of content will pop up when they activate a control.

The Theory

values for aria-haspopup

Value	Description
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.

Note:
This property is being deprecated as a global property in ARIA 1.2. In future versions it will only be allowed on roles where it is specifically supported.

The Current Reality

• Results from the test file, using latest browser, OS and screen reader versions:
  • Modern browsers expose aria-haspopup in accessibility APIs.
  • The support for aria-haspopup is patchy across popular Screen readers.
  • The patchy support in Screen readers means aria-haspopup is not currently a practical method to robustly convey information to screen reader users on Windows about pop ups of type listbox, grid, tree or dialog.

selected screen reader announcements for aria-haspopup

Value	JAWS <button>	JAWS <a>	NVDA <button>	NVDA <a>	VoiceOver <button>	VoiceOver <a>	Narrator <button>	Narrator <a>
false (default)	button ✔️	link ✔️	button ✔️	link ✔️	button ✔️	link ✔️	button ✔️	link ✔️
true	button menu ✔️	link hasPopUp menu ✔️	menu button subMenu ✔️	subMenu link ✔️	menu pop-up button ✔️	Menu pop-up link ✔️	button collapsed ✔️	link ❌
menu	button menu ✔️	link hasPopUp menu ✔️	menu button subMenu ✔️	subMenu link ✔️	menu pop-up button ✔️	Menu pop-up link ✔️	button collapsed ✔️	link ❌
listbox	button menu ❌	link hasPopUp listbox ✔️	menu button subMenu ❌	subMenu link ❌	listbox pop-up button ✔️	listbox pop-up link ✔️	button ❌	link ❌
tree	button menu ❌	link hasPopUp tree ✔️	menu button subMenu ❌	subMenu link ❌	tree pop-up button ✔️	tree pop-up link ✔️	button ❌	link ❌
grid	button menu ❌	link hasPopUp grid ✔️	menu button subMenu ❌	subMenu link ❌	grid pop-up button ✔️	grid pop-up link ✔️	button ❌	link ❌
dialog	button menu ❌	link hasPopUp dialog ✔️	menu button subMenu ❌	subMenu link ❌	dialog pop-up button ✔️	dialog pop-up link ✔️	button ❌	link ❌

Note that how the UI is conveyed aurally differs across screen reader. This is definitely not something that we need concern ourselves with. There is no normative or informative document as to how HTML UI is to be announced to people by screen readers.

Oh poop! What can we do?
Some suggestions

Leave the aria-haspop attribute off an element in cases where the Aural UI is misleading/incorrect and instead:

Add the hint to the accessible name, for example:

<button aria-label="pick a date - has pop up grid">pick a date</button>

or use aria-describedby:

<button aria-describedby="grid">pick a date</button>

<span hidden id="grid">has pop up grid</span>

or use CSS :after

<button id="grid">pick a date</button>
#grid::after 
{content: " has pop up grid"; 
clip: rect(0 0 0 0); 
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap; 
width: 1px; }

 

See the Pen
suggested aria-haspopup work arounds by steve faulkner (@stevef)
on CodePen.