2.4.12 Focus Not Obscured (Enhanced)

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 ihren Cookie-Bannern, Sticky-Headers und schwebenden Chat-Fenstern.

Menschen, die auf Tastaturnavigation angewiesen sind – sei es aufgrund von motorischen Einschränkungen, Sehbehinderungen oder einfach aus praktischen Gründen – brauchen jederzeit zu sehen, welches Element gerade den Fokus hat. Wenn dieser Fokus von anderen Inhalten verdeckt wird, sind sie buchstäblich im Dunkeln.

Das Ziel von Erfolgskriterium 2.4.12 ist daher klar: Wenn ein Element den Tastaturfokus erhält, darf es überhaupt nicht von anderen Inhalten verdeckt werden – das gesamte Element muss sichtbar bleiben.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um eine einfache Regel: Sobald ein Interface-Element per Tastatur fokussiert wird, darf kein vom Autor erstellter Inhalt auch nur einen Teil dieses Elements verdecken.

Das bedeutet:

• Sticky-Header dürfen fokussierte Elemente nicht komplett überlagern
• Cookie-Banner müssen so positioniert sein, dass sie nicht alle fokussierten Buttons verdecken
• Schwebende Chat-Fenster oder Benachrichtigungen dürfen die Navigation nicht unsichtbar machen
• Modal-Dialoge sind in Ordnung, da sie den Fokus selbst übernehmen

Wichtige Ausnahmen:

• Inhalte, die der Nutzer selbst öffnet (z.B. Dropdown-Menüs), sind erlaubt – solange sie nicht dauerhaft geöffnet bleiben
• Verschiebbare Interface-Elemente werden nur in ihrer Ausgangsposition bewertet
• Der Nutzer darf fokussierte Elemente sichtbar machen können, ohne den Fokus zu verlieren (z.B. durch Escape-Taste)

Unterschied zu 2.4.11 (Level AA): Bei der Minimum-Variante darf das fokussierte Element teilweise verdeckt werden – die strengere AAA-Variante 2.4.12 verlangt vollständige Sichtbarkeit.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du navigierst mit der Tastatur durch einen Online-Shop und willst den "Kaufen"-Button drücken – aber ein Cookie-Banner verdeckt ihn komplett. Du weißt nicht einmal, dass du bereits am richtigen Element angekommen bist.

Sichtbare Fokusindikatoren schaffen Barrierefreiheit, weil sie:

• Menschen mit motorischen Einschränkungen helfen, die nur Tastatur oder Switch-Geräte nutzen können
• Sehbehinderten Nutzern Orientierung geben, besonders bei Verwendung von Vergrößerungssoftware
• Menschen mit Aufmerksamkeitsstörungen oder Gedächtnisproblemen dabei helfen, ihren Platz auf der Seite zu behalten
• Nutzer mit Sprachsteuerung unterstützen, die über die Tastaturschnittstelle arbeiten

Und nicht zuletzt: Sie verbessern die Nutzbarkeit für alle – auch für Menschen ohne Einschränkungen, die temporär auf die Tastatur angewiesen sind.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Oft reichen schon kleine Anpassungen im CSS, um dieses Problem zu lösen. Hier ein paar bewährte Praxis-Tipps:

CSS scroll-padding einsetzen: Nutze scroll-padding in deinem CSS, um sicherzustellen, dass fokussierte Elemente nicht von Sticky-Elementen verdeckt werden:

html {
    scroll-padding-top: 80px; /* Höhe des Sticky-Headers */

}

Cookie-Banner und Benachrichtigungen:

• Mache sie modal, sodass Nutzer sie erst schließen müssen, bevor sie weiternavigieren können
• Oder positioniere sie so, dass sie wichtige Inhalte nicht überlagern
• Lass sie automatisch verschwinden, wenn sie den Fokus verlieren

Schwebende Elemente vermeiden:

• Nutze position: relative statt position: fixed wo möglich
• Plane Platz für wichtige Interface-Elemente ein, anstatt sie zu überlagern
• Verwende responsive Layouts, die sich an verschiedene Bildschirmgrößen anpassen

Chat-Fenster und Hilfe-Widgets:

• Biete eine Escape-Taste zum Schließen an
• Stelle sicher, dass sie nicht die gesamte Navigation verdecken
• Implementiere sie als echte Modals mit Fokus-Management

Tools und Techniken:

• Teste deine Website mit der Tab-Taste – gehe jeden fokussierbaren Element durch
• Nutze Browser-Entwicklertools, um Fokus-Events zu verfolgen
• Teste bei verschiedenen Zoom-Stufen (bis 200%)
• Prüfe auf mobilen Geräten, wo der verfügbare Platz begrenzt ist

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Auch bei Erfolgskriterium 2.4.12 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.

1. Zielgruppe erweitern

Eine Website, die auch mit der Tastatur perfekt bedienbar ist, erreicht mehr Menschen: Nutzer mit Behinderungen, ältere Menschen, Power-User, die Tastatur-Shortcuts bevorzugen, und Menschen in besonderen Nutzungssituationen (defekte Maus, unterwegs im Zug, etc.).

2. Suchmaschinenoptimierung verbessern

Suchmaschinen-Crawler navigieren ähnlich wie Tastaturnutzer durch deine Website. Eine gut strukturierte, tastaturzugängliche Navigation hilft auch dabei, dass deine Inhalte vollständig indexiert werden.

3. Nutzererfahrung für alle verbessern

Klare Fokus-Indikatoren und unverdeckte Navigation machen deine Website nicht nur barrierefrei – sie machen sie für alle Nutzer übersichtlicher und verlässlicher. Das führt zu weniger Abbrüchen und mehr Conversions.

Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.

6. Das Erfolgskriterium im Wortlaut der 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.

← Zurück zur WCAG-Übersicht