---
title: "Fokus sichtbar"
url: "https://barrierefreihochzwei.de/de/wcag/2-4-7-fokus-sichtbar"
language: "de"
description: "WCAG 2.4.7 verlangt, dass der Tastaturfokus sichtbar ist. Erfahre, warum du outline: none nie ersatzlos nutzen solltest und wie gute Fokusstile aussehen."
published: "2025-01-01T08:00:00+01:00"
updated: "2026-10-15T09:42:00+02:00"
---

# Fokus sichtbar

Wenn der Fokus auf Wanderschaft geht.

- **Erfolgskriterium:** 2.4.7
- **Prinzip:** Bedienbar
- **Konformitätsstufe:** Level AA
- **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/focu...](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)

Erfolgskriterium 2.4.7

# 2.4.7 Fokus sichtbar

Level AABedienbar

Wenn der Fokus auf Wanderschaft geht.

## 1. Was ist das Ziel dieses Kriteriums?

Hast du schon mal versucht, eine Website nur mit der Tastatur zu bedienen? Du drückst Tab, Tab, Tab – und plötzlich weißt du nicht mehr, wo du eigentlich bist. Der Fokus ist irgendwo hingesprungen, aber du siehst nicht, wohin.

Menschen, die auf die Tastatur angewiesen sind – etwa wegen motorischer Einschränkungen oder einer Sehbehinderung –, stehen ohne sichtbare Fokusmarkierung buchstäblich im Dunkeln. Und auch alle, die aus Gewohnheit lieber mit der Tastatur arbeiten, verlieren den Überblick.

Das Ziel von Erfolgskriterium 2.4.7 ist daher simpel: Jedes Element, das den Tastaturfokus erhalten kann, muss sichtbar zeigen, dass es gerade den Fokus hat. Kurz gesagt: Man soll immer sehen können, wo man sich gerade befindet.

## 2. Was fordert das Erfolgskriterium genau?

Jede per Tastatur bedienbare Benutzeroberfläche muss mindestens einen Modus haben, in dem die Fokusmarkierung sichtbar ist.

**Was bedeutet das in der Praxis?**

- Erhält ein Element den Tastaturfokus, muss eine sichtbare Markierung erscheinen.
- Die Markierung muss so lange sichtbar bleiben, wie das Element den Fokus hat – sie darf nicht nach kurzer Zeit verschwinden.
- Das gilt für alle fokussierbaren Elemente: Links, Schaltflächen, Formularfelder und eigene Bedienelemente.

**Wichtige Details:**

- Browser bringen eigene Fokusmarkierungen mit (meist eine Umrandung).
- Diese dürfen nicht entfernt werden, ohne gleichwertigen Ersatz zu bieten.
- Browser zeigen die Markierung oft nur bei Tastaturnutzung, nicht beim Klicken mit der Maus – das ist erlaubt.
- Verschiedene Arten der Markierung sind möglich: Umrandung, Unterstreichung, Hintergrundfarbe oder eine Kombination.
- 2.4.7 schreibt keine Mindestgröße und keinen Mindestkontrast vor. Damit die Markierung aber wirklich erkennbar ist, solltest du dich an [Nicht-Text-Kontrast](https://barrierefreihochzwei.de/de/wcag/1-4-11-nicht-text-kontrast) (mindestens 3:1) und an [Fokusdarstellung](https://barrierefreihochzwei.de/de/wcag/2-4-13-fokusdarstellung) (AAA) orientieren.

Erfüllt ist das Kriterium also, wenn entweder die Standardmarkierung des Browsers erhalten bleibt oder ein eigener Fokusstil mindestens genauso gut sichtbar ist. Ergänzend verlangt [Fokus nicht verdeckt (Minimum)](https://barrierefreihochzwei.de/de/wcag/2-4-11-fokus-nicht-verdeckt-minimum), dass das fokussierte Element nicht von anderen Inhalten verdeckt wird.

## 3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du füllst ein Online-Formular aus, siehst aber nicht, welches Feld gerade aktiv ist. Oder du bewegst dich mit der Tabulatortaste durch ein Menü und erkennst nicht, welcher Menüpunkt gerade ausgewählt ist.

Sichtbare Fokusmarkierungen schaffen Barrierefreiheit, weil sie:

- Menschen mit Sehbehinderungen helfen, ihre Position auf der Seite zu verfolgen,
- Menschen mit motorischen Einschränkungen, die per Tastatur, Schalter oder Sprachsteuerung arbeiten, bei der Bedienung unterstützen,
- Menschen mit Aufmerksamkeitsstörungen oder Gedächtnisproblemen helfen, nicht die Orientierung zu verlieren,
- allen Tastaturnutzenden die Kontrolle über ihre Navigation geben,
- in Situationen helfen, in denen keine Maus verfügbar oder sie unpraktisch ist.

Und nicht zuletzt: Eine klare Fokusmarkierung verbessert die Nutzung für alle – auch für Menschen ohne Einschränkungen, die gerade die Tastatur verwenden.

## 4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Browser bringen bereits Fokusmarkierungen mit. Die schlechte: Viele entfernen sie, weil sie als „hässlich“ gelten. Hier ein paar bewährte Wege, es richtig zu machen:

**Grundregeln für gute Fokusmarkierungen:**

- Nutze die Browserstandards als Basis – oder ersetze sie durch etwas, das mindestens genauso gut sichtbar ist.
- Achte bei eigenen Stilen auf ausreichenden Kontrast zum Hintergrund.
- Mache die Markierung deutlich – zu subtil hilft niemandem.
- Sorge für Einheitlichkeit: Alle fokussierbaren Elemente sollten ähnlich markiert werden.
- Verlass dich nicht allein auf eine Farbänderung, sondern kombiniere sie mit einer Umrandung oder Unterstreichung.

**Technische Umsetzung:**

```
/* Schlecht: Fokus ersatzlos entfernen */
button:focus {
  outline: none;
}

/* Besser: Eigenen Fokusstil für Tastaturnutzung definieren */
button:focus-visible {
  outline: 2px solid #005a9e;
  outline-offset: 2px;
}

/* Mit zusätzlichem Hinweis – die Umrandung bleibt erhalten */
button:focus-visible {
  outline: 2px solid #005a9e;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #ffffff;
}
```

**Praktische Tipps:**

- Teste deine Website regelmäßig nur mit der Tastatur.
- Nutze `:focus-visible`, um die Markierung bei Tastaturnutzung zu zeigen, ohne Mausnutzer:innen zu irritieren.
- Setze nicht nur auf `box-shadow`: Im Kontrastmodus von Windows (erzwungene Farben) werden Schatten nicht angezeigt. Eine `outline` – notfalls transparent – bleibt dort sichtbar.
- Prüfe die Markierung auf allen Hintergründen – sie muss auf hellen und dunklen Flächen erkennbar sein.

**Werkzeuge und Hilfsmittel:**

- Die Tabulatortaste – der einfachste und wichtigste Test
- Kontrastprüfer für die Fokusfarben
- Browsererweiterungen für Barrierefreiheitsprüfungen

## 5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Eine sichtbare Fokusmarkierung ist nicht nur Pflicht – sie zeigt, dass du alle Nutzer:innen ernst nimmst.

**1. Zielgruppe erweitern:** In Deutschland lebten Ende 2023 laut Destatis rund 7,9 Millionen schwerbehinderte Menschen. Dazu kommen Menschen mit vorübergehenden Einschränkungen (etwa einem gebrochenen Arm) und alle, die aus Vorliebe mit der Tastatur arbeiten. Mit sichtbarem Fokus machst du deine Website für sie alle nutzbar.

**2. Ein Grundbaustein der Barrierefreiheit:** Eine fehlende Fokusmarkierung gehört zu den Fehlern, die bei Prüfungen schnell auffallen – sie ist mit wenigen Zeilen CSS vermeidbar.

**3. Benutzerfreundlichkeit steigern:** Klare Fokusmarkierungen verbessern die Navigation für alle, die mit der Tastatur arbeiten – von Profis, die gern Tastenkürzel nutzen, bis zu Menschen, die mit der Maus nicht gut zurechtkommen.

Und nicht zuletzt: 2.4.7 ist ein Level-AA-Kriterium und damit Teil von WCAG 2.1 AA, auf die die Norm EN 301 549 verweist. Seit dem 28. Juni 2025 müssen unter anderem Online-Shops nach dem Barrierefreiheitsstärkungsgesetz (BFSG) diese Anforderungen erfüllen, öffentliche Stellen nach BITV 2.0 bzw. Landesrecht. Das ist eine allgemeine Information und keine Rechtsberatung.

## 6. Das Erfolgskriterium im Wortlaut des W3C

> **Success Criterion 2.4.7 Focus Visible (Level AA)**
> 
> Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Kurz gesagt: Bei jeder per Tastatur bedienbaren Oberfläche muss sichtbar sein, welches Element gerade den Tastaturfokus hat.

**Offizielle Erklärung beim W3C**

Das W3C erklärt jedes Erfolgskriterium ausführlich – mit Absicht, Beispielen und Techniken (auf Englisch).

[Understanding 2.4.7](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)

## Weitere Kriterien aus „Bedienbar“

 [  2.1.1 Level A ### Tastatur

Wenn jeder Klick auch ein Tastendruck sein kann.

 ](https://barrierefreihochzwei.de/de/wcag/2-1-1-tastatur) [  2.1.2 Level A ### Keine Tastaturfalle

Wenn der Ausgang fehlt.

 ](https://barrierefreihochzwei.de/de/wcag/2-1-2-keine-tastaturfalle) [  2.1.3 Level AAA ### Tastatur (keine Ausnahme)

Wenn wirklich alles per Tastatur gehen muss.

 ](https://barrierefreihochzwei.de/de/wcag/2-1-3-tastatur-keine-ausnahme)