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

Share A11Y Love

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Similar Posts

WAI-ARIA: ROLE=FIGURE

WAI-ARIA: ROLE=FIGURE

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

A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable. Description New in ARIA 1.1 A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable….

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=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,…

Leave a Reply

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