WAI-ARIA: aria-pressed (State)
Description
Indicates the current “pressed” state of toggle buttons. See related aria-checked and aria-selected.
Toggle buttons require a full press-and-release cycle to change their value. Activating it once changes the value to true, and activating it another time changes the value back to false. A value of mixed means that the values of more than one item controlled by the button do not all share the same value. Examples of mixed-state buttons are described in WAI-ARIA Authoring Practices [wai-aria-practices-1.1]. If the attribute is not present, the button is not a toggle button.
The aria-pressed attribute is similar but not identical to the aria-checked attribute. Operating systems support pressed on buttons and checked on checkboxes.
Browser Compatibility For aria-pressed
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaPressed | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support For aria-pressed
Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
MUST convey the “false” value | supported | supported | supported | supported | supported | supported | supported | supported | partial | supported | supported |
MUST convey the “true” value | supported | supported | supported | supported | supported | supported | supported | supported | partial | supported | supported |
MUST convey the “mixed” value | supported | supported | supported | none | none | none | none | none | none | none | supported |
MUST convey the “undefined” value | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
MUST convey changes in state | supported | supported | supported | none | partial | partial | partial | supported | supported | partial | partial |
aria-pressed Example
HTML Example
<button aria-pressed="false">Mute</button>
HTML Example 2
<div role="toolbar" aria-label="sorting options" aria-controls="sortable">
<button type="button" aria-pressed="true" data-sort="ascending">A to Z</button> <button type="button" aria-pressed="false" data-sort="descending">Z to A</button>
</div>
<ul id="sortable" tabindex="-1">
<li>Fiddler crab</li>
<li>Hermit crab</li>
<li>Red crab</li>
<li>Robber crab</li>
<li>Sponge crab</li>
<li>Yeti crab</li>
</ul>
Characteristics
Used in Roles
- button
Value
- tristate:
Value representing true or false, with an intermediate “mixed” value. The default value for this value type is False, unless otherwise specified. - false
- The element supports being pressed but is not currently pressed.
- mixed
- Indicates a mixed mode value for a tri-state toggle button.
- true
- The element is pressed.
- undefined (default)
- The element does not support being pressed.
Semantic HTML
No HTML element equivalent.
Reference
- W3C (opens new window)
- A11Y Support
- MDN Web Docs