Difference between revisions of "ARIA Haspopup property"

From Level Access Web Labs
Jump to navigation Jump to search
(→‎ARIA 1.1 values for the aria-haspopup property)
(→‎Buttons with various haspopup values)
 
(50 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
</p>
 
</p>
 
* Tooltips are not considered popups under ARIA
 
* Tooltips are not considered popups under ARIA
−
<p><em>Please note: </em> According to the current ARIA 1.0 specification the <code>aria-haspopup</code> attribute should only be used to indicate the presence of a menu, submenu, or button menu.  Under ARIA 1.1 the <code>aria-haspopup</code> 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.</p>
+
<p><em>Please note: </em> According to the current ARIA 1.0 specification the <code>aria-haspopup</code> attribute should only be used to indicate the presence of a menu, submenu, or button menu.  Under ARIA 1.0 the <code>aria-haspopup</code> 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. See below for ARIA 1.1.</p>  
  
 
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.
 
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.
Line 15: Line 15:
 
</head>
 
</head>
 
<body>
 
<body>
−
<p>Input text field </p>
+
<p>Input type color (browser support varies)</p>
 
<div>
 
<div>
 
   <label for="i1">Colors:</label>
 
   <label for="i1">Colors:</label>
−
   <input aria-haspopup="true" id="i1" type="text" value="" />
+
   <input aria-haspopup="true" id="i1" type="color" value="" />
 
</div>
 
</div>
 
<p> Input type button </p>
 
<p> Input type button </p>
Line 47: Line 47:
  
 
==ARIA 1.1 values for the aria-haspopup property==
 
==ARIA 1.1 values for the aria-haspopup property==
−
* values under 1.1 are
+
 
 +
Values under 1.1 are:
 +
 
 
* menu
 
* menu
 
* listbox
 
* listbox
Line 55: Line 57:
 
* "true" is supported for backward compatibility and maps to "menu"
 
* "true" is supported for backward compatibility and maps to "menu"
  
−
==Buttons with varies haspopup values==
+
These values should only be used when they match the role of the popup container.
 +
 
 +
==Buttons with various haspopup values==
 
<html>
 
<html>
 
   <style>
 
   <style>
Line 63: Line 67:
 
   </style>
 
   </style>
 
   <div>
 
   <div>
−
     <button aria-haspopup="menu" id="b3"> Open menu </button>
+
     <button onclick="document.getElementById('button1').focus();" aria-haspopup="true" id="b3"> Open true </button>
 +
  </div>
 +
  <div>
 +
    <button onclick="document.getElementById('button1').focus();" aria-haspopup="menu" id="b3"> Open menu </button>
 
   </div>
 
   </div>
 
   <div>
 
   <div>
Line 75: Line 82:
 
   </div>
 
   </div>
 
   <div>
 
   <div>
−
     <button aria-haspopup="dialog" id="b7"> Open dialog </button>
+
     <button aria-haspopup="dialog" id="b7" onclick="document.getElementById('button1').focus();"> Open dialog </button>
 
   </div>
 
   </div>
  
−
<h3>Links with varies haspopup values</h3>
+
<button id="button1">Text</button>
 +
 
 +
<h3>Links with various haspopup values</h3>
 
   <div>
 
   <div>
−
     <a href="#" aria-haspopup="menu" id="b3"> Link with menu attached </a>
+
     <a href="#" aria-haspopup="menu" id="b3link"> Link with menu attached </a>
 
   </div>
 
   </div>
 
   <div>
 
   <div>
−
     <a href="#" aria-haspopup="listbox" id="b4"> Link with list box attached </a>
+
     <a href="#" aria-haspopup="listbox" id="b4link"> Link with list box attached </a>
 
   </div>
 
   </div>
 
   <div>
 
   <div>
−
     <a href="#" aria-haspopup="tree" id="b5"> Link with tree attached </a>
+
     <a href="#" aria-haspopup="tree" id="b5link"> Link with tree attached </a>
 
   </div>
 
   </div>
 
   <div>
 
   <div>
−
     <a href="#" aria-haspopup="grid" id="b6"> Link with grid attached </a>
+
     <a href="#" aria-haspopup="grid" id="b6link"> Link with grid attached </a>
 
   </div>
 
   </div>
 
   <div>
 
   <div>
−
     <a href="#" aria-haspopup="dialog" id="b7"> Link with dialog attached </a>
+
     <a href="#" aria-haspopup="dialog" id="b7link"> Link with dialog attached </a>
 
   </div>
 
   </div>
 
<h3>Radio buttons with various haspopup values</h3>
 
<h3>Radio buttons with various haspopup values</h3>
 
<div>
 
<div>
−
   <label><input aria-haspopup="menu" id="rr1" type="radio" />Value</label>
+
   Menu: <label><input aria-haspopup="menu" id="rr1" type="radio" />Value</label>
 
</div>
 
</div>
 
<div>
 
<div>
−
   <label><input aria-haspopup="list" id="rr1" type="radio" />Value</label>
+
   Listbox: <label><input aria-haspopup="listbox" id="rr2" type="radio" />Value</label>
 
</div>
 
</div>
 
<div>
 
<div>
−
   <label><input aria-haspopup="tree" id="rr1" type="radio" />Value</label>
+
   Tree: <label><input aria-haspopup="tree" id="rr3" type="radio" />Value</label>
 
</div>
 
</div>
 
<div>
 
<div>
−
   <label><input aria-haspopup="grid" id="rr1" type="radio" />Value</label>
+
   Grid: <label><input aria-haspopup="grid" id="rr4" type="radio" />Value</label>
 
</div>
 
</div>
 
<div>
 
<div>
−
   <label><input aria-haspopup="dialog" id="rr1" type="radio" />Value</label>
+
   Dialog: <label><input aria-haspopup="dialog" id="rr5" type="radio" />Value</label>
 
</div>
 
</div>
 +
 +
<h3>Input with various haspopup values</h3>
 +
<div>
 +
  Menu: <label>Value<input aria-haspopup="menu" id="tt1" type="text" /></label>
 +
</div>
 +
<div>
 +
  Listbox: <label>Value:<input aria-haspopup="listbox" id="tt2" type="text" /></label>
 +
</div>
 +
<div>
 +
  Tree: <label>Value:<input aria-haspopup="tree" id="tt3" type="text" /></label>
 +
</div>
 +
<div>
 +
  Grid: <label>Value:<input aria-haspopup="grid" id="tt4" type="text" /></label>
 +
</div>
 +
<div>
 +
  Dialog: <label>Value:<input aria-haspopup="dialog" id="tt5" type="text" /></label>
 +
</div>
 +
 +
<h3>Button with aria-expanded</h3>
 +
 +
<p>A widget can appear as a popup, while the button that triggered the popup remains interactive and hides the popup. (Experimental)</p>
 +
 +
<div>HasPopup=true, not expanded: <button aria-haspopup="true" aria-expanded="false">Take Action</button></div>
 +
<div>HasPopup=true, expanded: <button aria-haspopup="true" aria-expanded="true">Take Action</button></div>
 +
 +
<div>Menu, not expanded: <button aria-haspopup="menu" aria-expanded="false">Take Action</button></div>
 +
<div>Menu, expanded: <button aria-haspopup="menu" aria-expanded="true">Take Action</button></div>
 +
 +
<div>Listbox, not expanded: <button aria-haspopup="listbox" aria-expanded="false">Take Action</button></div>
 +
<div>Listbox, expanded: <button aria-haspopup="listbox" aria-expanded="true">Take Action</button></div>
 +
 +
<div>Tree, not expanded: <button aria-haspopup="tree" aria-expanded="false">Take Action</button></div>
 +
<div>Tree, expanded: <button aria-haspopup="tree" aria-expanded="true">Take Action</button></div>
 +
 +
<div>Grid, not expanded: <button aria-haspopup="grid" aria-expanded="false">Take Action</button></div>
 +
<div>Grid, expanded: <button aria-haspopup="grid" aria-expanded="true">Take Action</button></div>
 +
 +
<div>Dialog, not expanded: <button aria-haspopup="dialog" aria-expanded="false">Take Action</button></div>
 +
<div>Dialog, expanded: <button aria-haspopup="dialog" aria-expanded="true">Take Action</button></div>
  
 
</html>
 
</html>
  
 
==Assistive Technology==
 
==Assistive Technology==
−
* iOS 10.3.3 and VoiceOver ARIA 1.1 values not supported
+
* iOS 10.3.3 and VoiceOver
−
* JAWS 18 (Firefox) announces "menu" for all haspopup values when applied on button role and "has popup" for all other types regardless of haspopup value.
+
** ARIA 1.0 "true": Announced as "shows popup"
 +
** ARIA 1.1 values: Not announced. No pop-up indication provided at all.
 +
** ARIA 1.0 "true" and aria-expanded: Announced as "shows popup". The aria-expanded state is not announced.
 +
** ARIA 1.1 values and aria-expanded: Pop-up values are not announced. The aria-expanded state is announced as "expanded" or "collapsed".
 +
* JAWS 18 (tested with Firefox 56.0 and Internet Explorer 11)
 +
** On links: Announces appropriate popup value like "listbox", "grid", etc.
 +
** On radio buttons: Announces appropriate popup value like "listbox", "grid", etc.
 +
** On buttons: Announces "menu", regardless of haspopup value
 +
*** Exception: If the button also has an aria-expanded attribute, in JAWS + Internet Explorer (not Firefox), when not in forms mode, it announces both "menu" and the appropriate popup value. Example: "menu [collapsed|expanded] haspopup dialog".
 +
** On text inputs: Announces "has popup", regardless of haspopup value
 +
** On other element types: Announces "has popup", regardless of haspopup value
 +
* NVDA 2017.3 + Firefox 56.0
 +
** On buttons
 +
*** With haspopup "true": Announces "menu button submenu"
 +
*** With ARIA 1.1 values: Announces "button submenu"
 +
*** With aria-expanded: Same "menu button submenu" or "button submenu" announcements. The aria-expanded state is announced as "expanded" or "collapsed".
 +
** On text inputs
 +
*** In forms mode: Announces "edit with autocomplete submenu"
 +
*** Not in forms mode: Announces "edit submenu"
 +
** On other element types: Announces "[element type] submenu"
 +
* NVDA 2017.3 + Internet Explorer 11
 +
** ARIA 1.0 "true": Announced as "submenu"
 +
** ARIA 1.1 values: Not announced. No pop-up indication provided at all.
 +
** ARIA 1.0 "true" and aria-expanded: Announced as "submenu". The aria-expanded state is announced as "expanded" or "collapsed".
 +
** ARIA 1.1 values and aria-expanded: Pop-up values are not announced. The aria-expanded state is announced as "expanded" or "collapsed".
 +
 
 +
===JAWS 18 support (Firefox 56.0 and Internet Explorer 11)===
 +
<html>
 +
  <style>
 +
    th {
 +
      color: white;
 +
      background-color: #552c9f;
 +
      font-weigth:bold;
 +
    }
 +
    table {
 +
      border: thin solid #552c9f;
 +
    }
 +
  </style>
 +
<p>This is the same information as above, in a table format.</p>
 +
<table><caption>JAWS announcements</caption><tr><td>
 +
</td><th> Button </th><th> Input text </th><th> Input radio </th><th> Link
 +
</th></tr>
 +
<tr><th>aria-haspopup="true" </th><td> menu </td><td> haspopup </td><td> haspopup </td><td> haspopup
 +
</td></tr>
 +
<tr><th>aria-haspopup="menu" </th><td> menu </td><td> haspopup </td><td> has pop up menu </td><td> has pop up menu
 +
</td></tr>
 +
<tr><th>aria-haspopup="listbox" </th><td> menu </td><td> haspopup </td><td> has pop up listbox </td><td> has pop up listbox
 +
</td></tr>
 +
<tr><th>aria-haspopup="tree" </th><td> menu </td><td> haspopup </td><td> has pop up tree </td><td> has pop up tree
 +
</td></tr>
 +
<tr><th>aria-haspopup="grid" </th><td> menu </td><td> haspopup </td><td> has pop up grid </td><td> has pop up grid
 +
</td></tr>
 +
<tr><th>aria-haspopup="dialog" </th><td> menu </td><td> haspopup </td><td> has pop up dialog </td><td> has pop up dialog</td></tr></table>
 +
</html>
 +
 
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 17:34, 22 July 2020

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.0 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. See below for ARIA 1.1.

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 type color (browser support varies)

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"

These values should only be used when they match the role of the popup container.

Buttons with various haspopup values

Links with various 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:

Button with aria-expanded

A widget can appear as a popup, while the button that triggered the popup remains interactive and hides the popup. (Experimental)

HasPopup=true, not expanded:
HasPopup=true, expanded:
Menu, not expanded:
Menu, expanded:
Listbox, not expanded:
Listbox, expanded:
Tree, not expanded:
Tree, expanded:
Grid, not expanded:
Grid, expanded:
Dialog, not expanded:
Dialog, expanded:

Assistive Technology

  • iOS 10.3.3 and VoiceOver
    • ARIA 1.0 "true": Announced as "shows popup"
    • ARIA 1.1 values: Not announced. No pop-up indication provided at all.
    • ARIA 1.0 "true" and aria-expanded: Announced as "shows popup". The aria-expanded state is not announced.
    • ARIA 1.1 values and aria-expanded: Pop-up values are not announced. The aria-expanded state is announced as "expanded" or "collapsed".
  • JAWS 18 (tested with Firefox 56.0 and Internet Explorer 11)
    • On links: Announces appropriate popup value like "listbox", "grid", etc.
    • On radio buttons: Announces appropriate popup value like "listbox", "grid", etc.
    • On buttons: Announces "menu", regardless of haspopup value
      • Exception: If the button also has an aria-expanded attribute, in JAWS + Internet Explorer (not Firefox), when not in forms mode, it announces both "menu" and the appropriate popup value. Example: "menu [collapsed|expanded] haspopup dialog".
    • On text inputs: Announces "has popup", regardless of haspopup value
    • On other element types: Announces "has popup", regardless of haspopup value
  • NVDA 2017.3 + Firefox 56.0
    • On buttons
      • With haspopup "true": Announces "menu button submenu"
      • With ARIA 1.1 values: Announces "button submenu"
      • With aria-expanded: Same "menu button submenu" or "button submenu" announcements. The aria-expanded state is announced as "expanded" or "collapsed".
    • On text inputs
      • In forms mode: Announces "edit with autocomplete submenu"
      • Not in forms mode: Announces "edit submenu"
    • On other element types: Announces "[element type] submenu"
  • NVDA 2017.3 + Internet Explorer 11
    • ARIA 1.0 "true": Announced as "submenu"
    • ARIA 1.1 values: Not announced. No pop-up indication provided at all.
    • ARIA 1.0 "true" and aria-expanded: Announced as "submenu". The aria-expanded state is announced as "expanded" or "collapsed".
    • ARIA 1.1 values and aria-expanded: Pop-up values are not announced. The aria-expanded state is announced as "expanded" or "collapsed".

JAWS 18 support (Firefox 56.0 and Internet Explorer 11)

This is the same information as above, in a table format.

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

Retrieved from "https://labs.levelaccess.com/index.php?title=ARIA_Haspopup_property&oldid=6756"