Tab group

Synonyms: Tab, tab panel

See also: Accordion , carousel

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.

Label). | Must | EN 301 549 9.3.3.2, 11.3.3.2 | | @!564 | Focus visibility | If a tab panel receives the keyboard focus, the focus indicator must be visible (see

Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 | | @!565 | Resizing | All tab panels must be perceptible and operable with a font size adjustment of up to 400% (and a resulting display width of 320 px) (see

Zoom).

Note: The tab panels can, for example,

• wrap (i.e. they are shown in several successive rows),
• be initialized with a

  menu button,

• be designed so they are scrollable horizontally (e.g. by scrollbar or two buttons).

change of context may occur.

Note: This means that when focusing on the tab panel, the focus may not be automatically placed on the tab.
It is considered permissible for the corresponding tab to be shown automatically when focusing on a tab panel, however.

Use of the pointing device). | Should | WCAG 2.2 | | @!571 | Click area | If the tab panels contain further interactive elements, their click area should total at least 24 x 24 px (see Use of the pointing device). | Should | WCAG 2.2 |

context menu, which can be initialized with SHIFT+F10 and/or with the CONTEXT MENU,

Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!573 | Role | If the tab panels contain further interactive elements, a note regarding their operability must be communicated to the Accessibility API (e.g. with the

context menu or a

keyboard shortcut). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!575 | Desktop: Element hierarchy | The parent / child relationships of the tab panels within the tab group must be communicated to the Accessibility API. | Must |EN 301 549: 11.5.2.9 | | @!576 | Status | The status of the tab panels and tabs must be communicated to the Accessibility API (see

Element status).

Note: This also applies to the tab panel status “selected” or “unselected” insofar as the corresponding tab is not automatically shown when navigating to a tab panel.

Note 1: It is recommended that the tab is given the same Accessible Name as the corresponding tab panel.

Note 2: If the tab panels and tabs have a parent label, this must also be communicated to the Accessibility API.

• 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.

• 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 role=tab.
• 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 aria-controls.
• The labeling of the tab panels should take place using text content. The bar of the tab panels and tabs can be labeled with aria-label or aria-labelledby.
• 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=0 so 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

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!