Input (checkbox)

Referred HTML Tags

<input type="checkbox" />

Accessible name

Any interactable HTML element requires an accessible name. This is the name that's announced or displayed by assistive technologies. Traditionally, input elements get their accessible name from a dedicated labeling element (e.g. <label>) that’s linked to the input element by its id name.

1<label for="check_terms">I Agree</label>
2<input type="checkbox" id="check_terms" />

However, if you don’t want to use a visual label or are constrained from using the <label> element, input elements can get their accessible name from labeling attributes as well (e.g. aria-label). Note that you should not depend on a placeholder attribute as an accessible name since not all screen readers read it when the input field is not empty. learn more about accessible names here

Visual focus indicator

Any interactable HTML element must have a discernible focus indication. People who use only the keyboard or other sequential navigation devices must get an indication of the currently active item. Unlike mouse users who point and click directly on elements or screen reader users who receive a voice prompt about the active element, keyboard users depend on a visual indication that marks the active element. Most user agents have a default focus indicator. The author's responsibility is to provide an alternative focus indication if the default one is overriding. Note that focus indication must not be uttered only by a change of color as a visually impaired or color blind person may find it difficult to distinguish. The visual focus indicator is particularly important for text inputs as it signals the user when he can type into the input field.

Equivalent WAI-ARIA Role

role="checkbox"

Required properties/attributes/context

Ensure that the element is focusable
Ensure that the element has an accessible name
The checkbox element must have an aria-checked attribute that accepts true/false values. If an aria-checked is not set, the element will be registered to the accessibility tree with a “false”default value.
On a “disabeled” state:
- Ensure that the element is not focusable
- Ensure the element has an aria-disabeled=”true” attribute.

Semantics Enhancements

These are WAI-ARIA attributes and patterns that support common specific use cases of the element.

role=”menuitemcheckbox”

The menuitemcheckbox is a two states menu item Besides all the attributes required from a normal checkbox, elements with menuitemcheckbox role must be contained (as direct children) within elements with a role=”menu” or role=”menubar” attribute.

Switch

role=switch

The switch role provides the same functionality as a checkbox, but makes it possible for assistive technologies to present the widget in a fashion consistent with its on-screen appearance. The switch role does not require any additional attributes besides those required from a normal checkbox.