Fokus nach einer Aktion verschieben

Für Tastatur- und Screenreader-Nutzer zeigt der Fokus, wo sie sich auf der Seite befinden. Nach einer Aktion entscheiden Sie, wo dieser Punkt als Nächstes landet.

Wenn eine Schaltfläche neue Inhalte einblendet, bleibt der Fokus oft an seiner Stelle, und der Nutzer erfährt nie, dass sich etwas geändert hat. Das Verschieben des Fokus führt ihn zum Ergebnis.

In JavaScript verschieben Sie den Fokus, indem Sie element.focus() für das Ziel aufrufen, bei dem der Nutzer als Nächstes landen soll.

Ein einfaches div nimmt keinen Fokus an. Geben Sie dem Ziel daher tabindex="-1", damit Ihr Skript den Fokus dorthin verschieben kann.

Zeigen Sie neue Inhalte nach dem Laden an und setzen Sie anschließend den Fokus dorthin, damit der Screenreader mit dem Vorlesen des neuen Bereichs beginnt. 🔎

Den Fokus auf die Überschrift des neuen Abschnitts zu setzen, funktioniert oft am besten. So erhält der Nutzer einen eindeutigen Titel für den Bereich, in dem er gerade angekommen ist.

Wenn der Nutzer eine Zeile entfernt, geht der Fokus sonst verloren. Verschieben Sie ihn zum nächsten Element oder zu einem nahegelegenen Steuerelement, damit der Nutzer fortfahren kann.

Wenn der Fokus nach jeder Aktion an den Seitenanfang springt, ist das irritierend. Setzen Sie ihn stattdessen auf die relevante Stelle, damit der Kontext erhalten bleibt.

Verschieben Sie den Fokus nur als Reaktion auf eine Benutzeraktion. Wenn Sie ihn bei Hintergrundaktualisierungen an sich reißen, unterbrechen Sie Nutzer bei dem, was sie gerade tun.

Testen Sie die Aktion mit der Tastatur und beobachten Sie, ob der Fokusring jedes Mal an der vorgesehenen Stelle erscheint.

Jede wichtige Aktion sollte genau eine bewusst gesteuerte Fokusverschiebung auslösen. Vorhersehbar ist immer besser als clever.

Sie haben gelernt, den Fokus gezielt zu verschieben: Machen Sie das Ziel mit tabindex="-1" fokussierbar, rufen Sie nach der Aktion focus() auf und wählen Sie die nützlichste Stelle. ✨