Design and Visuals

Ensure high contrast and clear visual cues for all users.

Guide to Building an Accessible Web Component Tabs Widget (WCAG 2.2)

A Tab widget allows users to navigate between different sections of content within the same page context. For users with disabilities, particularly those using screen readers or keyboard navigation, specific ARIA roles and keyboard behaviors are required to make this component "understandable" and "operable.".

1. Design and Visuals (Perceivable)

The visual design must communicate the relationship between the tabs and their panels without relying solely on color

Color Contrast (WCAG 1.4.3)

  • Text vs background contrast ratio ≥ 4.5:1 (normal text) or ≥ 3:1 (large text)
  • Focus indicators (e.g., outline, underline, background change) must meet 3:1 contrast ratio
  • Use a visible border to indicate active/selected tabs, this provides a non-color cue (shape/connection) to indicate which tab is active
  • Focus Appearance (WCAG 2.4.13): Ensure all interactive elements have a visible focus indicator, [role="tab"]:focus-visible rule. It uses a high-contrast 4px outline and outline-offset. This ensures keyboard users can clearly see where they are

Touch Targets (WCAG 2.5.5)

  • Each tab has a min-height: 48px, exceeding the minimum 24px requirement to ensure users with motor impairments can easily tap them.

Responsive Behavior (WCAG 1.4.10)

  • Desktop: Horizontal tab, Mobile: Vertical tab
  • Menus must reflow correctly at zoom up to 400%

2. Keyboard Usability (Operable)

All tabs items functionality must be operable with a keyboard alone. Users must be able to perform every action a mouse user can.

Standard Interaction Pattern

  • Tab / Shift + Tab: Moves focus into the tablist to the active tab, or moves focus back to the previous interactive element.
  • Enter or Space: Activates the focused tab, displaying its corresponding panel and hiding others.
  • Arrow Keys (Up, Down, Left, Right): Moves focus between the different tabs in the list (circular navigation), this is a best practice for complex tabs
  • Escape: Closes the currently open submenu and returns focus to the button that opened it

Key Principles

  • Logical Focus Order (WCAG 2.4.3): The focus should move through the tab items in a logical and predictable order.

3. Screen Reader & Assistive Technology (Understandable & Robust)

For a screen reader, a "Tab" isn't just a button—it's a specific UI pattern that changes the page content dynamically.

ARIA Roles, Properties, and States

  • role="tablist": Identifies the container for the set of tabs.
  • role="tab": Identifies the element that controls the visibility of a panel.
  • aria-selected="true/false": Communicates which tab is currently "active" to the screen reader.
  • aria-controls="ID": Programmatically links the tab to the specific role="tabpanel" it opens.
  • role="tabpanel": The container for the content.
  • aria-labelledby="ID": Links the panel back to its tab, giving the panel an accessible name (e.g., "Design Panel").
  • tabindex="-1": Used on the tabpanels in your code so that when JavaScript calls
  • targetPanel.focus(): the screen reader begins reading the content immediately.