Das Internet-Lexikon

Fokus

Der Fokus markiert das Element, das gerade per Tastatur bedient werden kann - erkennbar an einem visuellen Indikator wie einem Rahmen -, und muss bei jeder Interaktion sichtbar und in einer logischen Reihenfolge nachvollziehbar bleiben.

Kurz erklärt

Jedes fokussierbare Element - Links, Buttons, Formularfelder - erhält beim Erreichen per Tastaturnavigation den Fokus, sichtbar durch den Fokus-Indikator, den Browser standardmäßig als Rahmen um das Element zeichnen. Über die CSS-Pseudoklasse :focus lässt sich dieser Indikator gestalten - :focus-visible erlaubt es zusätzlich, ihn gezielt nur bei Tastaturbedienung anzuzeigen und bei Maus-Klicks auszublenden, ohne ihn dabei komplett zu entfernen. Neben der reinen Sichtbarkeit ist die Fokusreihenfolge entscheidend: Sie sollte der visuellen und inhaltlichen Lesereihenfolge der Seite entsprechen, üblicherweise also der Reihenfolge im HTML-Dokument.

Beispiel

/* Schlecht: entfernt den Fokus-Indikator vollständig */
button:focus {
  outline: none;
}

/* Besser: eigener, aber weiterhin sichtbarer Indikator */
button:focus-visible {
  outline: 2px solid #0053d6;
  outline-offset: 2px;
}

Bei dynamischen Komponenten wie einem Dialog muss der Fokus zusätzlich aktiv per JavaScript gesteuert werden: Öffnet sich ein Modal, sollte der Fokus auf ein Element darin springen, und beim Schließen zu dem Element zurückkehren, das den Dialog geöffnet hat.

Warum ist das relevant?

Ohne sichtbaren und logisch geführten Fokus können Tastaturnutzer und Screenreader-Nutzer nicht erkennen, wo auf der Seite sie sich gerade befinden - eine Website kann technisch per Tastatur bedienbar sein und trotzdem faktisch unbenutzbar bleiben, weil niemand nachvollziehen kann, welches Element gerade aktiv ist. Fokus-Handling ist deshalb eines der am häufigsten geprüften Kriterien in BFSG-Audits.

Häufige Missverständnisse

outline: none ohne Ersatz ist der verbreitetste Fehler - er wird oft rein aus optischen Gründen gesetzt, entfernt aber jede visuelle Rückmeldung für Tastaturnutzer. Ein zweiter häufiger Fehler betrifft dynamische Inhalte: Wird beispielsweise nach einer Formularvalidierung eine Fehlermeldung eingeblendet, der Fokus aber nicht dorthin gesetzt, bemerken Tastatur- und Screenreader-Nutzer die Meldung unter Umständen gar nicht. Auch die Fokusreihenfolge folgt nicht automatisch der visuellen Anordnung, wenn diese per CSS (etwa flex-direction oder absolute Positionierung) von der DOM-Reihenfolge abweicht - maßgeblich für die Tab-Reihenfolge bleibt die Position im HTML.

Weiterführende Inhalte

Quellen & Dokumentation