aria-haspopup and screen readers

posted on 17.08.2023

I read Steve Faulkners “hasPopup hasPoop” where he mentions differences in what screen readers announce when dealing with the aria-haspopup attribute. I wanted to know how that manifests used on a button.

Summary

The situation isn't too bad because all screen readers and browsers, except Narrator in Firefox and Chrome, at least support the attribute. Talback and NVDA don't support the grid, listbox, and tree values. NVDA also doesn't support dialog. Other than that, it works great.

I noticed some interesting details:

VoiceOver with Safari doesn't announce the aria-expanded attribute in combination with aria-haspopup on macOS and iOs.
VoiceOver on MacOS with Firefox announces aria-haspopup="true" differently than aria-haspopup="menu": Settings, menu button, group for true and Settings, menu pop-up, button for menu.
Talkback with Chrome doesn't support grid, listbox, and tree.
Jaws adds specific instructions for true and menu: “Press Space to activate the menu. Then navigate with arrow keys”, and for listbox, tree, and grid: “To activate press Enter”.
Jaws doesn't announce the aria-expanded attribute initially in all three browsers, but it does announce it on activation.
NVDA doesn't support dialogue, grid, listbox, and tree. (NVDA added support with in version 2023.2)
NVDA with Firefox announces aria-haspopup="true" differently than aria-haspopup="menu": Settings, menu button, subMenu for true and Settings, button, subMenu for menu.
NVDA with Chrome/Edge announces aria-haspopup="dialog" differently than aria-haspopup="grid|tree|listbox": Settings, button, opens dialog and Settings, menu button, opens grid|tree|listbox.
Narrator announces “collapsed” on aria-haspopup="true|menu" even when aria-expanded isn't present.
Narrator with Firefox doesn't supprt the attribute.
Narrator with Chrome announces “menu item” instead of “menu button“, except for aria-haspopup="dialog" where it's just “button”.

Software/OS/browser

I tested using the Tab key only and I've used this CodePen.

VoiceOver iOS 15.7.7 with Safari
Talkback Android 13 with Chrome 116
VoiceOver macOS 13.4.1 with Safari 16.5.2
VoiceOver macOS 13.4.1 with Firefox 116
VoiceOver macOS 13.4.1 with Chrome 116
JAWS 2023.2307.37 with Edge 116, Chrome 116, and Firefox 116
NVDA 2023.2 with Firefox 116
NVDA 2023.2 with Chrome 116 and Edge 116
Narrator Windows 10 with Firefox, Chrome, and Edge 116

form role

form role test results
	VoiceOver (iOs)	Talkback	Voice Over Safari (macOS)	Voice Over Firefox (macOS)	Voice Over Chrome (macOS)	Jaws	NVDA (Firefox)	NVDA (Chrome, Edge)	Narrator (Edge)	Narrator (Firefox)	Narrator (Chrome)
aria-haspopup="true"	Settings, pop-up button, menu pop-up	Settings, menu pop-up button	Settings, menu pop-up, button	Settings, menu button, group	Settings, menu pop-up, button	Settings, button, menu	Settings, menu button, subMenu	Settings, menu button, subMenu	Settings, button, collapsed, has pop-up	Settings, menu item	Settings, menu item
aria-haspopup="menu"	Settings, pop-up button, menu pop-up	Settings, menu pop-up button	Settings, menu pop-up, button	Settings, menu pop-up, button	Settings, menu pop-up, button	Settings, button, menu	Settings, button, subMenu	Settings, menu button, subMenu	Settings, button, collapsed, has pop-up	Settings, button	Settings, menu item
aria-haspopup="menu" + aria-expanded="false"	Settings, pop-up button, menu pop-up	Collapsed, Settings, menu pop-up button	Settings, menu pop-up, button	Settings, menu pop-up collapsed, button	Settings, menu pop-up collapsed, button	Settings, button, menu	Settings, button collapsed, subMenu	Settings, menu button collapsed, subMenu	Settings, button, collapsed, has pop-up	Settings, button, collapsed	Settings, menu item, collapsed
aria-haspopup="dialog"	Settings, pop-up button, dialogue pop-up	Settings, dialogue pop-up button	Settings, dialogue pop-up, button	Settings, dialogue pop-up, button	Settings, dialogue pop-up, button	Settings, button has pop-up dialogue	Settings, button, opens dialog	Settings, button, opens dialog	Settings, button, has pop-up	Settings, button	Settings, button
aria-haspopup="grid"	Settings, pop-up button, grid pop-up	Settings, pop-up button	Settings, grid pop-up, button	Settings, grid pop-up, button	Settings, grid pop-up, button	Settings, button has pop-up grid	Settings, button, opens grid	Settings, menu button, opens grid	Settings, button, has pop-up	Settings, button	Settings, menu item
aria-haspopup="listbox"	Settings, pop-up button, list box pop-up	Settings, pop-up button	Settings, list box pop-up, button	Settings, list box pop-up, button	Settings, list box pop-up, button	Settings, button has pop-up list box	Settings, button, opens list	Settings, menu button, opens list	Settings, button, has pop-up	Settings, button	Settings, menu item
aria-haspopup="tree"	Settings, pop-up button, tree pop-up	Settings, pop-up button	Settings, tree pop-up, button	Settings, tree pop-up, button	Settings, tree pop-up, button	Settings, button has pop-up tree	Settings, button, opens tree	Settings, menu button, opens tree	Settings, button, has pop-up	Settings, button	Settings, menu item

aria-haspopup="true"

<button class="toggle" aria-haspopup="true">
    Settings
</button>

aria-haspopup="menu"

<button class="toggle" aria-haspopup="menu">
    Settings
</button>

aria-haspopup="menu" + aria-expanded="false"

<button class="toggle" aria-haspopup="menu" aria-expanded="false">
    Settings
</button>

aria-haspopup="dialog"

<button class="toggle" aria-haspopup="dialog">
    Settings
</button>

aria-haspopup="grid"

<button class="toggle" aria-haspopup="grid">
    Settings
</button>

aria-haspopup="listbox"

<button class="toggle" aria-haspopup="listbox">
    Settings
</button>

aria-haspopup="tree"

<button class="toggle" aria-haspopup="tree">
    Settings
</button>

Update 4.9.2023

NVDA supports the dialog, grid, list, and tree keywords starting with NVDA 2023.2. In prior versions it only announced Settings, button, subMenu.