aria-haspopup(property)

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

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.