Fokus auf CSS – focus, focus-within und focus-visible

„Drück mal Tab.“ – So oder so ähnlich fängt jede Erklärung über den Fokus auf Websites an. Der Fokus liegt dann auf dem nächsten interaktiven Element. Doch wichtig für die Bedienung einer Website auf diese Weise mit der Tastatur ist, dass Nutzer auch sehen, welches Element gerade aktiv ist. Und CSS liefert uns mit :focus, :focus-within und :focus-visible drei Werkzeuge, um genau das deutlich zu machen. Aber was machen diese Pseudoklassen genau? Wann nutzt man welche? Und wie hilft das alles, Ihre Seite zugänglicher und moderner zu gestalten?

Unterschied zwischen den CSS-Attributen focus, focus-within und focus-visible

Die CSS-Pseudoklassen :focus, :focus-within und :focus-visible zielen alle auf das aktuell fokussierte Element ab. Fokus können alle interaktive Elemente erhalten: Links, Buttons und Eingabefelder. Zusätzlich können auch eigentlich nicht dafür vorgesehene Elemente mithilfe des Attributs tabindex fokussierbar gemacht werden. Schauen wir uns an Beispielen, wie die drei Varianten funktionieren.

focus

Die Pseudoklasse :focus selektiert jedes Element, das gerade den Fokus besitzt. Dabei ist es völlig unerheblich, wie der Fokus auf dieses Element kam. Auch beim Klick auf Buttons und Links wird beispielsweise vorm Auslösen der Aktion zunächst das Element fokussiert.

focus-within

Nicht immer möchte man das Element gestalten, dass gerade den Fokus besitzt. Oft möchte man beispielsweise in der Navigation auch den Hauptmenüpunkt hervorheben und das gesamte Untermenü öffnen. Dann dient :focus-within der Auswahl eines Elementes, wenn eines seiner Kindelemente aktuell den Fokus besitzt.

focus-visible

Wie bereits erwähnt sprechen :focus und :focus-within jedes Element mit aktivem Fokus an. Nicht immer möchte man beim Klick auf einen Link diesen aber auch hervorheben. Hier kommt :focus-visible ins Spiel. Es greift nur dann, wenn die Hervorhebung des Fokus für den Nutzer wichtig ist. Im Wesentlichen sind das:

• Der Fokus wurde mit der Tastatur ausgelöst (Beispielsweise durch die Tabulator-Taste).
• Der Fokus liegt auf einem Eingabefeld.

Wenn Sie bisher beim dem Button im Beispiel beim Klicken also keinen orangenen Rahmen gesehen haben, nutzen Sie doch einmal die Tastatur und tabben Sie bis dahin. (Tipp: Klicken Sie auf den Button davor und dann einmal auf die Tabulator-Taste)

focus-visible-within?

Wie Ihnen sicherlich aufgefallen ist, fehlt in der Reihe nun konsequenterweise noch :focus-visible-within. Es gibt viele Entwickler, die sich für eine Einführung einsetzen, allerdings gibt es diese Pseudoklasse bisher nicht. Trotzdem können wir uns mit einem kleinen Trick helfen, der Pseudoklasse :has. Diese erlaubt es, Elternelemente in Abhängigkeit vorhandener Kinder zu gestalten. So könnte man beispielsweise Absätze anders formatieren, falls der Text einen Link enthält.

Für unseren Anwendungsfall bedeuted das einen CSS-Code wie beispielsweise folgenden:

.button-container:has(:focus-visible) {
    outline: 2px solid orange;
}

Wir setzen um den Container also immer dann einen Rahmen, wenn auf eines der Kindelemente :focus-visible zutrifft.

Gestaltung des Fokus

Da wir nun wissen, wann der Fokus erscheinen soll, schauen wir uns nun an, wie man ihn gut gestalten kann. Dazu gibt es keine klaren Vorgaben, er muss jedoch klar und deutlich erkennbar sein.

Kontrast

Wie für Texte und alle interaktiven Elemente gilt auch für die Fokusmarkierung, dass der Farbkontrast ausreichend hoch sein muss. Ausreichend heißt hier, ein Kontrastverhältnis von 3:1. Dabei gibt es grundsätzlich zwei Möglichkeiten:

• Das Element selbst ändert seine Farbe. Dann muss der Kontrast zwischen der Standardfarbe und der Fokusfarbe mindestens 3:1 betragen. Außerdem müssen natürlich immer die Kontraste zum Hintergrund erhalten bleiben (bei Text also ggf. auch höher!)
• Das Element erhält eine zusätzliche Markierung, beispielsweise eine Unterstreichung oder einen vollständigen Rahmen. Dann muss dieser sich im Kontrast 3:1 vom Hintergrund abheben.

Mehr Informationen zu Farbkontrasten finden Sie in den folgenden Artikeln:

• 3:1, 7:1 – Wie berechnet sich eigentlich der Kontrast zwischen Farben?
• Barrierefreie Farben gibt es nicht

Kennzeichnung mit outline

Eine deutliche Umrandung zu setzen ist eine der beliebtesten Methoden, den Fokus deutlich zu machen. Im Browser-Standard wird ebenfalls ein Rahmen verwendet, der meistens jedoch eher unauffällig daher kommt. Ich bevorzuge, gerade beim Einsatz von focus-visible, einen breiten, deutlichen Rand. Am besten geeignet ist dafür das CSS-Attribut outline, da es im Gegensatz zu border keinen eigenen Platz einnimmt und über andere Elemente hinwegzeichnet. So kommt es zu keinen Verschiebungen der Elemente.

outline: 2px solid orange;

Das Problem eines solchen Randes zeigt sich immer dann, wenn wechselnde Hintergründe ins Spiel kommen. Auf stolperfrei.digital nutze ich beispielsweise den schon oben gezeigten orangenen Rahmen. Doch ich habe auch Flächen mit orangenem Hintergrund oder orangefarbene Buttons. Der geplante Rahmen würde hier nicht auffallen und so die geforderte deutliche Markierung des Fokus nicht erfüllen. Hier mehrere Lösungsansätze, die je nach Anwendungsfall nützlich sein können (aber nicht müssen).

currentColor

Ändert sich die Schriftfarbe auf einer Seite öfter, dann kann es sinnvoll sein, den Fokusrahmen von Links im Text mit der jeweils aktuellen Textfarbe darzustellen. Da der Text bereits die Anforderungen an den kontrast zum Huntergrund erfüllen muss, gilt das selbstverständlich auch für den Rahmen. Das Zauberwort dafür heißt currentColor, eine imaginäre Farbe, die immer der aktuellen Textfarbe des Elementes entspricht.

Das CSS in diesem Fall könnte also beispielsweise so aussehen:

button:focus {
    outline: 2px solid currentColor;
}

Abstand

Für Buttons ist diese Möglichkeit ungeeignet, denn oft entspricht die Textfarbe auf dem Button der Hintergrundfarbe um den Button herum (so wie oben im Beispiel: Hintergrund weiß, Hintergrund Button Türkis, Schriftfarbe Button wieder weiß). Würde man hier die aktuelle Textfarbe wählen, so hätte man einen weißen Rahmen.

Wähle ich nun aber meinen orangefarbenen Rahmen, dann ist dieser an gleichfarbigen Buttons kaum sichtbar. Nur beim genauen Betrachten fällt auf, dass sich die Fläche vergrößert. In diesem Fall kann das Attribut outline-offset helfen. Es legt den Abstand zwischen dem Element selbst und seinem Rahmen fest.

button:focus {
    outline: 2px solid orange;
    outine-offset: 3px;
}

doppelte outline

Das Problem mit flächigen Elementen wie Buttons lässt sich aber nicht nur duch einen Abstand des Rahmens lösen. Eine weitere, gängige Methode ist die des doppelten Rahmens. Dabei wird üblicherweise über einen harten Schatten ein zweiter Rahmen erstellt. Die zwei Rahmen haben einen starken Kontrast zueinander, beispielsweise weiß und schwarz. Auf diese Weise ist je nach Hintergrund wahlweise der eine oder der andere Rahmen sichtbar.

button:focus {
    outline: 2px solid orange;
    outine-offset: 2px;
    box-shadow: 0 0 0 2px teal;
}

Der Schatten bildet dabei den inneren Rahmen, die outline wird wieder nach außen verschoben. Ansonsten würden beide Rahmen übereinander dargestellt werden.

Fazit – Verwenden Sie im CSS focus oder focus-visible, aber deutlich

Grundsätzlich ist es egal, ob Sie die CSS-Pseudoklassen :focus, :focus-within oder :focus-visible nutzen oder wie Sie die Markierung des aktuell aktiven Elementes gestalten. Wichtig ist nur, dass Sie es tun. Seien Sie ruhig mutig und setzen Sie auf starke Kontraste, die Nutzer der Tastatur werden es Ihnen danken. Testen Sie am besten auch einmal selbst. Denn neben der deutlichen Markierung ist wichtig, dass das fokussierte Element nicht von Inhalten wie Popups oder feststehenden Headern/Footern überlagert wird. Probieren Sie es mal aus und schauen Sie, ob Ihr CSS focus schon nutzt.