Tab Panel

Success Criteria:

Description Tab buttons describe their purpose
Role Elements identify as tabgroup, tabs, and tabpanels.
Relationships Panels are labeled by its tab
State Tabs express when they are selected.
Focus The tablist is visibly focusable with the tab key / arrow keys / swipe
Action Enter, space, arrow keys, home, end / double tap

Keyboard & Screenreader Support

Tab / swipe When focus moves into the tab list, places focus on the active tab element. When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element.
Enter, Space / double tap When a tab has focus, activates the tab, causing its associated panel to be displayed.
Right Arrow When a tab has focus: Moves focus to the next tab. If focus is on the last tab, moves focus to the first tab.
Left Arrow When a tab has focus: Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab.
Home When a tab has focus, moves focus to the first tab.
End When a tab has focus, moves focus to the last tab.

Custom Element

No native element exists for a tab control; you will need to use a mixture of native and custom elements and script in behavior.

Description

  • Inner text of tab button should describe its purpose

Role Requires extra work

  • role="tablist" for group
  • role="tab" for navigation items
  • role="tabpanel" for panels

Relationships Requires extra work

  • aria-controls="tabpanel-id" for buttons
  • aria-labelledby="button-id" for panels

State Requires extra work

  • aria-selected="true/false"

Focus Requires extra work

  • The tablist is visibly focusable with the tab key
  • The tabs are visibly focusable with the left/right arrow keys
  • The tabpanels are visibly focusable with the tab key

Actions Requires extra work

  • tab / arrow keys / swipe / focus tabs
  • enter / double tap selects tab panel
  • home
  • end