Semantics

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

Additional info from the ARIA specification

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.

Abstract Role

  • WidgetRepresents a focusable, interactive element.

Content Categories

  • Phrasing ContentAn element that typically appears inline and provides semantic meaning to text content.

Allowed Descendants

Phrasing Children Allowed

No interactive content descendants, and no descendants with a tabindex attribute specified.

Note

Children Become Presentational

Browsers automatically apply the presentation role to all descendant elements, so their semantics are not conveyed to assistive technologies.

Usage

Allowed HTML elements

Implicit semantics

These elements have the role semantics by default, without needing to set the role attribute. Reach for elements with native semantics first when choosing how to implement a role in your content.

  • input­[type=­checkbox]

Explicitly allowed

  • a­[href][role=checkbox]
  • button[role=checkbox]
  • img[role=checkbox]

Elements that can have any role

  • abbr[role=checkbox]
  • address[role=checkbox]
  • b[role=checkbox]
  • blockquote[role=checkbox]
  • canvas[role=checkbox]
  • cite[role=checkbox]
  • code[role=checkbox]
  • custom-element[role=checkbox]
  • data[role=checkbox]
  • del[role=checkbox]
  • dfn[role=checkbox]
  • div[role=checkbox]
  • em[role=checkbox]
  • figure[role=checkbox]
  • i[role=checkbox]
  • ins[role=checkbox]
  • kbd[role=checkbox]
  • mark[role=checkbox]
  • output[role=checkbox]
  • p[role=checkbox]
  • pre[role=checkbox]
  • q[role=checkbox]
  • samp[role=checkbox]
  • small[role=checkbox]
  • span[role=checkbox]
  • table[role=checkbox]
  • tbody[role=checkbox]
  • tfoot[role=checkbox]
  • thead[role=checkbox]
  • time[role=checkbox]
  • u[role=checkbox]
  • var[role=checkbox]