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.

Figure 37: Tab group

Presentation

Permalink "Presentation"
No.PropertyDescriptionClassificationReference
560ContrastThe label of the tab panel must have a contrast ratio of at least 4.5:1 with respect to the background.MustEN 301 549: 9.1.4.3, 11.1.4.3
561ContrastThe 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.MustEN 301 549: 9.1.4.1, 11.1.4.1, 9.1.4.11, 11.1.4.11
562ContrastIf 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.

MustEN 301 549: 9.1.4.11, 11.1.4.11
563LabelEach tab panel must have a visible label (see Label).MustEN 301 549 9.3.3.2, 11.3.3.2
564Focus visibilityIf a tab panel receives the keyboard focus, the focus indicator must be visible (see Focus indicator).MustEN 301 549: 9.2.4.7, 11.2.4.7
565ResizingAll 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).

MustEN 301 549: 9.1.4.10, 11.1.4.10

Operation

Permalink "Operation"
No.PropertyDescriptionClassificationReference
566Use of the keyboardIt must be possible to access, operate and exit the tab panels with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
567Use of the keyboardIf the tab panels contain other interactive elements, it must be possible to use these with the keyboard.MustEN 301 549: 9.2.1.2, 11.2.1.2
568Use of the keyboardThe hidden tab fields and their contents must not receive keyboard focus.MustEN 301 549: 9.1.3.1, 11.1.3.1, 9.2.4.3, 11.2.4.3
569UpdatesWhen the tab panels are focused and navigated through, no 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.

MustEN 301 549: 9.3.2.1, 11.3.2.1
570Click areaThe click area of the tab panels should be at least 24 x 24 px (see Use of the pointing device).ShouldWCAG 2.2
571Click areaIf the tab panels contain further interactive elements, their click area should total at least 24 x 24 px (see Use of the pointing device).ShouldWCAG 2.2

Use of the keyboard: tab group

Permalink "Use of the keyboard: tab group"
ActionKeyClassification
Focusing of the selected tab panelTABRequired
Exiting the tab panel and navigating to the first element of the selected tabTABRequired
Navigating within the list of tab panelsDesktop:
  • UP/DOWN/RIGHT/LEFT ARROW
  • CTRL+TAB

Web:
UP/DOWN/RIGHT/LEFT ARROW		Required
Quick navigation to the first and/or last tab panelPOS1, ENDRecommended
Switch between tabs (if the focus is in a tab)CTRL+TABRecommended
Showing of the selected tabENTER, SPACE, or automatically when navigating through the list of tab panelsRequired
Operation of interactive elements within the tab panelThe interactive elements within tab panels do not receive keyboard focus separately. The operation takes place
  • using either the context menu, which can be initialized with SHIFT+F10 and/or with the CONTEXT MENU,
  • or through a keyboard shortcut documented in the application and the Help option, such as DELETE in order to remove the tab panels and the corresponding tabs.
Required

Use of the pointing device: tab group

Permalink "Use of the pointing device: tab group"
ActionKeyClassification
Showing a tabLeft click on the corresponding tab panelRequired
Enabling of interactive elements within the tab panelsLeft click on the elementRequired

Programming/interfaces

Permalink "Programming/interfaces"
No.PropertyDescriptionClassificationReference
572RoleThe tab panel and tab role must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
573RoleIf 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).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
575Desktop: Element hierarchyThe parent / child relationships of the tab panels within the tab group must be communicated to the Accessibility API.MustEN 301 549: 11.5.2.9
576StatusThe 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.

MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
577NameThe tab panels must have a concise and expressive Accessible Name.

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.

MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5
578NameIf the tab panel has a description, it must be communicated as an Accessible Description.MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
579OperationIt must be possible to access, operate and exit the tab panels with assistive technology (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
580OperationIf the tab panels contain other interactive elements, it must be possible to use these with assistive technology (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
581UpdateUpdates concerning the Accessible Name or status of the tab panels must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
582Desktop: PositionThe size and position of the tab panels and tabs must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 11.5.2.5, 11.5.2.13

Practical tip: tab groups in Web applications

Permalink "Practical tip: tab groups in Web applications"

Screen reader output for tab panel

Permalink "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 tabs

Permalink "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.

HTML

Permalink "HTML"

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.

ARIA

Permalink "ARIA"

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), tablist role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), tabpanel role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Tabs Pattern | APG | WAI | W3C

Information about this article

Date:
21.10.2024
License:
CC-BY-SA 4.0
Version:
1.0

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