Zur Navigation Zum Inhalt Kontakt Menu Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Roadmap Overview Base Informationen Overview Base Components Sense & Purpose Community Assets Instructions App Icons Power-Apps Digital banner ads SAP Design Guidelines Development

You implement the product.

Use semantically correct elements

Always use semantically correct elements to support assisting technologies as much as possible. Distinguish all types of headlines, lists, tables etc. with the appropriate elements and set the correct language for your document.

Help for correct semantics: https://www.accessibility-developer-guide.com/examples

Reference 1: https://www.w3.org/TR/WCAG21/#info-and-relationships
Reference 2: https://www.w3.org/TR/WCAG21/#language-of-page

Use standard elements

Both in HTML and in mobile apps, native elements save you a great deal of hassle. The elements are already optimised in terms of accessibility; otherwise their entire behaviour must be recreated. Tell this to your designer too if they are insisting on something.

Help for typical non-native elements: https://inclusive-components.design

Reference: https://www.w3.org/TR/WCAG21/#name-role-value

Ensure correct linearization

Make sure that content is not only sensibly arranged visually, but also in the code. Try to make everything understandable if someone navigates from top to bottom through the document without CSS styling.

Testing: Switch off the CSS in the browser or use the screen reader on the phone.

Reference: https://www.w3.org/TR/WCAG21/#meaningful-sequence

Support orientation

At the start of a page, build in skip links and use different landmark elements. These two tools help users, particularly those with screen readers, to jump directly to the different parts of the content.

Help on skip links: https://webaim.org/techniques/skipnav
Overview of landmark elements: https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/

Reference: https://www.w3.org/TR/WCAG21/#bypass-blocks
Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Data privacy Cookie settings