Segmented Control

Segmented control are used to switch between alternative views of similar or related content.

Use cases

User should be able to:

  • Perform a single selection from two to five options
  • View clear labels and instructions
  • Navigate and interact with the component

Interaction and Style

Relevant WCAG Requirements

  • 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
  • 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
  • Reflow

    Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels; or for horizontal scrolling content at a height equivalent to 256 CSS pixels.

    WCAG 2.1 Understanding 1.4.10
  • No Keyboard Trap

    Ensure that keyboard navigation can always move focus forward and backward. This means no part of the site should 'trap' keyboard focus.

    WCAG 2.1 Understanding 2.1.2
  • 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
  • Concurrent Input Mechanisms

    Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.

    WCAG 2.1 Understanding 2.5.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
  • 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
TabFocuses on the segmented control group.
Arrow KeysNavigates between segments.
Enter/SpacebarActivates the focused segment.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.