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

  • WAI-ARIA 1.2 Specification
    Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=checkbox.
  • A11Y Support
    The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=checkbox.

Explore more on DigitalA11Y Insights

  • WAI-ARIA: Role=Section
    WAI-ARIA: Role=Section

    Description A renderable structural containment unit in a document or application. Note: section is an abstract…

  • WAI-ARIA: Role=Sectionhead
    WAI-ARIA: Role=Sectionhead

    Description A structure that labels or summarizes the topic of its related section. Note: sectionhead is…

  • WAI-ARIA: Role=Command
    WAI-ARIA: Role=Command

    A form of widget that performs an action but does not receive input data. Note:…

  • WAI-ARIA: Role=Select
    WAI-ARIA: Role=Select

    Description A form widget that allows the user to make selections from a set of…

  • WAI-ARIA: Role=Structure
    WAI-ARIA: Role=Structure

    Description A document structural element. Roles for document structure support the accessibility of dynamic web…

Share A11y Love
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=Code

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

A section whose content represents a fragment of computer code. Description A section whose content represents a fragment of computer code. The primary purpose of the code role is to inform assistive technologies that the content is computer code and thus may require special presentation, in particular with respect to synthesized speech. More specifically, screen…

WAI-ARIA: Role=Roletype

WAI-ARIA: Role=Roletype

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

The base role from which all other roles in this taxonomy inherit. Description The base role from which all other roles in this taxonomy inherit. Properties of this role describe the structural and functional purpose of objects that are assigned this role (known in RDF terms as “instances”). A role is a concept that can be used to understand…

WAI-ARIA :Role=Searchbox

WAI-ARIA :Role=Searchbox

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

A type of textbox intended for specifying search criteria.Widget role Description New in ARIA 1.1A type of textbox intended for specifying search criteria. See related textbox and search. Role=Searchbox Example HTML Example HTML Example 2 Characteristics Superclass Role Base Concept Inherited States and Properties Name From Accessible Name Required Semantic HTML No HTML element equivalent.The…

WAI-ARIA: Role=Link

WAI-ARIA: Role=Link

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

An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. Description An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See related button. If this is a native link in the host…

Leave a Reply

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