2.4.12 Fokus nicht verdeckt (erweitert)

1. Was ist das Ziel dieses Kriteriums?

Schon mal versucht, mit der Tastatur durch eine Website zu navigieren, nur um zu merken, dass du plötzlich nicht mehr weißt, wo du eigentlich bist? Das passiert schneller als gedacht – gerade bei modernen Websites mit Cookie-Bannern, fixierten Headern und schwebenden Chat-Fenstern.

Menschen, die auf die Tastatur angewiesen sind – sei es wegen motorischer Einschränkungen, einer Sehbehinderung oder einfach aus praktischen Gründen – müssen jederzeit sehen, welches Element gerade den Fokus hat. Wird der Fokus von anderen Inhalten verdeckt, tappen sie buchstäblich im Dunkeln.

Das Ziel von Erfolgskriterium 2.4.12 ist daher klar: Wenn ein Element den Tastaturfokus erhält, darf kein Teil davon von anderen Inhalten verdeckt sein – das gesamte Element muss sichtbar bleiben.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um eine einfache Regel: Sobald ein Bedienelement per Tastatur fokussiert wird, darf kein Inhalt, den du als Autor:in erstellt hast, auch nur einen Teil dieses Elements verdecken.

Das bedeutet:

• Fixierte Header und Footer dürfen fokussierte Elemente auch nicht teilweise überlagern.
• Cookie-Banner dürfen kein fokussiertes Element verdecken – auch nicht nur eine Ecke davon.
• Schwebende Chat-Fenster oder Benachrichtigungen dürfen fokussierte Elemente nicht anschneiden.
• Modale Dialoge sind in Ordnung: Der Fokus liegt dann im Dialog, und das fokussierte Element ist vollständig sichtbar.

Unterschied zu Fokus nicht verdeckt (Minimum): Bei der AA-Variante darf das fokussierte Element teilweise verdeckt sein – die strengere AAA-Variante 2.4.12 verlangt, dass es vollständig sichtbar ist. Anders als 2.4.11 enthält der Normtext von 2.4.12 keine ergänzenden Hinweise zu verschiebbaren oder vom Nutzer geöffneten Inhalten.

Praxis-Tipp: Inhalte, die Nutzer:innen selbst öffnen, wie ein Ausklappmenü, sollten sich trotzdem jederzeit mit Esc schließen lassen, ohne dass der Fokus springt.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du navigierst mit der Tastatur durch einen Onlineshop und willst den „Kaufen“-Button drücken – aber ein Cookie-Banner verdeckt die untere Hälfte. Mit Glück siehst du noch einen Rand des Fokusrahmens, aber nicht mehr, was auf dem Button steht.

Ein vollständig sichtbarer Fokus schafft Barrierefreiheit, weil er:

• Menschen mit motorischen Einschränkungen hilft, die nur Tastatur oder Schalter nutzen können
• Menschen mit Sehbehinderung Orientierung gibt, besonders bei Vergrößerungssoftware
• Menschen mit Aufmerksamkeits- oder Gedächtnisschwierigkeiten hilft, ihren Platz auf der Seite zu behalten
• Menschen mit Sprachsteuerung unterstützt, die über Tastaturbefehle arbeiten

Und nicht zuletzt: Ein vollständig sichtbarer Fokus verbessert die Bedienbarkeit für alle – auch für Menschen, die nur vorübergehend auf die Tastatur angewiesen sind.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Oft reichen schon kleine Anpassungen im CSS. Hier ein paar bewährte Praxis-Tipps:

CSS scroll-padding einsetzen: So sorgst du dafür, dass Browser fokussierte Elemente nicht hinter fixierten Bereichen einscrollen. Plane dabei auch Platz für den Fokusrahmen selbst ein:

html {
  scroll-padding-top: 6rem; /* Höhe des Headers plus Luft für den Fokusrahmen */
}

Cookie-Banner und Benachrichtigungen:

• Mache sie modal, sodass sie erst geschlossen werden müssen, bevor es weitergeht.
• Oder platziere sie so, dass sie keinen Inhalt überlagern, z. B. im normalen Seitenfluss am Seitenanfang.

Schwebende Elemente vermeiden:

• Nutze position: sticky oder position: fixed sparsam und nur dort, wo es wirklich hilft.
• Plane Platz für wichtige Elemente ein, statt sie zu überlagern.
• Prüfe, ob fixierte Elemente bei hoher Vergrößerung noch sinnvoll sind – oft ist es besser, sie bei kleinen Viewports wieder in den Seitenfluss zu holen.

Chat-Fenster und Hilfe-Widgets:

• Lass sie geschlossen starten, als kleinen Button, der nichts verdeckt.
• Biete eine Möglichkeit zum Schließen per Esc.
• Geöffnet sollten sie den Fokus übernehmen und beim Schließen zurückgeben.

Prüfen:

• Gehe jedes fokussierbare Element mit der Tab-Taste durch – vorwärts und rückwärts.
• Achte darauf, ob irgendein Teil des Elements oder seines Fokusrahmens angeschnitten ist.
• Teste bei verschiedenen Zoomstufen (mindestens 200 %) und auf kleinen Bildschirmen, wo der Platz knapp ist.

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

2.4.12 ist ein AAA-Kriterium aus WCAG 2.2 und weder über das BFSG noch über die BITV 2.0 verpflichtend – die zugrunde liegende EN 301 549 verlangt WCAG 2.1 Level AA. Wer es umsetzt, erfüllt aber automatisch auch die AA-Variante 2.4.11.

1. Mehr Menschen erreichen

Eine Website, die mit der Tastatur sauber bedienbar ist, erreicht mehr Menschen: Menschen mit Behinderungen, ältere Menschen, geübte Tastaturnutzer:innen und Menschen in besonderen Situationen – etwa mit defekter Maus.

2. Klarere Oberflächen

Wer auf überlagernde Elemente verzichtet, bekommt fast automatisch ein aufgeräumteres Layout. Das kommt allen zugute, gerade auf kleinen Bildschirmen.

3. Nutzererfahrung für alle verbessern

Ein klarer, vollständig sichtbarer Fokus macht deine Website übersichtlicher und verlässlicher. Das führt zu weniger Abbrüchen in wichtigen Abläufen.

Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 2.4.12 Focus Not Obscured (Enhanced) (Level AAA)

When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.

Kurz gesagt: Erhält ein Bedienelement den Tastaturfokus, darf kein Teil davon durch Inhalte der Website verdeckt sein.