Checkbox

Checkboxes allow users to select one or more items from a predefined list of independent options.

Use Cases

Users should be able to:

  • Use checkbox to perform a selection of one or more items from predefined list
  • Navigate and interact with checkbox component leveraging assistive technology
  • Select one or multiple checkboxes
  • Should be able to get appropriate feedback based on input type documented under interactive style

Interaction and Style

Relevant WCAG Requirements

  • Non-text Content

    Provide text alternatives for all non-text content. This includes images, buttons, form inputs, maps, etc. Text alternatives allow screen readers to describe these elements to visually impaired users.

    WCAG 2.1 Understanding 1.1.1
  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1
  • Sensory Characteristics

    Instructions do not rely solely on sensory characteristics such as shape, size, visual location, orientation, or sound. This means that users with sensory disabilities can still understand the content.

    WCAG 2.1 Understanding 1.3.3
  • Use of Color

    Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

    WCAG 2.1 Understanding 1.4.1
  • Non-Text Contrast

    The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components, Graphical Objects.

    WCAG 2.1 Understanding 1.4.11
  • Keyboard

    Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.

    WCAG 2.1 Understanding 2.1.1
  • Keyboard (No Exception)

    All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

    WCAG 2.1 Understanding 2.1.3
  • Focus Order

    If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

    WCAG 2.1 Understanding 2.4.3
  • Headings and Labels

    Headings and labels describe topic or purpose.

    WCAG 2.1 Understanding 2.4.6
  • Focus Visible

    Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

    WCAG 2.1 Understanding 2.4.7
  • Pointer Gestures

    All functionality requiring multipoint or path-based gestures has a single-pointer alternative...

    WCAG 2.1 Understanding 2.5.1
  • Target Size

    The size of the target for pointer inputs is at least 44 by 44px.

    WCAG 2.1 Understanding 2.5.5
  • Labels or Instructions

    Labels or instructions are provided when content requires user input.

    WCAG 2.1 Understanding 3.3.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.

    WCAG 2.1 Understanding 4.1.2

Keyboard Navigation

KeyAction
TabFocus visibly moves to the checkbox
SpacebarToggles the checkbox between states

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.