Keyboard interactions
There are two possible behaviors for manipulating tabs with the keyboard: manual or automatic activation. Typically, manual activation of tabs is only necessary when content cannot be displayed instantly (i.e., not all the panel content is present in the DOM.) For additional guidance, see Deciding When to Make Selection Automatically Follow Focus.
Option 1: Manual activation
Key
Interaction
Tab
Moves focus into the tabs component and places focus on the selected tab item. If the tabs component is already in focus, moves focus to the next element in the page tab sequence.
Left Arrow
Moves focus to the previous tab item. If focus is on the first tab item, moves focus to the last tab item.
Right Arrow
Moves focus to the next tab item. If focus is on the last tab item, moves focus to the first tab item.
Space or Enter
Activates the tab item in focus.
Home (optional)
Moves focus to the first tab item.
End (optional)
Moves focus to the last tab item.
Delete (optional)
When deletion is allowed, Delete closes the currently activated tab item. If any tab items remain, moves focus to the tab item following one that was closed.
Option 2: Automatic activation
Key
Interaction
Tab
Moves focus into the tabs component and places focus on the selected tab item. If the tabs component is already in focus, moves focus to the next element in the page tab sequence.
Left Arrow
Moves focus to the previous tab item and automatically activates it. If focus is on the first tab item, moves focus to the last tab item.
Right Arrow
Moves focus to the next tab item and automatically activates it. If focus is on the last tab item, moves focus to the first tab item.
Home (optional)
Moves focus to the first tab item and automatically activates it.
End (optional)
Moves focus to the last tab item and automatically activates it.
Delete (optional)
When deletion is allowed, Delete closes the currently activated tab item. If any tab items remain, moves focus to and activates the tab item following one that was closed.
Cursor guidelines
Cursor
Usage
Pointer
Use the pointer cursor for interactive elements including tabs.
WCAG 2.2 compliance
Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.
1 . Perceivable
Requirement
Criterion
Level
Compliance
Non-text content
A
Non-text elements, such as icons used in tabs, must provide a text alternative that communicates the tab's purpose. All tabs, especially icon-only tabs, need an accessible name (for example, via a title, aria-label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
A, AAA
Tabs should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.
Resize text
AA
Tabs should be built in such a way that they can be resized without assistive technology up to 200%.
Visual presentation
AAA
The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.
Non-text contrast
AA
The visual presentation of icons and various states have a contrast ratio of at least 3:1.
2 . Operable
Requirement
Criterion
Level
Compliance
Keyboard
A, AAA
All functionality of the component is operable through a keyboard without specific timing for keystrokes.
Seizures and physical reactions
A, AAA, AAA
There is no flashing content or unnecessary motion or animation in this component.
Focus order
A
Navigation sequences receive focus in an order that preserves meaning and operability.