Ratgeber

Sichtbaren Fokus selbst prüfen nach WCAG 2.4.7 und 2.4.11

Veröffentlicht am 30. Oktober 2026

Nach WCAG 2.2 muss in Ihrem Shop bei jedem Tab-Druck sichtbar sein, welches Element gerade den Tastaturfokus hat (2.4.7 Fokus sichtbar, Stufe AA), und dieses Element darf nie vollständig von Ihren eigenen Inhalten wie einer festen Kopfleiste, einem Cookie-Banner oder einem Chat-Knopf verdeckt sein (2.4.11 Fokus nicht verdeckt (Minimum), Stufe AA, neu in WCAG 2.2). Beides prüfen Sie selbst mit der Tab-Taste: einmal vorwärts und einmal rückwärts durch Kopfzeile, Produktseite, Warenkorb und Checkout, mit der Frage „Sehe ich, wo ich bin?“.

Welche WCAG-Version für Ihren Shop zählt und wie die Kriterien aufgebaut sind, erklärt unser Überblick WCAG 2.2 für Onlineshops. Den kompletten Tastaturdurchgang beschreibt der Tastaturtest in 10 Minuten, das Messen von Farbkontrasten Farbkontrast nach WCAG prüfen und die Menüs Navigation und Menüs im Shop barrierefrei. Hier geht es nur um den sichtbaren Fokus.

Was die Kriterien genau verlangen

Für WCAG 2.2 gibt es keine vom W3C autorisierte deutsche Übersetzung (Übersicht); die deutschen Namen der neuen Kriterien sind unsere Übersetzung. Wer den Fokus prüft, stößt auf vier Kriterien, die oft verwechselt werden:

Ob 2.4.11 für Ihren Shop rechtlich schon zählt, hängt davon ab, welche Fassung der EN 301 549 maßgeblich ist; das erklärt unser Überblick WCAG 2.2 für Onlineshops.

1.4.11 vergleicht die Markierung mit den Farben daneben, 2.4.13 dieselben Pixel im fokussierten und nicht fokussierten Zustand. Laut Understanding 2.4.13 kann eine Markierung das eine Kriterium bestehen und das andere nicht. Unsere Empfehlung: Setzen Sie einen eigenen Rahmen, der 1.4.11 sicher erfüllt und sich an 2.4.13 orientiert, also mindestens 2 Pixel dick und in kräftigem Kontrast. Das kostet im CSS keine Mehrarbeit und erspart die Grenzfälle.

2.4.7 Fokus sichtbar im Detail

Das Understanding-Dokument zu 2.4.7 erklärt drei Punkte, die für Shops wichtig sind:

• „Mode of operation“ (Bedienmodus): Es genügt ein Modus, in dem der Fokus sichtbar ist, etwa bei Tastaturbedienung. Dass beim Klicken mit der Maus kein Rahmen erscheint, ist also kein Verstoß; fehlt er beim Tabben, schon.
• Nicht zeitlich begrenzt: Wörtlich: „The focus indicator must not be time limited: when the keyboard focus is shown, it must remain visible.“ Ein Rahmen, der nach einer Sekunde ausblendet, genügt nicht.
• Die Form ist frei. 2.4.7 schreibt nicht vor, wie die Markierung aussieht. Als Beispiele nennt das W3C einen Rahmen um das Bedienelement, einen senkrechten Strich im Eingabefeld oder markierten Text im Feld. Genaue Maße regelt erst das freiwillige 2.4.13.

Als Fehler nennt das W3C unter anderem F78: den Standardfokus des Browsers per CSS abschalten oder unsichtbar machen, ohne einen eigenen zu setzen. F78 nennt dafür drei Beispiele: :focus {outline: none}, eine dauerhafte Umrandung, die genauso aussieht wie der Fokusrahmen, und ein dicker Rand in derselben Farbe, auf dem der Fokusrahmen untergeht. Ein zweiter Fehler ist F55: ein Skript, das den Fokus sofort wieder entfernt, sobald ein Element ihn bekommt.

2.4.11 Fokus nicht verdeckt (Minimum) im Detail

Laut Understanding 2.4.11 soll das fokussierte Element immer zumindest teilweise im sichtbaren Bereich sein. Die wichtigsten Regeln daraus:

• Teilweise verdeckt ist auf Stufe AA erlaubt. Erst wenn das Element vollständig verdeckt ist, ist 2.4.11 verletzt. Das W3C empfiehlt trotzdem, teilweises Verdecken möglichst selten zu machen; das freiwillige 2.4.12 (AAA) verlangt, dass „no part of the component is hidden by author-created content“.
• Gemessen wird das Element, nicht der Rahmen. Ragt nur noch der Fokusrahmen unter der Kopfleiste hervor, das Element selbst aber nicht, zählt das Element als verdeckt. Ist umgekehrt der Rahmen ganz verdeckt, verletzt das laut Understanding wahrscheinlich 2.4.7.
• Cookie-Banner: Ein Banner, das als feste Leiste ein fokussiertes Element vollständig verdeckt, verletzt 2.4.11. Als Lösungen nennt das W3C: das Banner modal machen (erst auswählen, dann weiter), Scroll-Abstand (scroll-padding), damit es nichts überdeckt, oder ein Hinweis ohne nötige Aktion schließt sich, sobald er den Fokus verliert.
• Vom Nutzer geöffnete Inhalte: Ausklappmenüs und Tooltips, die beim Verlassen schließen, sind kein Problem. Inhalte, die offen bleiben, bis der Nutzer sie schließt, sind zulässig, wenn man das verdeckte Element ohne Weitertabben sichtbar machen kann. Das Understanding beschreibt genau diesen Fall mit einem Chat: Escape schließt das Chat-Fenster, der verdeckte Link wird sichtbar.
• Vom Shop vorgegebene Inhalte: Diese Ausnahme gilt nicht für Inhalte, die Sie selbst platzieren, etwa eine feste Fußleiste, oder die ohne Zutun des Nutzers erscheinen. Sie dürfen den Fokus nie vollständig verdecken.
• Modale Dialoge bestehen immer, wenn sie richtig gebaut sind: Sie nehmen beim Öffnen den Fokus auf und halten ihn, bis sie geschlossen werden.
• Halbtransparente Schleier: Ein grauer oder verschwommener Schleier über der Seite verdeckt den Fokus meist nicht vollständig. Dann muss laut Understanding der Fokusrahmen unter dem Schleier noch die 3:1 aus 1.4.11 schaffen.

Als ausreichende Technik nennt das W3C C43 (CSS scroll-padding), als Fehler F110: eine feste Kopf- oder Fußleiste, die fokussierte Elemente vollständig verdeckt. F110 gibt auch den Test vor: durch alle Links und Bedienelemente tabben, „both progressing down through the page, and back up“. Rückwärts ist wichtig, weil eine feste Kopfleiste meist erst beim Hochscrollen verdeckt.

Nach unserer Lesart zählen auch Chat-Widgets, Bewertungs-Badges und Cookie-Banner von Drittanbietern als Inhalte Ihrer Seite, denn Sie haben sie eingebunden.

So prüfen Sie: Vorbereitung

• Browser: am Windows-PC Chrome, Edge oder Firefox, am Mac Safari. Am Mac stellen Sie vorher Tastaturnavigation und Safari so ein, wie es im Tastaturtest in 10 Minuten unter „Vorbereitung“ beschrieben ist; sonst überspringt Tab manche Links.
• Zwei Fensterbreiten: einmal volle Breite, einmal schmal (Fenster verkleinern oder auf 200 % zoomen). Unsere Einschätzung: Dort verdecken feste Leisten den Fokus am häufigsten.
• Ausgangszustand: Seite in einem privaten Fenster öffnen, damit das Cookie-Banner erscheint wie bei Erstbesuchern.
• Maus weglegen und das Protokoll vom Ende dieses Artikels bereithalten.

Die Tasten: Tab geht zum nächsten Element, Umschalt + Tab zum vorherigen, Escape schließt offene Fenster und Menüs. Pfeiltasten und Leertaste scrollen die Seite, aber nur, solange der Fokus auf keinem Button, Feld oder Optionsfeld liegt. Auf einem Button löst die Leertaste ihn aus; drücken Sie sie im Checkout deshalb nie auf „Zahlungspflichtig bestellen“.

Der Selbsttest Schritt für Schritt

Bei jedem einzelnen Tab-Druck stellen Sie drei Fragen:

1. Sehe ich eine Markierung? (2.4.7) Rahmen, Unterstreichung, Farbwechsel des Hintergrunds, Textcursor im Feld.
2. Hebt sie sich deutlich ab? (1.4.11) Bei einem eigenen Rahmen im Zweifel 3:1 messen; der unveränderte Fokus des Browsers ist von 1.4.11 ausgenommen.
3. Sehe ich das Element selbst, wenigstens zum Teil? (2.4.11) Oder liegt es ganz unter einer Leiste, einem Banner oder einem Widget?

Lautet eine Antwort Nein, schreiben Sie es auf.

1. Cookie-Banner beim ersten Aufruf

1. Seite neu laden, Tab drücken.
2. Landet der Fokus im Banner? Sind die Buttons „Alle akzeptieren“, „Ablehnen“ und „Einstellungen“ beim Fokus markiert?
3. Testen Sie bewusst auch den anderen Fall: Banner nicht bedienen, sondern weiter tabben. Sperrt das Banner die Seite (modal), muss der Fokus im Banner bleiben. Läuft er stattdessen über die Seite dahinter, achten Sie darauf, ob Elemente ganz hinter dem Banner verschwinden. Das ist ein Fall von 2.4.11. Liegt nur ein grauer Schleier über der Seite, prüfen Sie, ob der Fokusrahmen dort noch deutlich erkennbar ist (1.4.11).

Mehr zum Banner selbst, auch zu den üblichen Anbietern, steht in Cookie-Banner barrierefrei.

2. Kopfzeile und Menü

1. Nach dem Banner weiter durch die Kopfzeile: Sprunglink „Zum Inhalt“, Logo, Menüpunkte, Suche, Konto, Merkliste, Warenkorb-Symbol.
2. Achten Sie auf Symbol-Buttons (Lupe, Herz, Tasche). Hier fehlt der Fokus besonders oft, weil das Theme den Rahmen für Symbole entfernt hat.
3. Ist die Kopfleiste farbig, prüfen Sie, ob der Rahmen sich davon abhebt.
4. Öffnen Sie ein Untermenü und tabben Sie hindurch. Verschwindet der Fokus für mehrere Tab-Drücke, sind zugeklappte Links fokussierbar (siehe Navigationsartikel).

3. Produktseite

1. Eine Produktseite mit Varianten öffnen und vorwärts tabben bis in die Fußzeile: Bildergalerie, Farb- und Größenauswahl, Mengenfeld, „In den Warenkorb“, Reiter, Fußzeilen-Links.
2. Achten Sie besonders auf Farbfelder und Größenknöpfe: Ist der fokussierte Knopf von dem ausgewählten Knopf zu unterscheiden? Sehen beide gleich aus, wissen Sie beim Tabben nicht, wo Sie sind. Nach unserer Lesart ist das ein Fall von 2.4.7; die Behebung: Fokus mit Rahmen, Auswahl mit einer anderen Markierung.
3. Feste Warenkorb-Leiste: Viele Themes blenden beim Scrollen unten eine Leiste mit Preis und „In den Warenkorb“ ein. Verschwinden Links oder Felder beim Vorwärtstabben ganz unter dieser Leiste? Das ist F110 mit einer festen Fußleiste.
4. Chat-Knopf und Badges: Liegt der runde Chat-Knopf oder ein Bewertungs-Siegel in der Ecke über einem Link, etwa in der Fußzeile? Ist der Link vollständig verdeckt, verletzt das 2.4.11.
5. Jetzt mit Umschalt + Tab von der Fußzeile zurück nach oben. Rutscht ein Element beim Hochscrollen ganz unter die feste Kopfleiste? Das ist der zweite Fall von F110.

4. Chat-Fenster und andere Einblendungen

1. Chat-Knopf per Tastatur öffnen. Tabben Sie aus dem offenen Chat-Fenster heraus in die Seite.
2. Landet der Fokus auf einem Element, das ganz unter dem Chat-Fenster liegt? Dann drücken Sie Escape. Schließt das Fenster und wird das Element sichtbar, ist 2.4.11 nach dem Understanding erfüllt. Schließt es nicht und hilft auch Scrollen mit den Pfeiltasten nicht, ist es ein Fund.
3. Dasselbe für Newsletter-Popups und Gutschein-Leisten, die von selbst erscheinen. Für sie gilt die Escape-Ausnahme nicht: Sie dürfen den Fokus nie ganz verdecken, nehmen als modaler Dialog den Fokus selbst auf oder schließen sich, sobald sie den Fokus verlieren. Nach unserer Lesart behandeln Sie auch den Hinweis „Artikel wurde hinzugefügt“ so.

5. Warenkorb und Mini-Warenkorb

1. Mini-Warenkorb öffnen: Liegt der Fokus sichtbar in der Seitenleiste? Sind „Zur Kasse“, Mengenfelder und das Entfernen-Kreuz markiert?
2. Warenkorbseite: Mengenfeld, Aktualisieren, Gutscheinfeld, Versandrechner, „Zur Kasse“. Achten Sie auf Textlinks wie „Entfernen“, die oft nur ihre Farbe minimal ändern.

6. Checkout

1. Bis zur Zahlungsauswahl tabben: Eingabefelder, Optionsfelder für Lieferart und Zahlungsart, Kontrollkästchen, „Weiter“ und „Zahlungspflichtig bestellen“.
2. Eingabefelder zeigen den Textcursor; das reicht laut Understanding als Markierung. Optionsfelder und Kontrollkästchen, die das Theme durch eigene Grafiken ersetzt, haben dagegen oft gar keinen Fokus mehr; der Fokusstil muss dann auf das sichtbare Ersatzelement.
3. Eingebettete Zahlungsfelder (Kartennummer, PayPal-Button) kommen vom Zahlungsanbieter. Ist dort der Fokus unsichtbar, notieren Sie den Anbieter; beheben kann das nur er.
4. Viele Checkouts haben eine feste Zusammenfassung oder Kopfleiste. Auch hier vorwärts und rückwärts tabben.

7. Dasselbe im schmalen Fenster

Wiederholen Sie die Schritte 2 bis 6 im schmalen Fenster oder bei 200 % Zoom. Prüfen Sie dort besonders die feste Kopfleiste, die feste Warenkorb-Leiste und den Chat-Knopf.

Typische Ursachen und wie Sie sie beheben

Ursache 1: outline: none ohne Ersatz

Der häufigste Grund für einen unsichtbaren Fokus ist eine CSS-Regel, die den Standardrahmen des Browsers abschaltet, genau das Beispiel 1 aus F78.

So finden Sie sie. Öffnen Sie die Entwicklertools (unter Windows mit F12, sonst über das Browsermenü), wählen Sie ein Element ohne sichtbaren Fokus aus und erzwingen Sie den Fokuszustand. In Chrome laut Chrome-Dokumentation: im Bereich Elements den Reiter Styles öffnen, auf :hov klicken und das Häkchen bei der gewünschten Pseudoklasse setzen, etwa :focus-visible. In der deutschen Oberfläche können die Namen übersetzt sein. Die Stilregeln zeigen dann, welche Regel outline: none, outline: 0 oder border: none setzt und in welcher Datei sie steht. Unsere Einschätzung: In Shopify, WooCommerce und Co. liegt diese Regel meist im Theme, seltener in einem Plugin.

So beheben Sie. Die Regel entfernen oder durch einen eigenen Rahmen ersetzen (Beispiel unten). Markierungen, die kurz erscheinen und wieder verschwinden, kommen meist von einer Animation oder einem Skript; das muss weg.

Ursache 2: :focus und :focus-visible verwechselt

Viele Themes entfernen den Rahmen, weil er nach einem Mausklick stört. Laut W3C-Technik C45 gilt :focus immer, wenn ein Element den Fokus hat, egal wie. :focus-visible dagegen zeigen Browser immer bei Tastaturbedienung, nach einem Mausklick in der Regel nicht, außer bei Elementen mit Tastatureingabe wie Textfeldern. C45 sagt ausdrücklich, dass das die Anforderung eines Bedienmodus mit sichtbarem Fokus erfüllt. Laut MDN funktioniert :focus-visible seit März 2022 in allen gängigen Browsern.

Die Regel für Ihr Theme: Gestalten Sie den Fokus mit :focus-visible. Entfernen Sie nie den Rahmen bei :focus, ohne für :focus-visible einen eigenen zu setzen. C45 rät zusätzlich, zu erwägen, auch Mausnutzern einen Fokus zu zeigen, wo er ihnen hilft.

Ursache 3: Rahmen geht in der Umgebung unter

Ein dünner dunkler Rahmen auf dunkler Kopfleiste, ein blauer Rahmen auf blauem Button, ein Rand in derselben Farbe wie der Fokusrahmen (Beispiel 3 in F78). Für einen Shop mit hellen und dunklen Flächen empfiehlt das W3C mit C40 einen zweifarbigen Rahmen: Haben die beiden Farben mindestens 9:1 Kontrast zueinander, erreicht laut C40 mindestens eine von beiden 3:1 gegen jede einfarbige Hintergrundfarbe. Bei Hintergrundbildern und Verläufen müssen Sie trotzdem einzeln messen.

C40 warnt außerdem vor box-shadow allein, denn Browser unterdrücken Schatten häufig im Modus für erzwungene Farben (etwa Kontrastdesigns unter Windows). Wer nur einen Schatten will, ergänzt outline: 2px solid transparent.

Ursache 4: feste Kopfleiste, Warenkorb-Leiste oder Banner

Laut MDN zu scroll-padding-top schließt die Eigenschaft Bereiche, die etwa von festen Werkzeugleisten verdeckt sind, aus dem Sichtbereich aus, in den der Browser etwas holt. Die W3C-Technik C43 nutzt genau das, im Beispiel mit scroll-padding-bottom für ein festes Banner unten, wie es für Cookie-Banner üblich ist. Für eine feste Kopfleiste ist es dieselbe Regel mit scroll-padding-top.

So gehen Sie vor:

1. Höhe der festen Leiste bei Ihrem Theme-Entwickler erfragen, und zwar für beide Fensterbreiten.
2. Im CSS scroll-padding-top auf diese Höhe plus etwas Luft setzen, für eine feste Leiste unten scroll-padding-bottom.
3. Bei einer festen Leiste unten zusätzlich padding-bottom in Höhe der Leiste setzen, damit auch die letzten Links der Fußzeile über die Leiste scrollen können. So macht es auch die W3C-Technik C43.
4. Ändert sich die Höhe der Leiste je nach Fensterbreite, braucht jede Breite ihren Wert.
5. Danach den Test aus Schritt 3 vorwärts und rückwärts wiederholen. Unsere Empfehlung: in jedem Browser, den Sie unterstützen, denn ob scroll-padding beim Tabben greift, sehen Sie nur im Test.

Für Chat-Knopf und Badges hilft scroll-padding nur, wenn sie über die ganze Breite gehen; sonst platzieren Sie den Knopf so, dass er keine Links überdeckt, etwa mit Abstand unter der Fußzeile.

Das CSS-Beispiel

Das Beispiel wirkt nur, wenn keine genauere Regel im Theme den Rahmen wieder abschaltet. Entfernen Sie deshalb zuerst jede gefundene outline: none Regel aus Ursache 1 und prüfen Sie danach mit dem Tab-Test, ob der neue Rahmen überall erscheint.

Die Farben stammen aus der Technik C40, die Pixelwerte sind Beispiele für Ihre eigenen Höhen. Ein einfarbiger Rahmen wie outline: 3px solid #1a1a1a; outline-offset: 2px; geht auch; dann messen Sie den Kontrast gegen jede Hintergrundfarbe.

Für Ihren Theme-Anbieter oder Ihre Agentur: „Bitte einen sichtbaren Fokus mit :focus-visible und mindestens 3:1 Kontrast (WCAG 1.4.11), keine outline: none ohne Ersatz (W3C F78), und scroll-padding für feste Leisten nach W3C-Technik C43 (WCAG 2.4.11).“

Protokoll und Checkliste

Protokoll zum Ausfüllen

Datum: ______ · Geprüft von: ______ · Browser und Version: ______ · Fensterbreite oder Zoom: ______ · Theme und Version: ______

Füllen Sie es für beide Fensterbreiten aus; es belegt auch, wann Sie geprüft haben.

Checkliste

2.4.7 Fokus sichtbar

• Jedes Bedienelement zeigt beim Tabben dauerhaft eine Markierung, auch Symbol-Buttons, Farbfelder, Größen- und Mengenknöpfe, eigene Kontrollkästchen und Optionsfelder.
• Fokussierte und ausgewählte Varianten sind unterscheidbar.
• Im Theme-CSS kein outline: none oder outline: 0 ohne Ersatz; der Fokus ist mit :focus-visible gestaltet.

1.4.11 Kontrast des Fokus

• Eigener Fokusrahmen hat mindestens 3:1 zur Farbe direkt daneben, auf jeder Hintergrundfarbe, auch unter halbtransparenten Schleiern.
• Fokus nicht allein über box-shadow.

2.4.11 Fokus nicht verdeckt

• Vorwärts und rückwärts getabbt, auf jeder geprüften Seite, in beiden Fensterbreiten.
• Feste Kopfleiste, Warenkorb-Leiste, Cookie-Banner, Chat-Knopf und Badges verdecken nie ein Element vollständig.
• Von selbst erscheinende Hinweise und Popups verdecken den Fokus nie ganz.
• scroll-padding und padding-bottom passen zur Leistenhöhe in jeder Fensterbreite.

Freiwillig (AAA)

• Fokusrahmen mindestens 2 CSS-Pixel dick und mindestens 3:1 zwischen fokussiertem und nicht fokussiertem Zustand (2.4.13).
• Kein Teil des fokussierten Elements verdeckt (2.4.12).

Dokumentation

• Funde im Theme an Theme-Anbieter oder Agentur, Funde in Widgets und Zahlungsfeldern an deren Anbieter.
• Nach jeder Behebung und nach jedem Theme-Update denselben Test wiederholt.

Ihr nächster Schritt

Machen Sie zusätzlich den kostenlosen Scan. Er prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Als automatische Prüfung findet er nur einen Teil der Barrieren; ob der Fokus beim Tabben sichtbar bleibt und ob eine feste Leiste ihn verdeckt, prüfen Sie selbst mit der Checkliste oben.

Stand: 30.10.2026. Quellen gelesen am 30.10.2026.