Bedienung

Der Fokus ist sichtbar und hat immer einen Ort

Geltung: universal · web, react-native

Warum

Wer mit der Tastatur bedient, sieht ohne Fokus gar nicht, wo er ist. Das betrifft Screenreader-Nutzer und jeden, der ein Formular schnell durchtabbt. Der Fokus ist die einzige Rückmeldung, die diese Nutzer bekommen.

Oft wird der Fokus des Browsers entfernt, weil er nicht zum Rest passt. Dann bleibt gar kein Fokus übrig. Der Wunsch dahinter ist berechtigt. Die Lösung ist ein eigener Fokus statt gar keinem.

Dass er das Layout nicht verschieben darf, hat einen praktischen Grund. Sitzt er außerhalb des Elements, springt er in engen Reihen über die Nachbarn.

Einen Fokus, der hinter einer fixierten Kopf- oder Fußleiste liegt, sieht der Nutzer so wenig wie einen entfernten. Der Browser scrollt das fokussierte Element nur bis an den Rand des Fensters, und dort steht die Leiste. Der Abstand zur Leiste muss deshalb im Scrollverhalten der Seite stehen. Dasselbe gilt für Sprungziele: Springt ein Anker zu einer Überschrift, landet sie unter der Leiste, nicht dahinter.

Verschwindet das fokussierte Element, springt der Fokus an den Seitenanfang. Der Nutzer muss seine Stelle neu suchen.

Hart und weich

Hart: jeder Wechsel hat ein Ziel. Weich: nichts.

Woran Du den Verstoß erkennst

Irgendwo steht outline: none ohne Ersatz.
Eine Leiste mit position: sticky oder fixed, aber kein scroll-padding an der Seite. Beim Durchtabben verschwindet der Fokus darunter.
Beim Durchtabben einer Ansicht verliert man die Position.
Der Fokus verschiebt beim Erscheinen das Layout oder überlagert Nachbarn.
Der Fokus wird pro Komponente anders gebaut.
Ein Anker springt zu einer Überschrift, und sie liegt hinter der fixierten Leiste. Kein scroll-margin-top an Überschriften.
Dialog ohne Fokusfalle.
Nach dem Schließen ist document.activeElement der body.
Absenden mit Fehlern ohne focus() auf ein Feld.

Grenzen

Die Regel gilt für Tastaturfokus. Ein Fokus nach einem Mausklick darf unterdrückt werden (:focus-visible), weil der Mausnutzer schon weiß, wo er geklickt hat.

Wie der Fokus aussieht, ist eine Entscheidung des Projekts und steht dort. Ein weicher Ring auf der Kante ist eine gute Antwort, ein kräftiger Umriss mit Abstand auch, solange er die Nachbarn nicht überlagert.

Nicht-modale Hinweise wie Kurzmeldungen ziehen den Fokus nicht.

Quelle

APG › Dialog (Modal) Pattern. Vercel › Keyboard („Manage focus (trap, move, return)") und Forms („on submit, focus first error"). WCAG 2.4.3 Focus Order.