WAI-ARIA: aria-checked (State)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : States
WAI-ARIA: aria-checked (State)
WAI-ARIA: aria-checked (State)

Description

Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. See related aria-pressed and aria-selected.

The aria-checked attribute indicates whether the element is checked (true), unchecked (false), or represents a group of other elements that have a mixture of checked and unchecked values (mixed). Most inputs only support values of true and false, but the mixed value is supported by certain tri-state inputs such as a checkbox or menuitemcheckbox.

The mixed value is not supported on radio, menuitemradio, switch or any element that inherits from these in the taxonomy, and user agents MUST treat a mixed value as equivalent to false for those roles.

Browser Compatibility For aria-checked

desktopmobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
ariaChecked

Screen Reader Support For aria-checked

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey the “false” valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the “true” valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey changes in valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

aria-checked Example

HTML Example

<span role="checkbox" aria-checked="true" tabindex="0" id="simulatedcheckbox"></span>

Characteristics

Used in Roles

Inherits into Roles

Values

  • 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 checked but is not currently checked.
  • mixed
    • Indicates a mixed mode value for a tri-state checkbox or menuitemcheckbox.
  • true
    • The element is checked.
  • undefined (default)
    • The element does not support being checked.

Semantic HTML

Use the HTML “checked” attribute.

<form action=”/action_page.php”>
<input type=”checkbox” name=”vehicle” value=”Bike”> I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car” checked> I have a car<br>
<input type=”submit” value=”Submit”>
</form>

Reference

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WAI-ARIA: aria-invalid (State)

WAI-ARIA: aria-invalid (State)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Indicates the entered value does not conform to the format expected by the application. See related aria-errormessage. If the value is computed to be invalid or out-of-range, the application author SHOULD set this attribute to true. User agents SHOULD inform the user of the error. Application authors SHOULD provide suggestions for corrections if they…

WAI-ARIA: aria-disabled (State)

WAI-ARIA: aria-disabled (State)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See related aria-hidden and aria-readonly. For example, irrelevant options in a radio group may be disabled. Disabled elements might not receive focus from the tab order. For some disabled elements, applications might choose not to support navigation to…

WAI-ARIA: aria-hidden (State)

WAI-ARIA: aria-hidden (State)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Indicates whether the element is exposed to an accessibility API. See related aria-disabled. User agents determine an element’s hidden status based on whether it is rendered, and the rendering is usually controlled by CSS. For example, an element whose display property is set to none is not rendered. An element is considered hidden if…

WAI-ARIA: aria-current (State)

WAI-ARIA: aria-current (State)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description New in ARIA 1.1 Indicates the element that represents the current item within a container or set of related elements. The aria-current attribute is an enumerated type. Any value not included in the list of allowed values SHOULD be treated by assistive technologies as if the value true had been provided. If the attribute…

WAI-ARIA: aria-selected (State)

WAI-ARIA: aria-selected (State)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Indicates the current “selected” state of various widgets. See related aria-checked and aria-pressed. This attribute is used with single-selection and multiple-selection widgets: Single-selection containers where the currently focused item is not selected. The selection normally follows the focus, and is managed by the user agent. Multiple-selection containers. Authors SHOULD ensure that any selectable descendant…

WAI-ARIA: aria-pressed (State)

WAI-ARIA: aria-pressed (State)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

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…

Leave a Reply

Your email address will not be published. Required fields are marked *