Behalte den Fokus

12. Juni 2025

Viviana Menzel

Beim Erstellen einer Website musst du an die Menschen denken, die sie nutzen werden. Du kannst wahrscheinlich die Elemente auf einer Website sehen und die Maus am Computer oder den Finger auf einem Mobilgerät benutzen. Dies bedeutet aber nicht, dass alle deine Besucher das ebenfalls können.

Etwas, das ich regelmäßig auf Websites sehe, ist das Fehlen eines sichtbaren Fokusindikators bei interaktiven Elementen. Wenn du mit der Maus oder dem Finger auf ein Menüelement, einen Button oder ein Eingabefeld in einem Formular zeigst, weißt du, wo du dich befindest. Aber was passiert, wenn du nur mit der Tastatur (also durch Drücken der Tabulatortaste) durch eine Website navigierst? Ohne einen sichtbaren Fokusindikator hast du keine Ahnung, wo du gerade bist.

Ein häufiger Grund, den Fokusindikator zu entfernen, ist, dass er „hässlich aussieht“. Und ja, jeder Browser hat seinen eigenen Fokus-Stil, der oft nicht besonders ansprechend ist und wahrscheinlich auch nicht zum Design deiner Website passt. Bis vor einigen Jahren wurde der Fokusindikator auch beim Klicken auf ein Element angezeigt, was viele als störend und unästhetisch empfanden. Inzwischen zeigen Browser den Fokusindikator jedoch nur noch dann an, wenn er wirklich gebraucht wird, zum Beispiel bei der Verwendung der Tabulatortaste auf der Tastatur oder wenn ein Textfeld eine Eingabe erfordert.

Seit 2022 steht neben der Pseudo-Klasse :focus auch die Pseudo-Klasse :focus-visible zur Verfügung. Diese wird nur dann auf ein fokussiertes Element angewendet, wenn ein sichtbarer Fokusindikator sinnvoll ist. Zudem kannst du den Fokusindikator damit gestalten, ohne das Verhalten seiner Anzeige zu beeinflussen.

Wenn du eine Website mit Blick auf Barrierefreiheit erstellst – und das solltest du auf jeden Fall tun – führt das Entfernen des Fokusindikators zu einem Verstoß gegen mehrere Erfolgskriterien der WCAG:

SC 2.4.7: Fokus sichtbar (Level AA): Jede durch Tastatur bedienbare Benutzerschnittstelle hat einen Bedienmodus, bei dem der Tastaturfokus sichtbar ist.

SC 1.4.11: Nicht-Text-Kontrast (Level AA): Für Komponenten der Benutzeroberfläche ist ein Kontrastverhältnis von mindestens 3:1 gegenüber angrenzenden Farben erforderlich.

Außerdem gibt es in WCAG 2.2 drei neue Erfolgskriterien:

SC 2.4.11: Fokus nicht verdeckt (Minimum) (Level AA)

SC 2.4.12: Fokus nicht verdeckt (erweitert) (Level AAA)

SC 2.4.13: Erscheinungsbild des Fokus (Level AAA)

Kurz gesagt, tu das nicht:

:focus {
  outline: none;
}

Mach lieber so etwas:

:focus-visible {
  outline: 2px solid crimson;
  outline-offset: 4px;    
}

Screenshot von einem Link mit pinker Umrandung

Screenshot von einem Input-Feld mit pinkrn Umrandung

Bedienbarkeit mittels Tastatur ist einer der wichtigsten Aspekte der Barrierefreiheit im Web, und sie ist sehr einfach zu überprüfen: Trenne deine Maus vom Computer und drücke die Tabulatortaste auf deiner Tastatur. Kannst du alle interaktiven Elemente (Menüpunkte, Dropdowns, Formulareingaben, Buttons, Links) erreichen und bedienen? Weißt du jederzeit, wo du dich auf der Seite befindest? Dann bist du auf dem richtigen Weg.

Behalte den Fokus auf den interaktiven Elementen deiner Website, und behalte auch den Fokus auf deinen Besucher*innen. Jeder Mensch ist anders und nutzt deine Website auf individuelle Weise, aber alle sollten eine gute Nutzererfahrung haben.

Fokusindikatoren sind eine kleine, aber entscheidende Ergänzung für Websites. Sie haben das Potenzial, die Benutzerfreundlichkeit für Millionen von Menschen zu verbessern, die deine Website oder Anwendung nutzen.

Sara Soueidan