rolecheckbox

Rolecheckbox, in web accessibility often described as the ARIA role role="checkbox", denotes a selectable toggle on non-native elements. It is used for custom widgets where a native input element cannot be used or where a specific visual design is required. The control communicates its state to assistive technologies through the aria-checked attribute, which may be true, false, or mixed to indicate an indeterminate state.

Accessibility and interaction guidelines emphasize keyboard operability: the element should be focusable (tabindex="0") and activatable via Space or Enter, in addition to mouse or touch input. When the user toggles the control, the underlying state must be updated and the aria-checked attribute refreshed accordingly. For tri-state controls such as a “Select all” feature, aria-checked="mixed" represents the indeterminate state.

Compared with a native input type=checkbox, the role="checkbox" approach relies on ARIA to convey state and behavior, so developers must implement proper focus management, labeling, and state synchronization with the underlying data model. If the control is disabled, use aria-disabled and ensure keyboard input is ignored.

Common pitfalls include failing to implement keyboard activation, not updating aria-checked consistently, or providing insufficient labeling. The role is broadly supported by modern screen readers, but testing across target assistive technologies is recommended. In practice, rolecheckbox is a suitable solution for accessible, custom-styled checkboxes when native controls do not meet design or interaction requirements.