Vorhersehbar – Warum konsistente Websites Vertrauen schaffen

Bei Fokus (Level A)

Wenn ein Element den Fokus erhält, darf dies keine Kontextänderung auslösen. Kontextänderungen sind nur erlaubt, wenn der Nutzer sie explizit anfordert.

Was sind Kontextänderungen?

• Öffnen eines neuen Fensters oder Tabs
• Wechsel zu einer anderen Seite
• Signifikante Änderung des Seiteninhalts
• Verschieben des Fokus zu einem anderen Element

Problematische Beispiele:

• Ein Link öffnet automatisch ein neues Fenster, sobald er fokussiert wird
• Beim Fokussieren eines Submit-Buttons wird das Formular automatisch abgeschickt
• Der Fokus springt automatisch in ein anderes Eingabefeld
• Die Seite scrollt automatisch beim Fokussieren eines Elements

Richtige Umsetzung: Fokus allein löst keine Änderungen aus. Aktionen erfolgen erst, wenn der Nutzer explizit Enter drückt oder klickt. So kann ein Tastatur-Nutzer durch alle Elemente navigieren, ohne versehentlich Aktionen auszulösen.

Bei Eingabe (Level A)

Das Ändern von Einstellungen in UI-Komponenten darf nicht automatisch zu Kontextänderungen führen, außer der Nutzer wurde vorher über das Verhalten informiert.

Problematische Beispiele:

• Dropdown-Menü lädt sofort eine neue Seite, wenn eine Option ausgewählt wird (ohne Submit-Button)
• Radio-Button ändert sofort den Seiteninhalt bei Auswahl
• Checkbox aktiviert automatisch eine Funktion ohne Bestätigung
• Text-Eingabe löst automatisch eine Suche aus (bei jedem Buchstaben)

Richtige Umsetzung:

• Dropdown mit Submit-Button: „Land auswählen → [Weiter]-Button“
• Information vor automatischem Verhalten: „Ihre Auswahl lädt automatisch neue Inhalte“
• Explizite Bestätigung erforderlich: „Änderungen übernehmen“-Button
• Bei Auto-Complete: Nutzer muss aus Vorschlägen explizit wählen

Ausnahmen: Wenn das automatische Verhalten erwartet und üblich ist, kann es akzeptabel sein – etwa ein Schieberegler, der Live-Vorschau zeigt, oder ein Suchen-während-Tippen-Feld, wenn dies klar kommuniziert ist.

Konsistente Navigation (Level AA)

Navigationsmechanismen, die auf mehreren Seiten wiederholt werden, müssen in der gleichen relativen Reihenfolge erscheinen – außer der Nutzer initiiert selbst eine Änderung.

Was bedeutet das konkret?

• Das Hauptmenü steht auf allen Seiten an der gleichen Position
• Die Reihenfolge der Menüpunkte bleibt über alle Seiten gleich
• Footer-Links erscheinen immer in der gleichen Anordnung
• Das Suchfeld befindet sich immer am gleichen Ort
• Breadcrumbs sind konsistent positioniert

Warum ist das wichtig? Menschen lernen schnell, wo sich wichtige Navigationselemente befinden. Wenn diese auf jeder Seite woanders sind, müssen Nutzer jedes Mal neu suchen. Das kostet Zeit und Energie – besonders für Menschen mit kognitiven Einschränkungen oder Screenreader-Nutzer.

Erlaubte Änderungen:

• Nutzer kann selbst die Reihenfolge ändern (z.B. personalisiertes Menü)
• Zusätzliche Navigation auf Unterseiten (z.B. Submenü im Produktbereich)
• Kontextabhängige Aktionen (z.B. „Zurück zum Warenkorb“ im Checkout)

Konsistente Identifikation (Level AA)

Komponenten mit der gleichen Funktionalität müssen über alle Seiten hinweg konsistent identifiziert werden.

Was bedeutet das?

• Ein Suchefeld-Icon sieht überall gleich aus und heißt überall „Suche“
• Der „Warenkorb“ heißt nicht auf einer Seite „Warenkorb“ und auf der nächsten „Einkaufswagen“
• Ein „Drucken“-Button nutzt überall das gleiche Icon und die gleiche Beschriftung
• Download-Links verwenden konsistent das gleiche Symbol

Beispiele für Inkonsistenz:

• Suchfunktion: Mal Lupe-Icon, mal „Suche“-Text, mal „Finden“
• Navigation: Mal Hamburger-Menü, mal „Menü“-Button, mal Liste
• Schließen: Mal „X“, mal „Schließen“, mal „Abbrechen“

Best Practice: Erstellen Sie ein Styleguide mit festgelegten Begriffen und Icons für alle wiederkehrenden Funktionen. Dokumentieren Sie, wie bestimmte Aktionen benannt und dargestellt werden.