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.

Label). | Must | EN 301 549 9.3.3.2, 11.3.3.2 | | @!804 | Label | The label of the check box should be on the right-hand side of the check box. | Should | DIN EN ISO 9241-125: 5.1.15 | | @!805 | Focus visibility | If the check box receives the keyboard focus, the focus indicator must be visible (see

Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7

change of context may occur.

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

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).

Accessibility API). | Must | EN 301 549: 9.4.1.2,11.4.1.2, 11.5.2.5 | | @!810 | Value | The value of the check box (selected, partially selected, not selected) must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7 | | @!811 | Status | The status of the check box must be communicated to the Accessibility API (see

Element status). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!812 | Name | The check box must have a concise and expressive Accessible Name. | Must | EN 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 | | @!813 | Name | If the check box has a description, it must be communicated as an Accessible Description. | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!814 | Operation | It must be possible to access, operate and exit the check box with assistive technology (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 | | @!815 | Update | Updates concerning the name, value or status of the check box must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 | | @!816 | Desktop: Position | The size and position of the check box must be communicated to the Accessibility API (see

Focus indicator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 |

• 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

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

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