Der Fokusrahmen und die eine CSS-Zeile, die ihn löscht

Drück auf deiner eigenen Seite einmal die Tabulatortaste. Irgendwo springt jetzt ein Rahmen um einen Link, einen Button oder ein Eingabefeld. Dieser Rahmen ist der Mauszeiger für alle, die keine Maus benutzen. Er zeigt an, welches Element gerade dran ist und was passiert, wenn du Enter drückst. Ist er weg, tippt man ins Leere.

Die Zeile, die ihn löscht

Sie steht in unzähligen Themes, CSS-Resets und Schnipseln aus alten Forenbeiträgen, meistens ziemlich weit oben in der Datei.

*:focus {
  outline: none;
}

Manchmal heißt sie outline: 0, manchmal trifft sie nur Buttons, manchmal wirklich jedes Element der Seite. Das Ergebnis bleibt gleich. Der Browser hört auf zu zeigen, wo die Tastatur gerade steht.

Was danach passiert, merkst du erst, wenn du die Maus weglegst. Du drückst Tab und auf dem Bildschirm ändert sich nichts Sichtbares. Du drückst noch dreimal Tab, drückst Enter und landest in einer Newsletter-Anmeldung, die du gar nicht wolltest. In einem Formular mit acht Feldern weißt du nach dem dritten Sprung nicht mehr, in welchem Feld du tippst. Betroffen sind nicht nur blinde Menschen mit Screenreader. Betroffen sind alle, die mit Tab durch Formulare gehen, weil die Hand zittert, weil sich eine Maus schlecht führen lässt, weil sie am Laptop schneller sind oder weil sie die Seite mit einer Kopfsteuerung bedienen.

Der Ersatz, der auch gut aussieht

Warum die Zeile so beliebt ist, kann man gut verstehen. Der Standardrahmen der Browser ist dünn, klebt direkt am Element und passt selten zum Design. Du musst ihn aber nicht ertragen, du musst ihn nur ersetzen. Das hier ist der vollständige Block, den du ans Ende deiner CSS-Datei setzen kannst.

/* Sichtbarer Fokus, mit Luft zum Element */
:focus-visible {
  outline: 3px solid #118378;
  outline-offset: 3px;
}

/* Klicks mit Maus oder Finger bleiben ruhig */
:focus:not(:focus-visible) {
  outline: none;
}

/* Doppelter Ring für dunkle Flächen */
.hero :focus-visible,
.footer :focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 9px #0b3b36;
}

Drei Details in diesem Block lohnen einen zweiten Blick. outline-offset schiebt den Ring drei Pixel vom Element weg, damit er nicht in der Button-Farbe versinkt. Aktuelle Browser ziehen die Outline automatisch am vorhandenen border-radius entlang, du brauchst für den Ring also keinen eigenen Radius. Der box-shadow im dritten Block ist der Handgriff für Flächen, auf denen deine Markenfarbe untergehen würde. Er liegt als geschlossene Fläche von der Elementkante bis neun Pixel nach außen, und die weiße Outline wird darüber gezeichnet. Sichtbar bleibt ein dunkler Streifen direkt am Element, dann der weiße Ring, dann noch einmal dunkel. Diese Schichtung funktioniert auf hellem wie auf dunklem Grund, weil immer eine der beiden Farben Kontrast zur Umgebung hat.

Zwei Dinge können den Block aushebeln. Steht in deinem Theme outline: none !important, gewinnt die alte Zeile trotz der Position am Dateiende, dann musst du sie dort wirklich löschen. Und wenn dein Baukasten seine Stile aus einer anderen Datei nachlädt, schaust du am schnellsten im Browser nach. Rechtsklick auf den Button, Untersuchen wählen, und die durchgestrichenen Eigenschaften zeigen dir, welche Regel verliert.

Warum `:focus-visible` den alten Streit auflöst

Jahrelang gab es zwei Lager. Das eine wollte den Fokusrahmen immer sehen, das andere fand es unschön, wenn nach einem Mausklick ein Rahmen am Button kleben bleibt. Beide Seiten hatten recht, denn :focus konnte nicht unterscheiden, wie der Fokus zustande gekommen ist.

:focus greift in jedem Fall. Klick mit der Maus, Tipp mit dem Finger, Sprung mit der Tastatur, alles löst denselben Zustand aus. :focus-visible überlässt die Entscheidung dem Browser, und der kennt den Unterschied. Kommst du mit Tab, zeigt er den Ring. Klickst du einen Button mit der Maus an, zeigt er ihn nicht. Klickst du in ein Textfeld, zeigt er ihn trotzdem, weil beim Tippen ein sichtbarer Zustand hilft. Alle aktuellen Browser beherrschen das seit mehreren Jahren. Sehr alte Versionen ignorieren die beiden Regeln einfach, und dann bleibt der eingebaute Rahmen des Browsers stehen, was immer noch besser ist als gar nichts.

Der Ring braucht Kontrast

Ein Fokusring, den man nur bei gutem Licht erkennt, ist halbe Arbeit. Die gängige Messlatte für Bedienelemente liegt bei einem Kontrastverhältnis von 3:1 gegenüber der Fläche direkt daneben. Bei einem Ring mit Abstand sind das zwei Flächen, nämlich das Element selbst und der Hintergrund der Seite. Deshalb funktioniert ein zartes Grau auf Weiß nicht, und deshalb fällt ein dunkelblauer Ring auf einem dunkelblauen Button durch.

Nachrechnen kannst du das in einer Minute mit einem beliebigen Kontrastrechner im Netz. Du gibst die Farbe deines Rings und die Farbe dahinter ein und liest das Verhältnis ab. Wenn du nur einen einzigen Ring pflegen möchtest, such dir einen Ton, der sowohl auf deinem hellsten als auch auf deinem dunkelsten Hintergrund über 3:1 landet. Klappt das nicht, nimm den doppelten Ring aus dem Block oben, der löst die Sache ohne lange Farbsuche.

Zwei Fallen bei selbstgebauten Elementen

Ein <div> mit Klick-Handler ist für die Tastatur kein Button. Es taucht in der Tab-Reihenfolge gar nicht auf, also hilft dort auch der schönste Fokusstil nicht weiter. Ein echtes <button> löst das an der Wurzel und bringt die Tastaturbedienung gleich mit.
overflow: hidden an einem Container schneidet den Ring ab, sobald er wegen outline-offset über die Kante ragt. Ein paar Pixel Innenabstand am Container reichen meistens aus.

Der Test mit der Tabulatortaste

Dafür brauchst du keine Zusatzsoftware und keine zwei Minuten.

Öffne deine Startseite im Browser und scrolle ganz nach oben.
Klicke einmal auf eine leere Stelle im Fließtext, damit kein Eingabefeld aktiv ist.
Drücke die Tabulatortaste langsam, ungefähr fünfzehn Mal hintereinander.
Schau nach jedem Druck hin und frag dich, ob du auf Anhieb siehst, wo du gerade stehst.
Notiere jede Stelle, an der du das verneinen musst, also jedes Element ohne sichtbaren Rahmen und jeden Rahmen, der in der Fläche darunter verschwindet.
Geh denselben Weg danach noch einmal durch Navigation, Cookie-Hinweis und Kontaktformular, weil dort die meisten selbstgebauten Elemente sitzen.

Zwei Hinweise noch zum Test. In Safari auf dem Mac springt die Tabulatortaste ab Werk nur zwischen Formularfeldern. Damit auch Links drankommen, aktivierst du in den Safari-Einstellungen unter Erweitert die Option, dass die Tabulatortaste jedes Objekt auf einer Webseite hervorhebt. Und wenn du irgendwo hängen bleibst und mit Tab nicht mehr weiterkommst, hast du gleich den nächsten Fund gemacht, meistens ein Overlay oder ein Menü, das den Fokus festhält.

Der nächste Handgriff

Wenn der Ring sitzt, lohnt der zweite Durchgang mit einer anderen Frage. Springt der Fokus in derselben Reihenfolge, in der die Inhalte auf dem Bildschirm stehen? Wandert er beim Öffnen eines Menüs hinein und beim Schließen zurück auf den Schalter, der es geöffnet hat? Und bekommt jemand, der sich auf jeder Unterseite erst durch die komplette Navigation tabbt, einen Sprunglink zum Inhalt angeboten? Ein Sprunglink ist ein normaler Link ganz oben im HTML, der auf die Kennung des Hauptbereichs zeigt und erst sichtbar wird, wenn er den Fokus bekommt. Er kostet ein paar Zeilen und spart bei jedem Seitenaufruf den Weg durch das gesamte Menü.

Ein Wort in eigener Sache, weil die Frage bei uns regelmäßig ankommt. Unser Widget kann eine Menge nachrüsten, etwa Kontraste anheben, Schrift vergrößern oder Bewegung anhalten. Deinen Fokusstil kann es nicht erfinden, denn welcher Ring zu deinen Buttons passt, steht in deinem CSS und nirgendwo sonst. Diese drei Regeln bleiben deine Arbeit, und sie gehören zu den wenigen Baustellen, die du an einem Nachmittag erledigst und danach nie wieder anfasst.