Followed By WAI-ARIA Authoring Practices 1.1
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
Terms used to describe this design pattern include:
A set of tab elements and their associated tab panels.
A set of tab elements contained in a tablist element.
An element in the tab list that serves as a label for one of the tab panels and can be activated to display that panel.
The element that contains the content associated with a tab. When a tabbed interface is initialized, one tab panel is displayed and its associated tab is styled to indicate that it is active. When the user activates one of the other tab elements, the previously displayed tab panel is hidden, the tab panel associated with the activated tab becomes visible, and the tab is considered "active".
| key | function |
|---|---|
| tab |
- 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. |
| Right Arrow |
- Moves focus to the next tab. - If focus is on the last tab, moves focus to the first tab. - Activates the newly focused tab. |
| Left Arrow |
-Moves focus to the previous tab. -If focus is on the first tab, moves focus to the last tab. -Activates the newly focused tab. |
| Home |
Moves focus to the first tab and activates it. |
| End | Moves focus to the last tab and activates it. |
| Role | Attribute | Element | Usage |
|---|---|---|---|
| tablist | div | Indicates that the element serves as a container for a set of tabs. | |
| aria-label="" | div | Provides a label that describes the purpose of the set of tabs. | |
| tab | button |
- Indicates the element serves as a tab control.
- When focused, is automatically activated, causing its associated tabpanel to be displayed.
- Provides a title for its associated tabpanel.
|
|
| aria-selected="true" | button |
- Indicates the tab control is activated and its associated panel is displayed.
- Set when a tab receives focus.
|
|
| tabindex="-1" | button |
- Removes the element from the page Tab sequence.
- Set when a tab is not selected so that only the selected tab is in the page Tab sequence.
- Since an HTML button element is used for the tab, it is not necessary to set tabindex=0 on the selected (active) tab element.
|
|
| aria-controls="IDREF" | button |
- Refers to the tabpanel element associated with the tab.
|
|
| tabpanel | div |
- Indicates the element serves as a container for tab panel content.
- Is hidden unless its associated tab control is activated.
|
|
| aria-labelledby="IDREF" | div |
- Refers to the tab element that controls the panel.
- Provides an accessible name for the tab panel.
|
|
| tabindex="0" | div |
- Puts the tabpanel in the page Tab sequence.
- Facilitates movement to panel content for assistive technology users.
- Especially helpful if there are panels that do not contain a focusable element.
|
For the tab list:
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 page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.
moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
Activates the tab if it was not activated automatically on focus.
Moves focus to the first tab. Optionally, activates the newly focused.
Moves focus to the last tab
Move focus to the previous focus element
It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded. Otherwise, automatic activation slows focus movement, which significantly hampers users' ability to navigate efficiently across the tab list. For additional guidance, see § 6.4 Deciding When to Make Selection Automatically Follow Focus.
Down Arrow performs as Right Arrow is described above. Up Arrow performs as Left Arrow is described above. If the tab list is horizontal, it does not listen for Down Arrow or Up Arrow so those keys can provide their normal browser scrolling functions even when focus is inside the tab list.
- The element that serves as the container for the set of tabs has role tablist.
Each element that serves as a tab has role tab and is contained within the element with
role tablist. - Each element that contains the content panel for a tab has role tabpanel.
If the tab list has a visible label, the element with role tablist has
aria-labelledbyset to a value that refers to the labelling element. Otherwise, the tablist element has a label provided byaria-label. - Each element with role tab has the property
aria-controlsreferring to its associated tabpanel element. - The active tab element has the state
aria-selectedset to true and all other tab elements have it set to false. - Each element with role tabpanel has the property
aria-labelledbyreferring to its associated tab element. - If a tab element has a pop-up menu, it has the property
aria-haspopupset to either menu or true. - If the tablist element is vertically oriented, it has the property
aria-orientationset to vertical. The default value ofaria-orientationfor a tablist element is horizontal.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Mir Sujat