--- title: "Fokusdarstellung" url: "https://barrierefreihochzwei.de/de/wcag/2-4-13-fokusdarstellung" language: "de" description: "WCAG 2.4.13 legt fest, wie groß und kontrastreich ein Fokusindikator sein muss. Du erfährst die Schwellenwerte und wie du sie per CSS sicher erreichst." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:42:00+02:00" --- # Fokusdarstellung Wenn der Fokus sichtbar werden muss. - **Erfolgskriterium:** 2.4.13 - **Prinzip:** Bedienbar - **Konformitätsstufe:** Level AAA - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/focu...](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html) Erfolgskriterium 2.4.13 # 2.4.13 Fokusdarstellung Level AAABedienbar Wenn der Fokus sichtbar werden muss. ## 1. Was ist das Ziel dieses Kriteriums? Stell dir vor, du navigierst mit der Tastatur durch eine Website – aber der Fokus ist so blass, 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 Sehbehinderung, mit motorischen Einschränkungen und alle, die aus praktischen Gründen die Tastatur nutzen, sind darauf angewiesen, dass der Fokus klar und deutlich zu sehen 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 gut erkennbar zu sein. ## 2. Was fordert das Erfolgskriterium genau? Ganz konkret geht es um die Darstellung des Fokusindikators. Wenn er sichtbar ist, muss ein Bereich des Indikators zwei Anforderungen gleichzeitig erfüllen: **Mindestgröße:** Der Bereich ist mindestens so groß wie ein 2 CSS-Pixel dicker Umriss um das nicht fokussierte Element bzw. Teilelement. Es muss kein Umriss sein – andere Formen sind erlaubt, solange sie mindestens dieselbe Fläche abdecken. Für ein Rechteck entspricht das ungefähr 4 × Breite + 4 × Höhe; bei einem Button von 120 × 40 Pixeln also rund 640 Quadratpixel. **Kontrast:** Dieselben Pixel haben im fokussierten und im nicht fokussierten Zustand ein Kontrastverhältnis von mindestens 3:1. Es geht also um die Veränderung zwischen den beiden Zuständen, nicht um den Kontrast zum Hintergrund. **Ausnahmen** gelten, wenn der Fokusindikator vom Browser bestimmt wird und du ihn nicht anpassen kannst, oder wenn du weder den Indikator noch seine Hintergrundfarbe verändert hast – der unveränderte Standard-Fokus des Browsers fällt also nicht unter dieses Kriterium. **Einordnung:** Dass überhaupt ein Fokus sichtbar ist, verlangt bereits [Fokus sichtbar](https://barrierefreihochzwei.de/de/wcag/2-4-7-fokus-sichtbar) auf Stufe AA. 2.4.13 legt nun konkrete Werte für Größe und Kontrast fest. Den Kontrast von Bedienelementen und Zuständen zur Umgebung regelt außerdem [Nicht-Text-Kontrast](https://barrierefreihochzwei.de/de/wcag/1-4-11-nicht-text-kontrast). Ein einfaches Beispiel: Ein Button bekommt im Fokus einen durchgehenden dunkelblauen Rahmen von 2 Pixeln, den er vorher nicht hatte, auf weißem Hintergrund. Größe und Kontrastwechsel stimmen – das Kriterium ist erfüllt. ## 3. Warum ist das wichtig für Barrierefreiheit? Stell dir vor, du versuchst, ein 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 alle – für Menschen mit Sehbehinderung schlicht unmöglich. Ein klar sichtbarer Fokusindikator schafft Barrierefreiheit, weil er: - Menschen mit eingeschränkter Sehkraft hilft, den aktuellen Fokuspunkt zu finden - Menschen mit motorischen Einschränkungen unterstützt, die auf die Tastatur angewiesen sind - allen Tastaturnutzer:innen die Orientierung erleichtert - auch bei schwierigen Lichtverhältnissen, etwa Sonnenlicht auf dem Display, erkennbar bleibt - bei Vergrößerung oder angepassten Anzeigeeinstellungen funktioniert Und nicht zuletzt: Ein gut sichtbarer Fokus macht die Bedienung für alle effizienter und weniger ermüdend. ## 4. So setzt du das Kriterium erfolgreich um Die Qualität der Fokusindikatoren entscheidet darüber, ob eine Website mit der Tastatur wirklich bedienbar ist. Hier ein paar bewährte Praxis-Tipps: **Grundregeln für gute Fokusindikatoren:** - Ein durchgehender Umriss von mindestens 2 Pixeln, der außen um das Element läuft, ist die einfachste sichere Lösung – außen liegend ist er immer größer als die geforderte Fläche. - Stelle sicher, dass der Kontrast zwischen fokussiertem und nicht fokussiertem Zustand mindestens 3:1 beträgt. - Achte darauf, dass der Indikator nicht verdeckt oder abgeschnitten wird, etwa durch `overflow: hidden` beim Elternelement. - Verwende `outline` und `outline-offset`; Umrisse bleiben auch im Modus für erzwungene Farben (z. B. Kontrastdesigns unter Windows) sichtbar. - Nutze `:focus-visible`, damit der Indikator bei Tastaturbedienung zuverlässig erscheint. **Technische Umsetzung:** ``` .button:focus-visible { outline: 2px solid #0050a0; outline-offset: 2px; } ``` **Für komplexe Komponenten:** - Bei Komponenten mit Teilelementen, etwa Menüpunkten in einem geöffneten Menü oder Zellen in einem Raster, wird die Fläche am fokussierten Teilelement gemessen. - Schatten- und Leuchteffekte außerhalb des Elements zählen bei der Bestimmung des Umrisses nicht mit. - Teste verschiedene Darstellungsgrößen und Farbschemata, auch den Dunkelmodus. **Häufige Fehler vermeiden:** - Nicht einfach `outline: none` setzen, ohne eine gleichwertige Alternative zu bieten. - Dünne Unterstreichungen oder leichte Farbverschiebungen reichen meist nicht: Eine Farbänderung erfüllt das Kriterium nur, wenn sie groß genug ist und dieselben Pixel um mindestens 3:1 wechseln. - Nicht vergessen, auch bei selbst gebauten Komponenten Fokusindikatoren vorzusehen. ## 5. Warum dieses Erfolgskriterium für Unternehmen relevant ist 2.4.13 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. Als konkreter Maßstab für einen guten Fokus ist es trotzdem sehr nützlich, etwa als Vorgabe im Designsystem. ### 1. Nutzerfreundlichkeit für alle verbessern Klar sichtbare Fokusindikatoren machen die Tastaturbedienung nicht nur für Menschen mit Behinderungen einfacher. Auch geübte Tastaturnutzer:innen finden sich schneller zurecht. ### 2. Klare Vorgaben im Designsystem Statt bei jeder Komponente neu über den Fokus zu diskutieren, liefert 2.4.13 messbare Werte. Einmal im Designsystem verankert, spart das Abstimmungen und Nacharbeiten – und das verpflichtende 2.4.7 ist gleich mit abgedeckt. ### 3. Markenwahrnehmung und Inklusion fördern Unternehmen, die auch bei Details wie Fokusindikatoren an alle denken, zeigen, dass sie Barrierefreiheit ernst nehmen – und nicht nur oberflächlich abhaken. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung. ## 6. Das Erfolgskriterium im Wortlaut des W3C > **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. > > Note 1: What is perceived as the user interface component or sub-component (to determine the perimeter) depends on its visual presentation. The visual presentation includes the component’s visible content, border, and component-specific background. It does not include shadow and glow effects outside the component’s content, background, or border. > > Note 2: Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid. > > Note 3: Contrast calculations can be based on colors defined within the technology (such as HTML, CSS, and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored. Kurz gesagt: Ein sichtbarer Fokusindikator muss mindestens die Fläche eines 2 Pixel dicken Umrisses haben und zwischen fokussiertem und nicht fokussiertem Zustand einen Kontrast von mindestens 3:1 erreichen – außer beim unveränderten Browser-Standard. **Offizielle Erklärung beim W3C** Das W3C erklärt jedes Erfolgskriterium ausführlich – mit Absicht, Beispielen und Techniken (auf Englisch). [Understanding 2.4.13](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html) ## Weitere Kriterien aus „Bedienbar“ [ 2.1.1 Level A ### Tastatur Wenn jeder Klick auch ein Tastendruck sein kann. ](https://barrierefreihochzwei.de/de/wcag/2-1-1-tastatur) [ 2.1.2 Level A ### Keine Tastaturfalle Wenn der Ausgang fehlt. ](https://barrierefreihochzwei.de/de/wcag/2-1-2-keine-tastaturfalle) [ 2.1.3 Level AAA ### Tastatur (keine Ausnahme) Wenn wirklich alles per Tastatur gehen muss. ](https://barrierefreihochzwei.de/de/wcag/2-1-3-tastatur-keine-ausnahme)