🧾 SOP 23: Gestalte sichtbare Fokus-Indikatoren

Früher hatten Webseiten oft ein Problem. Der Fokus-Indikator (meist ein blauer oder schwarzer Rahmen, den der Browser automatisch gesetzt hat) war auch dann zu sehen, wenn jemand mit der Maus geklickt hat. Und das fanden viele Webdesigner „hässlich“, weil es ihrer Meinung nach das Design gestört hat. Deshalb haben sie oft einfach diesen Rahmen ganz weggemacht, mit dem Befehl outline: none; oder outline: 0; .

Das ist aber, als würde man bei einem Auto die Blinker abbauen, nur weil sie im Stand vielleicht nicht schön aussehen. Sobald du fährst, brauchst du sie aber dringend!

Deshalb wollen wir im ersten Schritt sicher stellen, dass auf jeden Fall Deine Tastatur-User den Rahmen als Highlight sehen können.

Die moderne und korrekte Lösung für dieses „Problem“ heißt :focus-visible. „:focus visible“ bedeutet dabei einfach,dass der der Fokus-Stil (also dieser Rahmen, der zeigt, wohin man gerade navigiert) nur dann angezeigt wird , wenn jemand mit der Tastatur navigiert – genau dann, wenn er wirklich gebraucht wird (Barrierefreiheit!).

Diese CSS-Pseudoklasse sorgt dafür, dass dein benutzerdefinierter Fokus-Stil nur dann angezeigt wird, wenn der Nutzer per Tastatur navigiert – nicht aber beim Mausklick.

 Und das machen wir in den folgenden Schritten.

Bevor du deinen sichtbaren Fokus-Indikator implementierst, willst du sicherstellen, dass er maximal nützlich ist. Die Grunderegel dabei lautet:  Ein guter Fokus-Indikator ist nicht dezent, er ist offensichtlich .

Konkret bedeutet es:

• Kontrast: Er muss einen Kontrast von mindestens 3:1 zum Hintergrund haben.
• Größe und Dicke: Er sollte dick genug sein, um sofort ins Auge zu fallen (z. B. mindestens 2px dick).
• Keine Verdeckung: Stelle sicher, dass der Indikator niemals von anderen Elementen wie Sticky Headern, Footern oder Cookie-Bannern verdeckt wird.
• Klarheit: Er muss sich deutlich von anderen Zuständen wie dem Hover-Effekt (Mouseover) unterscheiden.
• Konsistenz: Sorge für einheitliche Fokus-Stile über die gesamte Website, um die Vorhersehbarkeit für Nutzer zu erhöhen.

Im Code könnte das konkret folgendermaßen aussehen:

*/

:focus-visible {

  outline: 3px solid #0057B8;  /* Beispiel: Eine kräftige, kontrastreiche Farbe */

  outline-offset: 2px;

  border-radius: 4px; /* Optional: Passt den Radius an deine Buttons an */

}

Du solltest natürlich nicht nur deinen Fokus-Indikator optimieren, sondernihn auch auf deinen Corporate Design anpassen. Und zwar wie folgt

• Dicker Rahmen (outline): Die beste Methode. Sie verändert das Layout des Elements nicht.
• Beispiel: Ein 3px dicker, durchgehender Rahmen in einer deiner Markenfarben mit etwas Abstand zum Element (outline-offset).
• Box-Schatten (box-shadow): Eine flexible Alternative, die ebenfalls das Layout nicht beeinflusst. Beachte jedoch, dass Schatten in einigen „erzwungene Farben“-Modi (High Contrast Mode) nicht sichtbar sind; kombiniere ihn dann am besten mit einem transparenten outline .

Beispiel: box-shadow: 0 0 0 3px #DeineMarkenfarbe;

• Hintergrund- und Textfarbe ändern: Eine weitere Option, bei der du aber sicherstellen musst, dass die neuen Farben untereinander und zum Hintergrund immer noch genügend Kontrast haben.
• Wovon abzuraten ist: Kleine Änderungen wie eine dünne Unterstreichung oder eine leichte Farbänderung des Textes sind oft nicht ausreichend sichtbar.<(li>

Nun, da du den Fokus-Indikator designedhast, möchtest du ihn natürlich auf deiner Seite implementieren.+

Ganz egal,, ob du es selbst machst oder mit Hilfe eines Entwicklers – das ist der Prozess: Du musst diesen Code in dem Quelltext (bzw.CSS ) deiner Website integrieren:

CSS

/* Moderner und empfohlener Ansatz:

  Dieser Stil wird nur bei Tastatur-Navigation angewendet,

  nicht bei Mausklicks. Er ersetzt den Standard-Stil.

*/

:focus-visible {

  outline: 3px solid #0057B8;  /* Beispiel: Eine kräftige, kontrastreiche Farbe */

  outline-offset: 2px;

  border-radius: 4px; /* Optional: Passt den Radius an deine Buttons an */

}

Dieser Code-Block ist die Grundlage. Weise deine Entwickler:innen an, jegliche outline: none oder outline: 0 aus dem Code zu entfernen und durch diesen Block zu ersetzen.

Du weißt jetzt, dass du deinen Fokus-Indikator auf deiner Website und damit eine extrem wichtige Barriere abgebaut hast. Nun willst du sichergehen, dass es auch funktioniert. Und da ist der einzige sichere Weg eine manuelle Prüfung.

Das heißt:Der einzige Weg, um sicherzugehen, ist eine manuelle Prüfung.

Und die führen wir wie folgt durch:

• Lege die Maus weg.
• Navigiere deine komplette Website von oben bis unten nur mit der Tab-Taste (und Shift + Tab zum Zurückspringen).
• Stelle bei jedem Schritt diese Fragen:
• Sehe ich sofort und eindeutig , wo ich bin?
• Ist der Fokus-Indikator immer sichtbar?
• Springt der Fokus in einer logischen Reihenfolge?
• Nutze ggf. ein Tool zur Visualisierung der Tab-Reihenfolge (z.B. in den Browser-Entwicklertools wie Chrome Accessibility Pane , Firefox Accessibility Panel, oder spezialisierte Browser wie Polypane ).
• Wird der Fokus von einem anderen Element (Header, Chat-Widget) verdeckt?
• Funktioniert es in allen interaktiven Elementen: Links, Buttons, Menüpunkten, Formularfeldern, Slidern?