Zur Navigation Zum Inhalt Kontakt Menu Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Interaction Design

Du gestaltest den Ablauf der Interaktionen mit dem Produkt.

Bediene alles per Tastatur

Entwirf eine Lösung, welche auch per Tastatur bedient werden kann. Verlasse dich nicht alleine auf die Bedienung mit einer Maus oder mittels Gesten. Überlege dir zudem, in welcher Reihenfolge sich der Fokus bewegen sollte um eine logische und bequeme Nutzung zu ermöglichen.

Testen: Lege die Maus weg oder schliesse eine externe Tastatur an dein Mobile an.

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

Mache Eingaben verständlich

Mache so klar wie möglich, welche Eingaben von den Nutzerinnen und Nutzern erwartet werden. Setze klare Labels und Anweisungen, welche immer sichtbar bleiben. Erkläre das Problem bei Fehleingaben und warne vor wichtigen Aktionen.

Testen: Lasse dir deinen Screen von jemandem ausserhalb des Produktteams erklären.

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

Vermittle nichts nur durch Farben

Achte darauf, dass Farben nicht das einzige Merkmal sind, welches eine Information vermittelt. Mache beispielsweise einen Link nicht einfach nur rot, sondern unterstreiche ihn zusätzlich.

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

Schaffe Alternativen

Versuche eine Alternative zu finden, falls du auf eine Funktion stösst, welche sich nicht barrierefrei umsetzen lässt. Stelle wichtige Informationen beispielsweise zusätzlich auf einer Karte in Textform zur Verfügung.

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

Impressum Kontakt Cookie Einstellungen