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)
(ARIA 1.1 values for the aria-haspopup property)
Line 55: Line 55:
 
* "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==
 
<html>
 
<html>
 
   <style>
 
   <style>
Line 76: Line 77:
 
     <button aria-haspopup="dialog" id="b7"> Open dialog </button>
 
     <button aria-haspopup="dialog" id="b7"> Open dialog </button>
 
   </div>
 
   </div>
 +
 +
<h3>Links with varies haspopup values</h3>
 
   <div>
 
   <div>
 
     <a href="#" aria-haspopup="menu" id="b3"> Link with menu attached </a>
 
     <a href="#" aria-haspopup="menu" id="b3"> Link with menu attached </a>
Line 91: Line 94:
 
     <a href="#" aria-haspopup="dialog" id="b7"> Link with dialog attached </a>
 
     <a href="#" aria-haspopup="dialog" id="b7"> Link with dialog attached </a>
 
   </div>
 
   </div>
 +
<h3>Radio buttons with various haspopup values</h3>
 +
<div>
 +
  <label><input aria-haspopup="menu" id="rr1" type="radio" />Value</label>
 +
</div>
 +
<div>
 +
  <label><input aria-haspopup="list" id="rr1" type="radio" />Value</label>
 +
</div>
 +
<div>
 +
  <label><input aria-haspopup="tree" id="rr1" type="radio" />Value</label>
 +
</div>
 +
<div>
 +
  <label><input aria-haspopup="grid" id="rr1" type="radio" />Value</label>
 +
</div>
 +
<div>
 +
  <label><input aria-haspopup="dialog" id="rr1" type="radio" />Value</label>
 +
</div>
 +
 
</html>
 
</html>
  

Revision as of 14:19, 9 June 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

Assistive Technology

  • iOS 10.3.3 and VoiceOver ARIA 1.1 values not supported
  • 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.