Difference between revisions of "ARIA Haspopup property"
(→Buttons with varies haspopup values: Pressed and not pressed button, for a non-modal dialog) |
(→Buttons with varies haspopup values: fix star entity, and layout) |
||
| Line 132: | Line 132: | ||
<h3>Toggle button for a non-modal dialog</h3> | <h3>Toggle button for a non-modal dialog</h3> | ||
| − | Not pressed: <a href="#" aria-label="4.5 stars - rate this page" role="button" aria-pressed="false" aria-haspopup="dialog"><span aria-hidden="true">& | + | <div> |
| − | + | Not pressed: <a href="#" aria-label="4.5 stars - rate this page" role="button" aria-pressed="false" aria-haspopup="dialog"><span aria-hidden="true">★ 4.5</span></a> | |
| − | Pressed: <a href="#" aria-label="4.5 stars - rate this page" role="button" aria-pressed="true" aria-haspopup="dialog"><span aria-hidden="true">& | + | </div> |
| + | <div> | ||
| + | Pressed: <a href="#" aria-label="4.5 stars - rate this page" role="button" aria-pressed="true" aria-haspopup="dialog"><span aria-hidden="true">★ 4.5</span></a> | ||
| + | </div> | ||
</html> | </html> | ||
Revision as of 00:11, 10 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
Span with role of button
Radio button
Contents
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
Radio buttons with various haspopup values
Input with various haspopup values
Toggle button for a non-modal 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)
| 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 |
