WAI-ARIA: Role=Checkbox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
WAI-ARIA: Role=Checkbox
WAI-ARIA: Role=Checkbox

A checkable input that has three possible values: true, false, or mixed.

Description

A checkable input that has three possible values: true, false, or mixed.

The aria-checked attribute of a checkbox indicates whether the input is checked (true), unchecked (false), or represents a group of elements that have a mixture of checked and unchecked values (mixed). Many checkboxes do not use the mixed value, and thus are effectively boolean checkboxes.


Screen Reader Support For Role=CheckBox


ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

Role=CheckBox Example

HTML Example 

<p><input type="checkbox" role="checkbox" aria-checked="false">I agree to the terms</p>

HTML Example 2

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

Characteristics

Superclass Role

  • input

Subclass Roles

  • menuitemcheckbox
  • switch

Related Concepts

  • HTML input[type=”checkbox”]
  • option

Required States and Properties

  • aria-checked

Supported States and Properties

  • aria-readonly

Inherited States and Properties

Name From

  • contents
  • author

Accessible Name Required

  • True

Children Presentational

  • True

Implicit Value for Role

  • Default for aria-checked is false.

Semantic HTML

Use the HTML type=“checkbox” attribute on the <input> tag.

<input id="checkBox" type=”checkbox”>

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: role=presentation

WAI-ARIA: role=presentation

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

An element whose implicit native role semantics will not be mapped to the accessibility API. Description An element whose implicit native role semantics will not be mapped to the accessibility API. See synonym none. Note regarding the ARIA 1.1 none role.§ In ARIA 1.1, the working group introduced none as a synonym to the presentation role, due to author…

WAI-ARIA: Role=Application

WAI-ARIA: Role=Application

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

A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a widget role. Description A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction…

WAI-ARIA: Role=Select

WAI-ARIA: Role=Select

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

Description A form widget that allows the user to make selections from a set of choices. Note: select is an abstract role. Authors should not use this role in content. Characteristics Is Abstract Superclass Role Subclass Roles Supported States and Properties Inherited States and Properties Name From Reference

WAI-ARIA: Role=Tabpanel

WAI-ARIA: Role=Tabpanel

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

Description A container for the resources associated with a tab, where each tab is contained in a tablist. Authors SHOULD associate a tabpanel element with its tab, either by using the aria-controls attribute on the tab to reference the tab panel, or by using the aria-labelledby attribute on the tab panel to reference the tab….

WAI-ARIA: ROLE=PROGRESSBAR

WAI-ARIA: ROLE=PROGRESSBAR

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

An element that displays the progress status for tasks that take a long time. Description An element that displays the progress status for tasks that take a long time. A progressbar indicates that the user’s request has been received and the application is making progress toward completing the requested action. The author SHOULD supply values for aria-valuenow,…

WAI-ARIA: Role=Landmark

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

A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive…

Leave a Reply

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