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
IntroductionSetting AI Agent ContextStatement
Accessibility Table of Contents
„If our mission is to be customer-driven, connected, simple, helpful and inclusive – accessibility must be part of that!“
Accessibility at Porsche What is digital accessibility When we say a digital product is accessible, we mean that its content is available to, and its functionality can be operated by, as many people as possible. For creators of digital products, it is a mistake to assume that all users can see, use a keyboard, mouse, or touch screen, and interact with page content in the same way. That assumption can lead to experiences that work well for some people but create issues ranging from minor annoyances to severe usability barriers. Accessibility refers to the experience of users who might be outside the narrow scope of the "typical" user, and who might access or interact with things differently than you expect. Specifically, we are talking about more than 15% of worldwide users who have some type of impairment or disability. For example, although we tend to centre our discussion of accessibility on users with physical impairments, we can all relate to the experience of using an interface that is not accessible to us for other reasons. Have you ever had a problem using a desktop site on a mobile phone, or seen the message "This content is not available in your area", or couldn't read a text because the font-size and contrast were too low? Those are all accessibility issues we have to face and find practical solutions for. Why it matters As maintainers of the Porsche Design System, we want to provide the best possible experience for all users, and that includes accessibility. Accessible products offer several broad benefits: Better user experience for everyone Better SEO (Search Engine Optimization) Better performance (e.g. faster loading times) Better maintainability (e.g. less code) Better compatibility (e.g. with assistive technologies) Better brand image (e.g. more trust) Better business (e.g. more customers) Better legal compliance (e.g. avoiding lawsuits) By using our components, you get all these benefits for free! We take care of the accessibility on component level, so you can focus on your business logic. Read more about this topic on our UX Platform compliance page. Meeting global accessibility standards At Porsche, we are driven by excellence, and the Porsche Design System is committed to delivering highly usable and accessible components that are not limited to certain users or use cases. To ensure that our components meet the official WCAG 2.2 AA standards, we follow a set of guidelines and best practices: Evaluate & research Before starting development of a new component, we evaluate the use cases and requirements to ensure that the component is usable and accessible for all users. We also research best practices and guidelines to ensure that the component is compliant with the latest WCAG 2.2 standards. Design & develop During the design & development phase, we follow inclusive design guidelines and integrate accessibility features wherever it makes sense (e.g. by respecting official keyboard mappings for UI components). We also ensure that the component is usable with keyboard navigation, screen readers, and other assistive technologies. Test & validate After the component is developed, it runs through a consecutive testing and validation process: Stage 1: Automated tests AXE-Core test ensures that the component is compliant with the latest WCAG 2.2 standards. Snapshot tests of the accessibility tree ensures that the component is usable with assistive technologies. High Contrast Mode visual regression tests ensure that the component is usable in high contrast mode. Text Zoom visual regression tests ensure that the component is usable with text zoomed up to 200%. RTL (Right-to-Left) tests ensure that the component is usable in right-to-left languages. Stage 2: Manual tests Keyboard Navigation tests ensure that the component is usable with keyboard navigation. Screen Reader tests ensure that the component is usable with screen readers. If you find any accessibility issue, please feel free to report it. Web Components & accessibility Technically, our components are built with Web Components to provide a true single source of truth, regardless of which framework uses them. Although Web Components are widely adopted, there are still some accessibility challenges. One example is that it is currently not possible to set IDRef relationships because of the architecture of custom elements and their scoped shadow DOM. This represents a limitation in ARIA support. However, there is an ongoing draft for a new AOM (Accessibility Object Model), which aims to address this issue and enhance JS-based accessibility support for all web components. We are continuously working to improve these existing limitations. Further information For more information on this topic and guidance on how to reduce the risk of violating country-specific laws, we highly recommend the following accessibility guidelines for your products: Accessibility of digital products at Porsche
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe 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%