Navigational Tabs

Navigational Tabs group related pages or sections within the same product. Selecting a tab loads a new page or URL route, while keeping users within the overall navigation experience.

Use Cases

User should be able to:

  • Have clear labels in order to communicate with users and provide context. Labels must be persistent. The label cannot be visually hidden. Relying on color or shape alone excludes users with visual impairments or color blindness cannot perceive color or subtle changes in shape effectively. In addition, turning off the label violates WCAG 2.1 Guideline 1.3.1: Info and Relationships and WCAG 2.1 Guideline 1.4.1: Use of Color. If the progress value is only visual, screen readers cannot interpret and announce it without a an accessible label. If the progress value is
  • Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.

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
  • 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
  • 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 each navigational Tabs sequentially.
Enter/SpacebarActivates the focused navigational tab.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.