Guidelines
Alternate selection controls
Checkboxes are one of several selection controls, which allow users to make choices such as selecting options or switching settings on or off.
Radio buttons and toggles are alternative selection controls that can be used to enter decisions or declare preferences such as settings or dialogs.
Do not check options by default
Avoid default checked options. Users might not realise they’ve missed a question and submit an unintended answer. Pre-select checkbox options make it more likely that users:
- Will not realize they've missed a question.
- Submit a wrong answer
Label positon
Always position checkboxes to the left of their labels. This makes them easier to find, especially for users who use screen magnifiers.
Multi-select checkbox vs radio
Unlike with radio buttons, users can select multiple options from a list of checkboxes. Do not assume that users will know how many options they can select based on the visual difference between radio buttons and checkboxes.
If needed, add a hint explaining this. E.g. "Select all that apply."
Order checkbox options alphabetically by default
In some cases, it can be helpful to order checkboxes from most to least common options. E.g. "What is your nationality?" could be ordered based on population size.
Content
Checkboxes allow users to select one or more options from a list following a title or question. Keep titles or questions to one line when possible. Keep options clear and scannable so that users can read their options easily. When none of the options could apply, give users the option to choose 'none'. Having users leave checkboxes unchecked is unfavorable - as they may skip further checkbox prompts.
Tone
Use an actionable tone when writing content for checkbox titles, questions work well. The checkbox options or labels should be in a neutral tone.
Do
- Keep checkbox labels short and clear.
- Use sentence case for checkbox titles and labels.
Do not
- Include punctuation after checkbox labels.
Accessibility
Keyboard
- Users can navigate to and between checkbox inputs by pressing Tab or Shift-Tab on their keyboard. Users can trigger a state change by pressing Space while the checkbox input is in focus.
- A tri-state checkbox that is partially checked (indeterminate) has aria-checked set to "mixed".
- See the ARIA authoring practices for more considerations.
- The <legend> provides a description for the grouping.
- Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with a group of checkboxes.
- WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. In option #2 the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the ID for text that will serve as the label for the group. Note: This method is not supported by all browser/AT devices.
WCAG 2.1 Guidelines
1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA)
3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A)
4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)