Barrierefreiheit
03 / Tastatur, Fokus & Touch
Kernfrage
Geht es ohne Maus?
Viele Menschen bedienen digitale Angebote ohne Maus: mit der Tastatur, mit Sprachsteuerung, mit einem Schalter, mit Kopf- oder Augensteuerung oder mit einem Screenreader. Andere haben zitternde Hände oder grosse Finger auf kleinen Bildschirmen. Alles, was man klicken kann, muss sich auch anders erreichen lassen.
Lernziel: Du kannst Abläufe für Tastatur und Touch planen, den Fokus sichtbar gestalten und ausreichende Zielgrössen festlegen.
Was sich nicht erreichen lässt, gibt es für viele nicht.
3.1 / Tastatur
Tab, Enter, Leertaste und Pfeile.
Mit der Tastatur springt man von Element zu Element. Drei Regeln machen das zuverlässig:
01
Erreichbar
Jedes Bedienelement lässt sich mit Tab ansteuern.
02
Logische Reihenfolge
Der Fokus folgt der Lesereihenfolge.
03
Keine Falle
Man kommt überall wieder heraus.
Ein Link «Zum Inhalt springen» am Seitenanfang erspart es, auf jeder Seite erst durch die ganze Navigation zu tabben.
Die Tastatur ist der Prüfstein für alle anderen Hilfsmittel.
3.2 / Sichtbarer Fokus
Der Fokus ist der Mauszeiger der Tastatur.
Viele Designs entfernen den Fokusrahmen, weil er stört. Für Menschen mit Tastatur ist das, als würde man den Mauszeiger verstecken. Der Rahmen soll deutlich sein: mindestens 2 px stark, mit 3:1 Kontrast zur Umgebung und nicht verdeckt.
Mit der CSS-Eigenschaft focus-visible erscheint der Rahmen nur bei Tastaturbedienung, nicht beim Klicken. So bleibt die Gestaltung ruhig, und niemand verliert die Orientierung.
Fokus gestalten, nicht verstecken.
3.3 / Touch und Gesten
Ziele müssen gross genug sein.
Apple empfiehlt Touch-Ziele von mindestens 44 × 44 Punkten, Google 48 × 48. Die WCAG 2.2 verlangen auf Stufe AA mindestens 24 × 24 Pixel oder genug Abstand zum Nachbarn. Kleine Icons brauchen darum eine grössere, unsichtbare Klickfläche.
Gesten wie Wischen, Ziehen oder Kneifen brauchen immer eine einfache Alternative mit einem Tipp, etwa Pfeile für ein Karussell oder Plus und Minus für den Zoom. Nichts sollte sich nur durch Schütteln oder Neigen des Geräts auslösen lassen.
Jede Geste braucht einen einfachen Ersatz.
Übung
Ein Tag ohne Maus
Aufgabe: Prüfe ein eigenes Projekt auf Tastatur- und Touch-Bedienung.
SCHRITT 1
Tabbe von oben bis unten durch eine Seite und notiere die Reihenfolge.
SCHRITT 2
Markiere Stellen ohne sichtbaren Fokus und Elemente, die du nicht erreichst.
SCHRITT 3
Miss auf dem Handy die kleinsten Touch-Ziele.
SCHRITT 4
Ergänze für jede Geste eine einfache Alternative.
Auswertung: Wo bist du hängen geblieben, und wie viel Gestaltung braucht die Lösung wirklich?