Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

aria-checked state is used when the current state of elements such as checkboxes, radio buttons needs to be intimated to the user. On standard browsers, operating systems and screen reader combinations this state can be intimated with the HTML semantics. If this information cannot be received by the screen reader, aria-checked can be used in the mark-up. The standard HTML checkbox exposes only two possible values "checked" (true) and "unchecked" (false), but aria-checked has three possible values.

• aria-checked="true" indicates the element is checked state.
• aria-checked="false" indicates the element is in unchecked state.
• aria-checked="mixed" indicates partial check for elements that have tri states.

How to use aria-checked

In HTML mark-up, aria-checked can be coded as follows:

<label for=”male”>Male</label>
<input type=”checkbox” id=”male” role=”checkbox” aria-checked=”true” />

The aria-checked attribute can also be called via  JavaScript.

object.setAttribute(“aria-checked”,value);var value = object.getAttribute(“aria-checked”);

The mixed value is not supported on radio or menuitemradio or any element that inherits from these in the taxonomy, and user agents must treat a mixed value as equivalent to false for those roles.

Note  For cross-browser compatibility, always use the aria attribute syntax to access and modify aria properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-checked="p" ... >
JavaScript
object.setAttribute("aria-checked",value);var value = object.getAttribute("aria-checked");