2.4.11 Focus Not Obscured (Minimum)

1. Was ist das Ziel dieses Kriteriums?

Tastaturnavigation gehört zum Internet wie das Smartphone zur Mittagspause. Aber was passiert, wenn du mit der Tab-Taste durch eine Website navigierst und plötzlich nicht mehr siehst, wo du bist? Der Fokus ist da, aber versteckt sich hinter einem Cookie-Banner, einem klebrigen Header oder einem Chat-Widget.

Das Ziel von Erfolgskriterium 2.4.11 der WCAG ist daher klar: Wenn ein Element den Tastaturfokus erhält, muss es zumindest teilweise sichtbar bleiben. Keine Element darf durch andere Inhalte komplett verdeckt werden – sonst weiß der Nutzer nicht mehr, wo er sich befindet.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um Level AA-Anforderungen für die Tastaturfokus-Sichtbarkeit:

Grundregel: Wenn ein Element per Tastatur fokussiert wird, darf es nicht vollständig durch autor-erstellte Inhalte versteckt werden.

Teilweise Verdeckung ist erlaubt: Im Unterschied zum AAA-Level darf ein fokussiertes Element durchaus teilweise verdeckt sein – solange noch ein Teil sichtbar bleibt.

Typische Verursacher von Verdeckungen:

• Sticky Header und Footer
• Cookie-Banner und Notifications
• Non-modale Dialoge
• Chat-Widgets und Tooltips

Ausnahmen gelten für:

• Inhalte, die der Nutzer selbst verschoben hat (nur die Ausgangsposition wird bewertet)
• Vom Nutzer geöffnete Inhalte, die sich wieder schließen lassen, ohne den Fokus zu ändern

Ein einfaches Beispiel: Ein Cookie-Banner, der fokussierte Links komplett verdeckt, verletzt dieses Kriterium – es sei denn, er ist modal und zwingt den Nutzer, ihn zu schließen, bevor weiternavigiert werden kann.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du navigierst mit der Tastatur durch eine E-Commerce-Website und willst den "Kaufen"-Button erreichen – aber ein Chat-Widget verdeckt ihn komplett. Du weißt nicht, ob der Fokus angekommen ist oder ob das System hängt.

Focus Not Obscured schafft Barrierefreiheit, weil es:

• Menschen mit motorischen Einschränkungen hilft, die auf Tastaturnavigation angewiesen sind
• Nutzern von Sprachsteuerung und Switch-Geräten ermöglicht, den aktuellen Fokuspunkt zu erkennen
• Menschen mit Sehbehinderungen unterstützt, die vergrößerte Ansichten verwenden
• Nutzern mit Aufmerksamkeits- oder Gedächtnisschwierigkeiten hilft, ihre Position zu verfolgen
• Die Orientierung für alle verbessert, die temporär keine Maus verwenden können

Und nicht zuletzt: Es macht die Navigation vorhersagbar und verlässlich – auch für Suchmaschinen-Crawler und automatisierte Tests.

4. So setzt du das Kriterium erfolgreich um

Die Qualität der Fokus-Sichtbarkeit entscheidet darüber, ob eine Website wirklich nutzbar ist. Hier ein paar bewährte Praxis-Tipps:

Grundregeln für sichtbaren Fokus:

• Verwende CSS scroll-padding, um Überlappungen mit fixen Elementen zu vermeiden
• Implementiere modale Dialoge richtig – sie übernehmen den Fokus und verhindern Navigation dahinter
• Teste alle Breakpoints deines Responsive Designs auf Fokus-Verdeckung
• Achte darauf, dass Notifications sich schließen, wenn sie den Fokus verlieren

Technische Umsetzung:

/* Verhindert Überlappung mit sticky Header */

html {
    scroll-padding-top: 60px;

}


/* Oder für komplexere Layouts */

.main-content {
    scroll-padding: 2rem 0 4rem 0;

}

Do's:

• Nutze scroll-padding für sticky Elemente
• Implementiere echte modale Dialoge für Notifications
• Teste mit aktivierter Tastaturnavigation
• Berücksichtige verschiedene Bildschirmgrößen

Don'ts:

• Lass Cookie-Banner oder Notifications dauerhaft über anderen Inhalten schweben
• Verstecke den Fokus komplett hinter fixen Elementen
• Vergiss Tests bei unterschiedlichen Zoom-Stufen
• Ignoriere die Reihenfolge der Tab-Navigation

Tools und Testing:

• Browser-Entwicklertools für Fokus-Simulation
• axe-core DevTools für automatisierte Tests
• Manual Testing mit reiner Tastaturnavigation
• Lighthouse Accessibility Audit

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

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

1. Zielgruppe erweitern

Fokussierte Navigation ist nicht nur für Menschen mit Behinderungen wichtig. Power-User, Entwickler und alle, die efizient navigieren wollen, nutzen Tastaturrnavigation. Eine klare Fokus-Führung macht deine Website für alle zugänglicher und professioneller.

2. Conversion-Rate verbessern

Wenn Nutzer bei der Navigation den Fokus verlieren, brechen sie ab. Besonders kritisch wird das bei Checkout-Prozessen oder Formularen. Eine klare Fokus-Sichtbarkeit reduziert Abbruchquoten und verbessert die User Experience messbar.

3. Support-Anfragen reduzieren

"Ich weiß nicht, wo ich bin" oder "Die Website reagiert nicht" – solche Support-Tickets entstehen oft durch schlechte Fokus-Führung. Eine saubere Implementation spart Support-Kosten und verbessert die Kundenzufriedenheit.

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.11 Focus Not Obscured (Minimum)

(Level AA)

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

Note 1: Where content in a configurable interface can be repositioned by the user, then only the initial positions of user-movable content are considered for testing and conformance of this success criterion.

Note 2: Content opened by the user may obscure the component receiving focus. If the user can reveal the focused component without advancing the keyboard focus, the component with focus is not considered visually hidden due to author-created content.

Link zum konkreten Erfolgskriterium

← Zurück zur WCAG-Übersicht