Difference between revisions of "ARIA Haspopup property"

From Level Access Web Labs
Jump to navigation Jump to search
m (ARIA 1.1 values for the aria-haspopup property: Layout)
(Assistive Technology: Edited the JAWS 18 list of behaviors to match what the table says)
Line 135: Line 135:
 
* iOS 10.3.3 and VoiceOver ARIA 1.1 values not supported. No pop-up indication provided at all.
 
* iOS 10.3.3 and VoiceOver ARIA 1.1 values not supported. No pop-up indication provided at all.
 
* JAWS 18 (Firefox) announces the following
 
* JAWS 18 (Firefox) announces the following
** "menu" for all haspopup values="true" on button
+
** appropriate popup value like "listbox, grid, etc" for link and for radio button
** "haspopup" for all haspop values="true" on other elements
+
** "menu" for button, regardless of haspopup value
** "menu" for button regardless of haspopup value
+
** "haspopup" for input type text, regardless of haspopup value
** "haspopup" for input type text regardless of haspopup value
+
** "haspopup" for other element types, regardless of haspopup value
** appropriate popup value like "listbox, grid, etc" for other elements like link and radio button
 
 
* NVDA 2017.2 -- announces the same for all values of haspopup
 
* NVDA 2017.2 -- announces the same for all values of haspopup
 
** on inputs announced as "has autocomplete"
 
** on inputs announced as "has autocomplete"

Revision as of 23:53, 9 October 2017

This page demonstrates uses of the aria-haspopup attribute.

  • Tooltips are not considered popups under ARIA

Please note: According to the current ARIA 1.0 specification the aria-haspopup attribute should only be used to indicate the presence of a menu, submenu, or button menu. Under ARIA 1.1 the aria-haspopup attribute should not be used to indicate when a dialog or modal window will open. These are potential good uses for the attribute and are addressed by future versions of the ARIA specification. Currently screen readers such as JAWS and NVDA will announce "menu", "sub menu", or "haspopup" for the different uses of this attribute.

Note: The controls below have the attribute set to "true" but do not actually have a menu associated with them. Thus, nothing will happen when you interact with the control.

Input text field

Input type button

Button element

Link

Colors

Span with role of button

Colors

Radio button

ARIA 1.1 values for the aria-haspopup property

Values under 1.1 are:

  • menu
  • listbox
  • tree
  • grid
  • dialog
  • "true" is supported for backward compatibility and maps to "menu"

Buttons with varies haspopup values

Links with varies haspopup values

Link with menu attached
Link with list box attached
Link with tree attached
Link with grid attached
Link with dialog attached

Radio buttons with various haspopup values

Menu:
Listbox:
Tree:
Grid:
Dialog:

Input with various haspopup values

Menu:
Listbox:
Tree:
Grid:
Dialog:

Assistive Technology

  • iOS 10.3.3 and VoiceOver ARIA 1.0 "true" announced as "shows popup"
  • iOS 10.3.3 and VoiceOver ARIA 1.1 values not supported. No pop-up indication provided at all.
  • JAWS 18 (Firefox) announces the following
    • appropriate popup value like "listbox, grid, etc" for link and for radio button
    • "menu" for button, regardless of haspopup value
    • "haspopup" for input type text, regardless of haspopup value
    • "haspopup" for other element types, regardless of haspopup value
  • NVDA 2017.2 -- announces the same for all values of haspopup
    • on inputs announced as "has autocomplete"
    • on all other announced as "submenu"

JAWS 18 support (Firefox)

JAWS announcements
Button Input text Input radio Link
aria-haspopup="true" menu haspopup haspopup haspopup
aria-haspopup="menu" menu haspopup has pop up menu has pop up menu
aria-haspopup="listbox" menu haspopup has pop up listbox has pop up listbox
aria-haspopup="tree" menu haspopup has pop up tree has pop up tree
aria-haspopup="grid" menu haspopup has pop up grid has pop up grid
aria-haspopup="dialog" menu haspopup has pop up dialog has pop up dialog