Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageAccessibilityAPI
Accordion Table of Contents Accessibility support Keyboard Key / stateFunctionTab, Shift-TabMoves focus to the next (or previous) focusable element.Enter/SpaceWhen focus is on the accordion header, the associated panel expands or collapses. ARIA enhancements Internal ARIA that is managed by the component: ARIAUsagearia-expanded="BOOLEAN"Exposes expanded or collapsed state.aria-controls="IDREF"Exposes relationship of header and associated panel.role="region"Creates a landmark region that contains the accordion panel.aria-labelledby="IDREF"Defines the accessible name. Development considerations Focus handling The heading-tag property needs to be set in order for the accordion to fit into the outline of the page. If there is no heading-tag property provided, it defaults to h2. 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%