How Does Screen Reader Announce aria-haspopup
I noticed on W3C website, it adds an aria-haspopup=true
attribute to the toggle button along with an aria-expanded=false
. On small viewport, clicking the button will toggle a navigation menu.
In ARIA, interactive
menus
,listboxes
,trees
,grids
, anddialogs
that appear on top of other content when triggered to appear are considered “popups”. The presence of the aria-haspopup, with one of six enumerated values -menu
,listbox
,tree
,grid
,dialog
, ortrue
- indicates the element can trigger a popup and what kind of popup will be displayed. The valuetrue
is the same asmenu
. Any other value, including an empty string or other role, is treated as iffalse
were set. - MDN
<button
class="button button-menu"
aria-haspopup="true"
aria-expanded="false"
id="openmenu"
>
<span>
<svg focusable="false" aria-hidden="true" class="icon-menu ">
<use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use>
</svg>
Menu
</span>
</button>
Below you’ll see this exact button I set up to test the VoiceOver.
I switch on VoiceOver on my Mac (Version: 14.3.1) and navigate to this button, and it announces the button as:
- Menu, menu pop up collapsed, button
- You are currently on a button. To display a list of options, press Caps Lock-Space.
To react to this button clicking, I’ve also set up a script to toggle the aria-expanded
between true and false when it’s clicked. Once I press Caps Lock
and Space
key, VoiceOver announces: Menu, menu pop up expanded, button.