aria-haspopup attribute was present in the aria1.0 as well but few modifications have been made to this attribute in aria1.1. Before we get into that, Let us understand what is popup content as per the specification. Popup content usually appears as a block of content that is on top of other content. It could be menu, dialog, and so on..
In aria 1.0, aria-haspopup values are limited to only true/false. But in aria 1.1, aria-haspopup has list of token values and it is enumerated type. The token values are:
- Aria-haspopup=”false”, indicates the element does not have any popup
- Aria-haspopup=”true”, indicates that popup is menu
- Aria-haspopup=”menu”, indicates that popup is menu
- Aria-haspopup=”dialog”, indicates that popup is dialog
- Aria-haspopup=”grid”, indicates that popup is grid
- Aria-haspopup=”listbox”, indicates that popup is listbox
- Aria-haspopup=”tree”, indicates that popup is tree
Aria-haspopup=”true” and aria-haspopup=”menu” are one and the same and aria-popup=”true” is for to support the backward compatibility.
Notes for assistive technology vendors
- Any other value apart from the above mentioned token values should be treated as aria-haspopup=”false”, by assistive technologies which means that element does not have popup.
Author notes
- Author should use Aria-haspopup attribute only for keyboard focusable elements.
- Author should not set this attribute for the element that opens tooltip as popup and tooltip are not one and the same.
Sample Code Snippets
button haspopup unspecified
if given
<div id=”test” role=”button”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role but not expected to expose aria-haspopup
button haspopup true
Note: as discussed earlier, the ARIA spec says “To provide backward compatibility with ARIA 1.0 content, user agents must treat an aria-haspopup value of true as equivalent to a value of menu.”
if given
<div role=”button” aria-haspopup=”true” id=”test”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role and aria-haspopup=”menu”
button haspopup false
if given
<div id=”test” role=”button” aria-haspopup=”false”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role but are not expected to expose aria-haspopup
button haspopup dialog
if given
<div id=”test” role=”button” aria-haspopup=”dialog”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role along with the presence of the dialog.
button haspopup grid
if given
<div id=”test” role=”button” aria-haspopup=”grid”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role along with the presence of grid.
button haspopup listbox
if given
<div id=”test” role=”button” aria-haspopup=”listbox”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role along with the presence of listbox.
button haspopup menu
if given
<div id=”test” role=”button” aria-haspopup=”menu”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role along with the presence of menu.
button haspopup tree
if given
<div id=”test” role=”button” aria-haspopup=”tree”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role along with the presence of tree.
button haspopup suman
if given
<div id=”test” role=”button” aria-haspopup=”suman”>
OK
</div>
then for the element of id test, assistive technologies are expected to expose the button role but are not expected to expose aria-haspopup as the value “suman” is not the accepted token value.
References