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 Label).MustEN 301 549 9.3.3.2, 11.3.3.2
804LabelThe label of the check box should be on the right-hand side of the check box.ShouldDIN EN ISO 9241-125: 5.1.15
805Focus visibilityIf the check box receives the keyboard focus, the focus indicator must be visible (see Focus indicator).MustEN 301 549: 9.2.4.7, 11.2.4.7
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 context may occur.

Note: This means that no loss of focus must occur during or after the operation of the check box.

MustEN 301 549: 9.3.2.1, 9.3.2.2, 11.3.2.1, 11.3.2.2
808Click areaThe click area of the check box should be at least 24 x 24 px (see Use of the pointing device).

Note: It should be possible to operate the check box by both clicking on the check box and clicking on the label (see Use of the pointing device).

ShouldWCAG 2.2

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 API).MustEN 301 549: 9.4.1.2,11.4.1.2, 11.5.2.5
810ValueThe value of the check box (selected, partially selected, not selected) must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7
811StatusThe status of the check box must be communicated to the Accessibility API (see Element status).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
812NameThe check box must have a concise and expressive Accessible Name.MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8
813NameIf the check box has a description, it must be communicated as an Accessible Description.MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
814OperationIt must be possible to access, operate and exit the check box with assistive technology (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
815UpdateUpdates concerning the name, value or status of the check box must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
816Desktop: PositionThe size and position of the check box must be communicated to the Accessibility API (see Focus indicator).MustEN 301 549: 11.5.2.5, 11.5.2.13

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!