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 Base Components Overview Base Components Overview Design Tokens Components Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons
Interaction Design

You design the sequence of interactions with the product.

Operate everything using the keyboard

Draft a solution that can also be operated using the keyboard. Do not rely just on a mouse or on gestures. Also consider the order in which the focus should move to enable logical and convenient use.

Testing: Take away the mouse or connect an external keyboard to your phone.

Reference 1: https://www.w3.org/TR/WCAG21/#keyboard-accessible
Reference 2: https://www.w3.org/TR/WCAG21/#focus-order

Make entries comprehensible

Make as clear as possible which entries are expected from users. Put in clear labels and instructions that are always visible. Explain the problem when entries are wrong and give a warning before important actions.

Testing: Ask someone outside of the product team to explain your screen.

Reference 1: https://www.w3.org/TR/WCAG21/#headings-and-labels
Reference 2: https://www.w3.org/TR/WCAG21/#error-identification

Don’t just use colour to convey something

Ensure that colors are not the only feature that convey certain information. For example, don’t just make a link red; underline it as well.

Reference: https://www.w3.org/TR/WCAG21/#use-of-color

Create alternatives

Try to find an alternative if you come up against something that cannot be made accessible. For example, provide important information from a map in text format too.

Reference: https://inclusivedesignprinciples.org/#provide-comparable-experience

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 Cookie settings