Synonyms: Tab, tab panel
Tab groups are used to group and alternately display page areas (see DIN EN ISO 9241-161: 8.43).
A tab group consists of several tabs, the contents of which are displayed on an alternate basis. Each tab has an tab panel with a label which is displayed all the time. The individual tabs are selected using the tab panels. The tab panels are usually arranged horizontally above the tabs. Tab panels can contain interactive elements, such as buttons for removing the tab panel and the corresponding tab.
|The label of the tab panel must have a contrast ratio of at least 4.5:1 with respect to the background.
|EN 301 549: 126.96.36.199, 188.8.131.52
|The marking of the selected tab panel must have a contrast ratio of at least 3:1 with respect to the background and/or with respect to the presentation of the unselected tab panel.
|EN 301 549: 184.108.40.206, 220.127.116.11, 18.104.22.168, 22.214.171.124
|If the tab panels and the tabs are only identifiable as such on the basis of their color design, these colors must have a contrast ratio of at least 3:1 with respect to the neighboring colors.
Note 1: A tab might be recognizable as an interactive element on the basis of its border or its background color, for example.
Note 2: The requirement does not apply if the tab or the tab panel are clearly identifiable as such, because of their position, for example.
|EN 301 549: 126.96.36.199, 188.8.131.52
|Each tab panel must have a visible label (see LabelFocus indicatorZoom
|EN 301 549: 184.108.40.206, 220.127.116.11
|Use of the keyboard
|It must be possible to access, operate and exit the tab panels with the keyboard (see Use of the keyboard table, below).
|EN 301 549: 18.104.22.168, 22.214.171.124, 126.96.36.199, 188.8.131.52
|Use of the keyboard
|If the tab panels contain other interactive elements, it must be possible to use these with the keyboard.
|EN 301 549: 184.108.40.206, 220.127.116.11
|Use of the keyboard
|The hidden tab fields and their contents must not receive keyboard focus.
|EN 301 549: 18.104.22.168, 22.214.171.124, 126.96.36.199, 188.8.131.52
|When the tab panels are focused and navigated through, no change of context
It is considered permissible for the corresponding tab to be shown automatically when focusing on a tab panel, however. -@
|EN 301 549: 184.108.40.206, 220.127.116.11
|The click area of the tab panels should be at least 24 x 24 px (see Use of the pointing device
Use of the keyboard: tab groupPermalink "Use of the keyboard: tab group"
|Focusing of the selected tab panel
|Exiting the tab panel and navigating to the first element of the selected tab
|Navigating within the list of tab panels
|Quick navigation to the first and/or last tab panel
|Switch between tabs (if the focus is in a tab)
|Showing of the selected tab
|ENTER, SPACE, or automatically when navigating through the list of tab panels
|Operation of interactive elements within the tab panel
|The interactive elements within tab panels do not receive keyboard focus separately. The operation takes place
Use of the pointing device: tab groupPermalink "Use of the pointing device: tab group"
|Showing a tab
|Left click on the corresponding tab panel
|Enabling of interactive elements within the tab panels
|Left click on the element
|The tab panel and tab role must be communicated to the Accessibility API (see Accessibility APIcontext menukeyboard shortcutElement status
Practical tip: tab groups in Web applicationsPermalink "Practical tip: tab groups in Web applications"
Screen reader output for tab panelPermalink "Screen reader output for tab panel"
- JAWS: [label of the tab bar] tab [label of the tab panel] tab [ | selected] [position] of [amount]
- NVDA: [label of the tab bar] tab [label of the tab panel] tab [ | selected] [position] of [amount]
- Windows Narrator: [label of the tab bar] tab [label of the tab panel] tab element [position] of [amount] [ | selected]
Note: JAWS and NVDA output “tab” twice, first for the
tablist role and then for the
tab role. Only Windows Narrator distinguishes between the two roles. The output for the
tab role would be sufficient.
Screen reader output for tabsPermalink "Screen reader output for tabs"
- JAWS: -
- NVDA: -
- Windows Narrator: [label] tab panel … end [label] tab panel
Note: With JAWS and NVDA, the start and end of the tab is not perceptible. The tabs or content after this should be labeled as regions, so that which specific content is located inside and outside the tabs is perceptible with the screen reader.
There is no element for tab groups in HTML. Instead, the following can be used:
- Allocation of the information to different pages that are linked with each other,
- Accordion ,
- Use of the corresponding ARIA roles.
With tab groups, the following should be taken into account:
- The tab panel bar is marked with
role=tablist, while the individual tab panels that are located inside the bar as child elements are marked with
- The tab panel bar may not contain any elements apart from the tab panels.
- If the tab panels contain other control elements besides their labeling, it should be noted that these are imperceptible and not operable with the assistive technology. These elements should not be able to receive the keyboard focus. An alternative form of operation should be implemented and documented instead. If the tab panels contain a button for removing a tab, it is possible for the deletion to be enabled with the DELETE key.
- The tab panels are marked with
role=tabpanel. The tabs are located in the source code immediately after the area which is marked with
role=tablist. Due to this and the preceding reason, a tab group may not be used for accordions.
- The active tab panel, the tab of which is visible and which receives the focus with TAB, is marked with
aria-selected=true. All of the other tab panels are marked with
aria-selected=false. Reference can be made to the ID of the tab from the tab panel using
- The labeling of the tab panels should take place using text content. The bar of the tab panels and tabs can be labeled with
- A non-standard vertical orientation of the tab bar can be specified with
aria-orientation=vertical. Frequently, the orientation is not output by the assistive technology, so that with a vertically oriented tab bar, operation with all arrow keys should be possible.
- The tab bar should also be visually recognizable as such, so that sighted keyboard users are able to recognize the operation with the arrow keys.
- The tab group should contain at least two tabs.
- The tab panels can be marked as disabled with
aria-disabled. It is recommended that disabled tab panels are left in the keyboard accessibility with the arrow keys.
- The selected tab (
role=tabpanel) can be marked as
tabindex=0so that it receives the focus after the active tab panel, even if a specific tab is not a control element.
- The presentation of the tab group should be verified in Windows High Contrast mode. In this respect, the tab panels and tabs should have a border and the visual indicator for the active tab panel should not just be conveyed with color.
- The visible tab panels and the programmatically focused elements should have the same position and size.
Further information: tab role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), tablist role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), tabpanel role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Tabs Pattern | APG | WAI | W3C
Information about this article
You are welcome to send feedback by email about our handout!