Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
Accessibility Statement Table of Contents Porsche is committed to digital accessibility and aims to ensure that people with disabilities have unrestricted access to our digital offerings. Our goal is to optimize the user experience for everyone by consistently implementing applicable accessibility standards. Description of Our Service The Porsche Design System is a collection of design guidelines, components, and tools that help teams create consistent, user-friendly and accessible digital products. It includes resources for visual design, interaction patterns, and accessibility standards based on WCAG 2.2 AA. How to Use Our Service in an Accessible Way Our service offers you a variety of features that support accessibility, including: Keyboard Navigation: All interactive elements can be accessed and operated using a keyboard. Screen Reader Compatibility: Our components are designed to be compatible with screen readers, providing appropriate ARIA attributes and semantic HTML. Color Contrast: We ensure sufficient color contrast between text and background to enhance readability for users with visual impairments. Responsive Design: Our components are designed to be responsive, ensuring usability across different devices and screen sizes. Focus Management: We implement proper focus management to ensure that users can navigate through interactive elements in a logical order. Customizable Settings: Users can customize certain aspects of the design system to suit their individual needs, such as font size and color schemes. Measures to support accessibility Definition of Done: Accessibility is an integral part of our Definition of Done (DoD) for all components and applications developed using the Porsche Design System. This ensures that accessibility is considered from the beginning of the development process. Documentation: Comprehensive documentation is provided to guide developers in implementing accessibility best practices when using the design system. Testing: Our application and components undergo regular testing (automated and manual) to ensure compliance with accessibility standards and to identify potential issues. Monitoring: We continuously monitor and evaluate our digital offerings to ensure they meet accessibility standards and user needs. Through regular reviews and adjustments, we ensure that our digital offerings comply with legal requirements and are continuously improved to guarantee high accessibility and security for all users. Feedback and Contact Information Do you have any questions or suggestions regarding the accessibility of our services? We are always available for you. Please contact us via the following email: info@porsche.de
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)DirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%