Field notes on using aria-haspopup attribute

Posted on

After my team was reported an accessibility issue on one of our components incorrectly using the aria-haspopup attribute, I researched around this and this is what I came down to...

We should use aria-haspopup when:

  1. A control triggers some "popup" that appears on top of other content
  2. The designated "popup" is either of the following roles:
  • menu
  • listbox
  • tree
  • grid
  • dialog

It is worth noting that using aria-haspopup="true", i.e. with true instead of either false or any of the roles cited above, resolves to present the "popup" with the default menu role.

By looking at the ARIA reference documentation on the menu role, it refers to a menu "similar to a menu on a desktop application".

Moreover such menu are navigated with arrow keys, according to the ARIA authoring practices guide article on the Menu button pattern.

Our team misused the aria-haspopup attribute is many ways:

  1. Our "popup", upon activation, expanded, i.e pushed its below content down rather than pop over it.
  2. Our "popup" was not similar to a desktop application menu. Moreover it was a <ul>, i.e. with implicit role=list rather than role=menu.
  3. The keyboard navigation through the "popup" items is done with Tab rather than the arrow keys and therefore differ from expected interaction.

All this to say...

Be wary when using aria-haspopup as you may unwillingly convey the wrong signals to assistive technology users and create a disorienting and inefficient user experience.