WAI-ARIA: Role=Checkbox • Digital A11y

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.

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

aria-atomic
aria-busy (state)
aria-controls
aria-current (state)
aria-describedby
aria-details
aria-disabled (state)
aria-dropeffect
aria-errormessage
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-keyshortcuts
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-roledescription

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

W3C (opens new window)