Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageAccessibilityAPI
Tabs Table of Contents Accessibility support Keyboard Key / stateFunctionTab- Moves focus to the active tab.
- When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element.Right Arrow, Left Arrow- Moves focus to the next tab.
- Activates the newly focused tab.
- If focus is on the last tab, moves focus to the first tab.Home, End- Moves focus to the first/last tab and activates it. ARIA enhancements Internal ARIA that is managed by the component: ARIAUsagerole="tablist"Indicates that the element serves as a container for a set of tabs.role="tab"Indicates the button serves as a tab control.role="tabpanel"Indicates the tabs-item serves as a container for tabpanel content.aria-label="STRING"Adds accessible name to the tabs-item.aria-selected="BOOLEAN"Indicates the tab is selected/deselected and its associated tabpanel is visible/hidden. Limitations Due to the nature of Web Components and shadowDOM, there are limitations in the usage of some ARIA attributes if they try to set relationship between elements in different shadowDOM's or shadowDOM/lightDOM combinations. ARIASupportaria-controls🚫 Tests Automated TechnologySupportAXE-Core (WCAG 2.2 AA, Best-Practice)✅High-Contrast Mode (light/dark)✅Text-Zoom (200%)✅ Manual TechnologySupportKeyboard✅Screen reader (VoiceOver, NVDA)✅
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionChanges the direction of HTML elements, mostly used on<html> tag to support languages which are read from right to left like e.g. Arabic.LTR (left-to-right)RTL (right-to-left)AutoText ZoomChanges the text size and values with unit rem or em relatively. This setting can be defined in browser settings for any website or by an application itself on<html> tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%.100%130%150%200%