Check box

Synonyms: Control box, control field, selection box

See also: Toggle switch, switch, radio buttons, selection list with multiple selection

A check box serves the selection of the options “selected” or “not selected” (see DIN EN ISO 9241-161: 8.4). A check box can also relay the status of a subordinate check box group (“all selected”, “none selected” or “some selected”).

A check box consists of a square frame and an indicator (check mark) which indicates whether the check box has been selected, has not been selected, or whether some of the subordinate group have been selected.

• JAWS: [label] check box checked | not checked | partially checked [instruction on operation with the space bar]
• NVDA: [label] check box checked | not checked | half checked
• Windows Narrator: [label] check box checked | unchecked | indeterminate

The check box should be implemented with the HTML element <input type=checkbox>.

The initially selected status is set with the checked attribute. The “some selected” state can only be set using JavaScript with the indeterminate=true characteristic.

The labeling of the check box should be linked to the check box using the <label for=ID> element in order to expand the click area of the check box by its label.

A check box can be marked as disabled (disabled), but not as read-only (readonly).

A check box can be marked as a required field with required. This is only useful in cases where the check box has to be submitted in the “selected” (checked) status. However, if at least one check box in a group of check boxes must be selected, the check box should not be marked with required, but the required field label should be implemented in the group. As the group cannot be marked with required, the required field label should be in text form (e.g. an asterisk within the group label).

Check boxes that belong together should be positioned within a labeled Form field group. The <fieldset> element is used for the group and the <legend> element is used for the group label.

Error messages that do not relate to a single check box but to the check box group should not be linked to each individual check box but to the group.

Further information: 4.10.5.1.15 Checkbox state (type=checkbox) - HTML Standard (whatwg.org)

If the check box is not implemented with the HTML element, it is also necessary to take account of the following:

• The role is communicated with role=checkbox.
• The status is communicated with aria-checked=true|false|mixed and must be updated during the operation.
• The labeling can take place by text content or aria-labelledby.
• The check box can be marked as read-only with aria-readonly.
• The presentation of the check box should be verified in Windows High Contrast mode.
• The visible check box and the programmatically focused element should have the same position and size.

Further information: checkbox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Checkbox Pattern | APG | WAI | W3C

Information about this article

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!