This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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-expandedattribute in combination witharia-haspopupon macOS and iOs. - VoiceOver on MacOS with Firefox announces
aria-haspopup="true"differently thanaria-haspopup="menu": Settings, menu button, group fortrueand Settings, menu pop-up, button formenu. - Talkback with Chrome doesn't support grid, listbox, and tree.
- Jaws adds specific instructions for
trueandmenu: “Press Space to activate the menu. Then navigate with arrow keys”, and forlistbox,tree, andgrid: “To activate press Enter”. - Jaws doesn't announce the
aria-expandedattribute 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 thanaria-haspopup="menu": Settings, menu button, subMenu fortrueand Settings, button, subMenu formenu. - NVDA with Chrome/Edge announces
aria-haspopup="dialog"differently thanaria-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 whenaria-expandedisn'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
| 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.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Manuel Matuzović | Sciencx (2023-08-17T00:00:00+00:00) aria-haspopup and screen readers. Retrieved from https://www.scien.cx/2023/08/17/aria-haspopup-and-screen-readers/
" » aria-haspopup and screen readers." Manuel Matuzović | Sciencx - Thursday August 17, 2023, https://www.scien.cx/2023/08/17/aria-haspopup-and-screen-readers/
HARVARDManuel Matuzović | Sciencx Thursday August 17, 2023 » aria-haspopup and screen readers., viewed ,<https://www.scien.cx/2023/08/17/aria-haspopup-and-screen-readers/>
VANCOUVERManuel Matuzović | Sciencx - » aria-haspopup and screen readers. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/08/17/aria-haspopup-and-screen-readers/
CHICAGO" » aria-haspopup and screen readers." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/08/17/aria-haspopup-and-screen-readers/
IEEE" » aria-haspopup and screen readers." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/08/17/aria-haspopup-and-screen-readers/. [Accessed: ]
rf:citation » aria-haspopup and screen readers | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/08/17/aria-haspopup-and-screen-readers/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.