Accessibility guidelines
Introduction
Accessibility ensures that products and services are usable by as many people as possible, including those with disabilities. This section of the Design System Documentation outlines the guidelines for creating accessible digital products in adherence to the WCAG 2.1 AA * standards, as well as compliance with upcoming legislation such as Germany's Barrierefreiheitsstärkungsgesetz * (Accessibility Strengthening Act), which takes effect on 28.06.2025.
For verifying the accessibility conformity, it's recommended to use lighthouse * or similar tests.
General principles
- Perceivable: Information and user interface components must be presentable to users in ways they can perceive. This includes text alternatives for non-text content, captions for videos, and adaptable presentation of content.
- Operable: Interface components and navigation must be operable by all users. Ensure all functionality is available from a keyboard and provide sufficient time for users to read and use content.
- Understandable: Information and operation of the user interface must be understandable. Text content should be readable and understandable, and web pages should appear and operate in predictable ways.
- Robust: Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies. This includes ensuring compatibility with current and future tools.
Specific Guidelines
- Keyboard accessibility: All interactive elements should be navigable using a keyboard.
- Screen reader support: Use semantic HTML and ARIA labels to ensure screen readers can accurately convey the purpose and function of each element.
- Color and contrast: Adhere to the minimum contrast ratios * to ensure readability by users with low vision. Don't rely on color as a distinguishing feature.
- Focus indicators: Provide clear and visible focus indicators for interactive elements.
- Alternative text: Offer alternative text for images that conveys the purpose or function of the image.
- Resizable text: Ensure text can be resized up to 200% without loss of content or functionality.
- Subtitles and transcription: If sound is necessary for operation or understanding, offer an alternative, such as subtitles and transcriptions.
- Consistent navigation: Maintain consistent navigation across the system for predictability.
- Error identification: Clearly identify input errors and provide suggestions for correction.
- Language identification: The language of each web page can be programmatically determined.
Implementation and validation
- Automated testing: Where applicable, accessibility should be verified in automated unit and integration tests to identify and resolve problems early in development.
- Manual testing: Accessibility issues must be part of the acceptance criteria in the SCRUM process. Thorough testing with different user groups, including people with disabilities, should be conducted along with usability and UX testing of the entire application.
- Test guidelines: Following our testing policy and a continuous communication with our testing team is key to achieving accessible products.
- Continuous learning: Stay informed on evolving accessibility standards and practices to ensure ongoing compliance and improvement.
Legal compliance
- WCAG 2.1 AA: Our Design System follows the WCAG 2.1 AA guidelines, which set the global standard for web accessibility and are the basis for both international and national laws.
- Barrierefreiheitsstärkungsgesetz: For services and products in Germany, ensure compliance with the Barrierefreiheitsstärkungsgesetz which requires accessible design for a variety of digital products and services after 28.06.2025.