# Sichtbarer Fokus: WCAG 2.4.7 richtig umsetzen

Source: https://allyway.ai/de/glossary/fokus-sichtbar

Sichtbarer Fokus bedeutet, dass eine Website das Element, das gerade den Tastaturfokus hat, deutlich markiert – meist mit einem Rahmen. WCAG 2.4.7 verlangt das auf Stufe AA.

Ein sichtbarer Fokus zeigt Menschen, die mit der Tastatur arbeiten, jederzeit ihre Position auf der Seite. Drücken sie Tab, bekommt der aktive Link, Button oder das Formularfeld eine deutliche Markierung – meist einen Rahmen oder Ring. Fehlt dieser Fokusindikator, tippen Tastaturnutzer ins Leere: Sie drücken Tasten, wissen aber nicht, welches Element reagiert.

## Was es bedeutet

[WCAG 2.4.7 Fokus sichtbar](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html) ist ein Erfolgskriterium der Stufe AA in [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2). Jede per Tastatur bedienbare Oberfläche braucht einen Modus, in dem der Tastaturfokus sichtbar ist. Das W3C ergänzt: Die Markierung darf nicht nach ein paar Sekunden verschwinden. Über [EN 301 549](https://allyway.ai/de/regulations/en-301-549) (Abschnitt 9.2.4.7) gehört die Anforderung auch zum [European Accessibility Act](https://allyway.ai/de/regulations/eaa).

Wichtig ist das für alle, die auf [Tastaturbedienung](https://allyway.ai/de/glossary/tastaturbedienung) angewiesen sind, und für Menschen mit Einschränkungen bei Aufmerksamkeit oder Kurzzeitgedächtnis, die schnell wieder finden müssen, wo sie waren.

Wie der Fokusrahmen aussieht, legt 2.4.7 nicht fest. Das regeln andere Kriterien:

| Kriterium | Stufe | Was es ergänzt |
|---|---|---|
| **2.4.7 Fokus sichtbar** | AA | Ein sichtbarer Fokusindikator muss vorhanden sein |
| **1.4.11 Nicht-Text-Kontrast** | AA | Mindestens 3:1 Kontrast zu den angrenzenden Farben |
| **2.4.11 Fokus nicht verdeckt (Minimum)** | AA | Das fokussierte Element darf nicht vollständig verdeckt sein, etwa durch einen fixierten Header |
| **2.4.13 Erscheinungsbild des Fokus** | AAA | Genaue Vorgaben zu Größe und Kontrast der Markierung |

> **Warning:** > **outline: none ist der Klassiker**
> Viele Themes entfernen den Standard-Fokusrahmen des Browsers, weil er „nicht schön“ aussieht. Das W3C führt das als Fehler F78. Wenn Sie den Rahmen ändern, ersetzen Sie ihn immer durch einen sichtbaren Stil.

Der Standard-Fokus des Browsers kann ausreichen – das W3C erkennt ihn als Technik G165 an –, solange er auf Ihren Farben gut sichtbar bleibt.

## Praxisbeispiele

Ein guter Fokusstil nutzt eine Farbe mit ausreichendem [Farbkontrast](https://allyway.ai/de/glossary/farbkontrast) und etwas Abstand zum Element. Die CSS-Pseudoklasse `:focus-visible` zeigt den Rahmen bei Tastaturbedienung, ohne ihn bei jedem Mausklick einzublenden.

```html title="Beispiel"
<style>
  /* Fehler nach 2.4.7: Fokusindikator entfernt */
  a:focus, button:focus { outline: none; }

  /* Richtig: deutlicher Rahmen bei Tastaturfokus, 5,98:1 auf Weiß */
  a:focus-visible, button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>
```

Ein hellgrauer Rahmen wie `#cccccc` auf Weiß erreicht nur 1,61:1. Er ist zwar vorhanden, aber kaum jemand sieht ihn – und er verfehlt 1.4.11.

**Do:** Do

`:focus-visible` mit einem durchgehenden Rahmen von 2–3 px in einer kräftigen Markenfarbe gestalten, `outline-offset` ergänzen und den Fokus auch auf dunklen Bereichen, Bildern und Buttons prüfen.

**Don't:** Don't

`outline: none` ohne Ersatz setzen, den Fokus nur durch eine leichte Farbänderung andeuten oder zulassen, dass ein fixierter Header das fokussierte Element verdeckt.

## So prüfen Sie den sichtbaren Fokus



## Häufige Fragen

Q: Was bedeutet sichtbarer Fokus nach WCAG?
A: WCAG 2.4.7 Fokus sichtbar (Stufe AA) verlangt, dass Tastaturnutzer immer erkennen, welches Element den Fokus hat. Meist zeigt das ein Rahmen oder Ring um den aktiven Link, Button oder das Feld.

Q: Ist outline: none ein Barrierefreiheitsfehler?
A: Nur ohne Ersatz. Wer den Rahmen entfernt und keinen anderen sichtbaren Fokusstil setzt, verstößt gegen WCAG 2.4.7 (W3C-Fehler F78). Ein eigener, deutlicher Stil ist dagegen völlig in Ordnung.

Q: Wie viel Kontrast braucht ein Fokusrahmen?
A: WCAG 2.4.7 nennt keine Zahl. Fokusindikatoren sind aber grafische Bedienelemente, daher verlangt WCAG 1.4.11 mindestens 3:1 zu den angrenzenden Farben. Das AAA-Kriterium 2.4.13 ist strenger.

Q: Was ist der Unterschied zwischen :focus und :focus-visible?
A: `:focus` greift bei jedem fokussierten Element, auch nach einem Mausklick. Bei `:focus-visible` entscheidet der Browser, wann ein Fokusring hilft – typischerweise bei Tastaturbedienung. So behalten Tastaturnutzer ihren Fokusrahmen, ohne dass bei jedem Klick einer erscheint.

Q: Kann allyWay einen fehlenden sichtbaren Fokus automatisch beheben?
A: Ja. allyWay ergänzt deutliche Fokusrahmen an Links, Buttons und Feldern, wo sie fehlen – als Teil der [automatischen Korrekturen](https://allyway.ai/de/automatic-accessibility-fixes-for-website). Da Fokusrahmen eine sichtbare Änderung sind, gehen sie erst nach Ihrer Freigabe live, und Ihr Code und Theme bleiben unverändert. [Kostenlos starten](https://app.allyway.ai/register) und Tastaturnutzern einen klaren Weg durch Ihre Website geben.