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.

Figure 53: Check boxes in a group
No.PropertyDescriptionClassificationReference
801ContrastThe border of the check box must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
802ContrastThe symbol which relays the “selected” and “some selected” states (check mark) must have a contrast ratio of at least 3:1 with respect to the neighboring color.MustEN 301 549: 9.1.4.11, 11.1.4.11
803LabelThe check box must have a visible label (see LabelFocus indicator
No.PropertyDescriptionClassificationReference
806Use of the keyboardIt must be possible to access, operate and exit the check box with the keyboard (see Use of the keyboard table).MustEN 301 549: 9.2.1.1, 9.2.1.2, 11.2.1.1, 11.2.1.2
807UpdatesWhen focusing and operating the check box, no unexpected change of contextUse of the pointing device

Use of the keyboard: check box

Permalink "Use of the keyboard: check box"
ActionKeyClassification
Focusing of the check boxTABRequired
Exiting the check boxTABRequired
Operation of the check box (value change)SPACERequired
Desktop: Navigating within a check box groupLEFT/UP ARROW,
RIGHT/DOWN ARROW

Note: Navigation does not change the value.

Recommended

Use of the pointing device: check box

Permalink "Use of the pointing device: check box"
ActionKeyClassification
Operation of the check box (value change)Left clickRequired
No.PropertyDescriptionClassificationReference
809RoleThe check box role must be communicated to the Accessibility API (see Accessibility APIElement statusFocus indicator

Practical tip: check box in Web applications

Permalink "Practical tip: check box in Web applications"
  • JAWS: [label] check box enabled | not enabled | partially enabled [instruction on operation with the space bar]
  • NVDA: [label] check box enabled | not enabled | partially enabled
  • Windows Narrator: [label] check box enabled | not enabled | 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

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