2.4.13 Fokuserscheinung

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du navigierst mit der Tastatur durch eine Website – aber der Fokus ist so schwach, dass du ständig die Orientierung verlierst. Wie ein Lichtkegel in der Dunkelheit, der so schwach ist, dass du nicht erkennst, wohin er zeigt.

Menschen mit Sehbehinderungen, motorischen Einschränkungen oder alle, die aus praktischen Gründen die Tastatur nutzen, sind darauf angewiesen, dass der Fokus klar und deutlich sichtbar ist. Das Ziel von Erfolgskriterium 2.4.13 der WCAG ist daher eindeutig: Der Tastaturfokus muss nicht nur vorhanden sein, sondern auch groß und kontrastreich genug, um für alle erkennbar zu sein.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um die Sichtbarkeit von Fokusindikatoren bei Tastaturnavigation. Wenn ein Element den Tastaturfokus erhält, muss der Fokusindikator zwei zentrale Anforderungen erfüllen:

Mindestgröße: Der Fokusindikator muss mindestens so groß sein wie ein 2 CSS-Pixel dicker Umriss um das entsprechende Element. Das bedeutet nicht, dass es zwingend ein Umriss sein muss – andere Formen sind erlaubt, solange sie die gleiche Fläche abdecken.

Kontrast: Der Kontrastverhältnis zwischen dem fokussierten und nicht-fokussierten Zustand muss mindestens 3:1 betragen. Es geht also nicht um den Kontrast zum Hintergrund, sondern um die Änderung zwischen den beiden Zuständen.

Ausnahmen gelten nur dann, wenn der Fokusindikator vom Browser stammt und nicht durch den Autor angepasst werden kann, oder wenn weder der Indikator noch dessen Hintergrundfarbe verändert wurden.

Ein einfaches Beispiel: Ein Button mit einem schwarzen Umriss im fokussierten Zustand, der vorher keinen Umriss hatte, erfüllt das Kriterium – vorausgesetzt, der Umriss ist dick genug und der Kontrast stimmt.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du versuchst, ein Online-Formular mit der Tastatur auszufüllen, aber der Fokus ist so schwach, dass du nicht erkennst, in welchem Feld du gerade bist. Frustrierend für jeden – unmöglich für Menschen mit Sehbehinderungen.

Ein klar sichtbarer Fokusindikator schafft Barrierefreiheit, weil er:

• Menschen mit eingeschränkter Sehkraft hilft, den aktuellen Fokuspunkt zu identifizieren
• Nutzer mit motorischen Einschränkungen unterstützt, die auf Tastaturnavigation angewiesen sind
• Allen Tastaturnutzern die Orientierung erleichtert – auch ohne Beeinträchtigungen
• Die Bedienbarkeit in schwierigen Lichtverhältnissen oder bei Ablenkungen verbessert
• Auch bei Vergrößerungen oder angepassten Anzeigeeinstellungen funktioniert

Und nicht zuletzt: Ein gut sichtbarer Fokus macht die Navigation für alle effizienter und weniger ermüdend – ein echter Gewinn für die Nutzererfahrung.

4. So setzt du das Kriterium erfolgreich um

Die Qualität der Fokusindikatoren entscheidet darüber, ob eine Website wirklich barrierefrei ist – oder nur oberflächlich den Standards entspricht. Hier ein paar bewährte Praxis-Tipps:

Grundregeln für gute Fokusindikatoren:

• Verwende einen mindestens 2px dicken, soliden Umriss als einfachste Lösung
• Stelle sicher, dass der Kontrast zwischen fokussiert und nicht-fokussiert mindestens 3:1 beträgt
• Positioniere den Indikator so, dass er nicht von anderen Elementen verdeckt wird
• Teste mit echten Tastaturnutzern – besonders mit Menschen mit Sehbehinderungen
• Verwende CSS outline und outline-offset für optimale Darstellung

Technische Umsetzung:

.button:focus {
    outline: 2px solid #0066cc;
        outline-offset: 2px;

}

Für komplexe Komponenten:

• Bei Komponenten mit Unterkomponenten (wie Tabs) kann entweder das Gesamtelement oder das Unterelement fokussiert werden
• Bevorzuge Indikatoren, die mit der Größe des Elements skalieren
• Teste verschiedene Darstellungsgrößen (responsive Design)

Häufige Fehler vermeiden:

• Nicht einfach outline: none setzen, ohne Alternative zu bieten
• Nicht nur Farbänderungen verwenden – diese reichen oft nicht aus
• Nicht vergessen, auch bei selbst erstellten Komponenten Fokusindikatoren vorzusehen

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

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

1. Nutzerfreundlichkeit für alle verbessern Klar sichtbare Fokusindikatoren machen die Tastaturnavigation nicht nur für Menschen mit Behinderungen einfacher. Auch Power-User, die aus Effizienzgründen die Tastatur bevorzugen, profitieren von besserer Orientierung und schnellerer Navigation.

2. Rechtssicherheit und Compliance stärken Viele Branchen und öffentliche Aufträge fordern mittlerweile AAA-Level-Konformität für kritische Anwendungen. Wer schon heute die höchsten Standards erfüllt, ist für zukünftige Anforderungen gerüstet und vermeidet kostspielige nachträgliche Anpassungen.

3. Markenwahrnehmung und Inklusion fördern Unternehmen, die auch bei Details wie Fokusindikatoren an alle Nutzer denken, signalisieren echte Inklusivität. Das stärkt das Markenimage und zeigt, dass Barrierefreiheit ernst genommen wird – nicht nur oberflächlich abgehakt.

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 W3

Success Criterion 2.4.13 Focus Appearance (Level AAA)

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Exceptions:

• The focus indicator is determined by the user agent and cannot be adjusted by the author, or
• The focus indicator and the indicator's background color are not modified by the author.

← Zurück zur WCAG-Übersicht