Erfolgskriterium 2.4.13
Fokus Erscheinungsbild (Focus Appearance)

WCAG Kontext

Konformitätsstufe AAA

Prinzip 2. Bedienbar

Komponenten der Benutzerschnittstelle und die Navigation müssen bedienbar sein.

Richtlinie 2.4 Navigierbar

Stelle Mechanismen bereit, die bei der Nutzung helfen zu navigieren, Inhalt zu finden und den Standort festzulegen.

Verwandte Erfolgskriterien

2.4.7 Fokus sichtbar

Bei Links, Schaltern und Formularkomponenten muss ein sichtbarer Indikator vorhanden sein, wenn sich der Fokus auf dem Element befindet.

2.4.11 Fokus nicht überdeckt (Minimum)

Wenn ein Element den Tastaturfokus erhält, muss es zumindest teilweise sichtbar sein.

2.4.12 Fokus nicht überdeckt (Erhöht)

Konformitätsstufe AAA

Wenn ein Element den Tastaturfokus erhält, muss es gänzlich sichtbar sein.

2.4.3 Fokusreihenfolge

Die Reihenfolge, in der fokussierbare Elemente technisch und visuell angeordnet sind, muss, wo dies möglich ist, bedeutungsvoll und bedienbar sein.

1.4.11 Nicht-textueller Kontrast

Grafische Elemente benötigen als Komponenten der Benutzeroberfläche, von Diagrammen und Ähnlichem in der Regel einen Mindestkontrast von 3∶1 zu benachbarten Flächen.

Im Gegensatz dazu geht es im Erfolgskriterium 2.4.13 nicht um Kontrast zwischen benachbarten Flächen, sondern um Kontraständerungen von Flächen in unterschiedlichen Zuständen.

1.4.3 Kontrast (Minimum)

Schriften benötigen einen ausreichenden Helligkeitskontrast zum Hintergrund. Ein Farbkontrast reicht nicht aus.

1.4.1 Gebrauch von Farbe

Die visuelle Darstellung bestimmter Informationen darf nicht allein auf Farbe beruhen.

3.2.1 Bei Fokus

Ein Fokuseffekt besteht nicht in einer Änderung des Kontextes.

2.1.1 Tastatur

Funktionalitäten müssen mit wenigen Ausnahmen allein mit der Tastatur bedienbar sein.

Erläuterungen zum Kontext

Das Erfolgskriterium wurde in den WCAG 2.2 neu eingeführt.

Folgende Anforderungen werden im Vergleich zu vorhandenen Erfolgskriterien neu aufgestellt:

• Im Vergleich zum Erfolgskriterium 1.4.3 muss nicht nur die Beschriftung eines Steuerelements über Mindestkontraste verfügen, sondern auch ein Indikator, der zu einem Fokuseffekt führt.
• Im Vergleich zum Erfolgskriterium 1.4.13 müssen nicht nur nicht-textuelle Elemente eines Steuerelements, wie eines Icons, in jeglichem Zustand, sondern auch der Fokusindikator der Komponente über einen Mindestkontrast verfügen.
  Zur Erfüllung von Erfolgskriterium 1.4.13 müssen etwa der Indikator für verlinkte PDF-Dateien oder der Zustand einer Checkbox (aktiviert/nicht aktiviert) über ausreichend Kontrast verfügen.
  Für das Erfolgskriterium 2.4.13 muss visuell wahrnehmbar sein, wenn der Link oder die Checkbox insgesamt den Fokus innehat.
• Im Vergleich zum Erfolgskriterium 2.4.7 muss der Fokus nicht nur sichtbar sein, sondern auch über eine ausreichende visuelle Unterscheidung durch Größe und Kontrast verfügen.

Strukturierende Übersetzung des Erfolgskriteriums

Wenn der Fokusindikator für die Tastatur sichtbar ist, erfüllt eine Fläche des Fokusindikators alle folgenden Bedingungen:

• Der Fokusindikator ist mindestens so groß wie die Fläche des 2 CSS Pixel dicken Umfangs der unfokussierten Komponente oder Subkomponente und
• Der Fokusindikator weist zumindest ein Kontrastverhältnis von 3∶1 derselben Pixel im fokussierten und unfokussierten Zustand auf.

Ausnahmen

1. Der Fokusindikator ist vom Darstellungsprogramm festgelegt und kann von Autor*innen nicht angepasst werden.
2. Der Fokusindikator und dessen Hintergrundfarbe werden von Autor*innen nicht verändert.

Anmerkungen

1. Was als Komponente oder Subkomponente der Nutzerschnittstelle (zum Erkennen von Umrandung oder Größe) wahrgenommen wird, hängt von dessen visueller Präsentation ab.
   Die visuelle Präsentation umfasst den visuellen Inhalt der Komponente, den Rahmen und den komponentenspezifischen Hintergrund.
   Sie umfasst nicht Schattierung und Leuchteffekte außerhalb des Inhalts der Komponente, Hintergrund oder Rahmen.
2. Beispiele für Subkomponenten, die einen Fokusindikator erhalten können, sind Menüelemente in einem geöffneten Drop-down Menü oder fokussierbare Zellen in einem Raster.
3. Kontrastberechnungen können auf den Farbfestlegungen innerhalb einer Technologie (wie HTML, CSS und SVG) basieren.
   Pixel, die durch Auflösungsverbesserungen vom Benutzeragenten und Anti-Aliasing geändert wurden, können ignoriert werden.

Zum raschen Verständnis

Bei der Bedienung mit der Tastatur wird der Fokus durch Drücken der Tab-Taste auf Links, Schalter und Formularkomponenten bewegt. Durch gleichzeitiges Drücken der Shift-Taste wird die Bewegung umgekehrt.

Fokuseffekte müssen visuell gut wahrnehmbar sein. Die Indikatoren, also die unterschiedlichen Merkmale im nicht-fokussierten und fokussierten Zustand, unterliegen bestimmten Mindestanforderungen.

Für die einfachste und sicherste Lösung springe gleich zum Beispiel Rahmenindikator mit Abstand. Für differenziertere Informationen lies hier weiter.

Zur allgemeinen Darstellung der Form einer Komponente dient im Folgenden ein fünfzackiger Stern:

Mindestgröße des Indikators

Die Größe der visuell veränderten Fläche ist der erste der beiden entscheidenden Faktoren für die Wahrnehmbarkeit einer Veränderung. Die Größe als entscheidender Faktor erschließt sich auch aus der Definition der Sehschärfe, in der von der Wahrnehmung je nach relativer Größe in Winkelminuten ausgegangen wird.

Die normative Maßeinheit für die Größe sind im Erfolgskriterium CSS Pixel. Sie sollen eine möglichst einheitliche Größe unabhängig von der Auflösung und der Bildschirmgröße gewährleisten. Da es sich bei einem Pixel nicht um einen mathematischen Punkt ohne Ausdehnung handelt, sondern um eine, wenn auch sehr kleine Fläche, wird auch der Ausdruck Quadratpixel (px²) verwendet. Im Folgenden wird dafür vereinfachend der Ausdruck Pixel verwendet.

Berechnung der Mindestgröße des Indikators

Aus den Pixeln der Umfassung eines Elements ist eine Minimalfläche abzuleiten. Deren Berechnung wird nicht im Erfolgskriterium selbst definiert, sondern in der Begriffsklärung zum Umfang.

Zur Berechnung der Mindestfläche A_I kann der kleinere der folgenden Werte herangezogen werden:

Die minimale rechteckige Umgrenzung der Komponente:

Eine anliegende Umgrenzung der Komponente:

In der Definition des Umfangs werden überlappende Eckpunkte aus dem Umfang abgezogen. Bei einem fünfzackigen Stern sind das 5 Pixel.
Dieses Detail wird in den Erläuterungen zum Erfolgskriterium jedoch nicht mehr erörtert.

Rechteckige Komponenten

Bei einer rechteckigen Komponente sind die rechteckige Umgrenzung und die anliegende Umgrenzung identisch.

Die Formel für die Mindestfläche eines Indikators bei einer rechteckigen Komponente mit der Breite b und der Höhe h lautet daher bei einem 2 Pixel breiten Umfang:

A_I = 2U = 4b + 4h = 4(b+h)

Kreisförmige Komponenten

Für eine kreisförmige Komponente mit einem Radius r gilt als Mindestfläche für einen Fokusindikator ebenfalls der doppelte Umfang:

A_I = 2U = 4rπ

Warum zur Berechnung nicht die rechteckige Umrandung herangezogen wird:

Bei Komponenten, die nicht über eine rechteckige Form verfügen, stehen zur Berechnung der Mindestfläche eines Fokusindikators zwei Varianten zur Verfügung:

Setzen wir für den kreisförmigen Schalter (Figur A) eine Breite von 24 Pixeln fest. Dies entspricht den Anforderungen an die Mindestfläche eines Steuerelements im Erfolgskriterium 2.5.8.

Folgende Berechnungen der Mindestfläche sind zulässig:

Die minimale rechteckige Umgrenzung der Komponente (Figur B)

A_I = 4×24 + 4×24 = 196 Pixel

Die anliegende Umgrenzung der Komponente (Figur C)

A_I = 4×12×π ≈ 151 Pixel

Als Mindestfläche darf der kleinere Wert der beiden Berechnungen herangezogen werden, also der doppelte Kreisumfang.

Mindestfläche bei anderen geometrischen Formen

Bei Komponenten mit komplexeren geometrischen Formen kann die Berechnung durchaus eine mathematische Herausforderung werden. Sehen wir uns beispielsweise einen gleichseitigen fünfzackigen Stern an. Ein solcher kann etwa zur Punktevergabe dienen:

Berechnungen für einen fünfzackigen Stern

Zur Ermittlung der Mindestfläche eines Fokusindikators dient wiederum die kleinere der beiden Berechnungsvarianten.

Setzen wir für den Stern (Figur A) eine Ausdehnung s von jeweils 24 Pixeln fest.

Folgende Berechnungen der Mindestfläche für einen Fokusindikator sind zulässig:

Die minimale rechteckige Umgrenzung der Komponente (Figur B)

Die Breite b entspricht der Ausdehnung s, also 24.
Die Höhe h beträgt s × cos(18), also ungefähr 22,8.

A_I = 4×24 + 4×22,8 ≈ 188

Die anliegende Umgrenzung der Komponente (Figur C)

Der Umfang eines Pentagramm kann folgendermaßen berechnet werden:

U_⛤ ≈ 3,82 × s

Vom Umfang können die überlappenden Eckpunkte abgezogen werden, bei einem Pentagramm also 5 Punkte.

Die Mindestfläche für den Fokusindikator aus dem 2 Pixel breiten Umfang beträgt daher bei einer Seitenlänge von 24 Pixeln:

A_I ≈ 2 × (3,82 × 24 − 5) ≈ 174 Pixel

Als Mindestfläche darf der kleinere Wert der beiden Berechnungen herangezogen werden, also in diesem Fall der anliegende Rahmen.

Flächenindikatoren

Der Indikator kann auch aus einer oder mehreren Flächen bestehen. Er muss sich nicht im Außenbereich des Steuerelements als Rahmen oder Außenlinie befinden.

In der folgenden Darstellung weist der Schalter B durch eine kontrastreiche Farbänderung einer Mindestfläche die erforderlichen Merkmale auf:

Außenrahmen als Indikatoren haben den Vorteil, dass bei einer Änderung von Breite und Höhe des Steuerelements keine neuen Berechnungen für die Mindestfläche und entsprechende Anpassungen erforderlich sind.

Kontrast des Indikators

Die Indikatorfläche muss im fokussierten Zustand bei jedem Pixel zum unfokussierten Zustand über einen ausreichenden Kontrast verfügen. Kontrastanforderungen gelten im Gegensatz dazu bei anderen Erfolgskriterien für benachbarte Pixel.

Ein Wechsel der Farbe erhöht die visuelle Unterscheidbarkeit signifikant. Allerdings kann dieser Effekt bei einer Farbfehlsichtigkeit für bestimmte Farbkombinationen vermindert sein oder ganz entfallen (Rot-Grün Schwäche). Der Kontrast muss daher auch unterscheidbare Werte in den Helligkeitsstufen aufweisen (Leuchtdichteunterschiede).

Der erforderliche Helligkeitskontrast wird im Erfolgskriterium auf 3∶1 festgelegt. Dies entspricht dem Mindestkontrast für große oder fette Schrift im Erfolgskriterium 1.4.3 oder dem nicht-textuellen Kontrast im Erfolgskriterium 1.4.11. Ein höherer Kontrast verbessert natürlich die Wahrnehmbarkeit des Effekts gegenüber den Mindestanforderungen.

Eine Farbinvertierung von Vordergrund und Hintergrund erzielt als Fokusindikator zwar einen deutlichen Fokuseffekt. Die erforderliche Lokaladaptation in der Netzhaut könnte durch eine Farbinvertierung jedoch eine Beeinträchtigung darstellen. Eine Farbinvertierung sollte unseres Erachtens daher nicht als allgemeine Empfehlung gelten.

Links im Fließtext (Inline Links)

Links innerhalb eines Absatzes können gelegentlich über einen Zeilenumbruch hinausragen, wenn die Linkbeschriftung länger ist. Zur Berechnung der Mindestfläche kann eine minimale umgrenzende Box herangezogen werden, die den Link bei einer einzeiligen Darstellung umranden würde.

Der sicherste Weg für eine konforme Darstellung ist eine 2 Pixel breite Umrandung. Typischerweise werden dazu die CSS-Anweisungen border oder outline verwendet.

Die Darstellung der beiden Varianten kann sich von Browser zu Browser leicht unterscheiden. In Chrome und Firefox treten folgende Merkmale in Erscheinung:

Wird ein Fokusindikator mittels border realisiert, bleibt beim Zeilenumbruch der Rahmen an der Umbruchstelle jeweils offen:

Wird ein Fokusindikator hingegen mittels outline realisiert, erscheinen die Linkabschnitte in jeder Zeile als abgeschlossene Links:

Unter diesen Umständen erscheint bei Links im Fließtext eine border-Anweisung vorteilhaft. Damit erscheint eine zeilenübergreifende Linkbeschriftung intuitiv als eine Einheit.

  line-height: 140%

Ausnahmebestimmungen

Fokuseffekt nicht anpassbar

Bei einzelnen Komponenten oder Technologien kann der Fokuseffekt nicht autorenseitig angepasst werden. In diesem Fall ist das Erfolgskriterium natürlich nicht anwendbar.

In HTML lässt sich beispielsweise das Erscheinungsbild der ausgewählten Komponente in einem select-Element nicht modifizieren. Wir müssen uns daher etwa mit dem marginalen Fokuseffekt in Firefox 120.0 abfinden:

Fokuseffekt durch Browser

Es genügt unter folgenden Bedingungen, den Fokuseffekt gänzlich dem Browser zu überlassen:

• Der Fokusindikator wird nicht modifiziert.
• Der Hintergrund des Fokusindikators wird nicht modifiziert.

Die Hoffnung besteht darin, dass Browser selbst bereits die Anforderungen erfüllen. Stichproben zeigen, dass aktuelle Versionen noch nicht durchgehend über angemessene Fokuseffekte verfügen.

Ein Vorteil dieses Ansatzes besteht darin, dass Fokuseffekte den Erfahrungsgewohnheiten im eigenen Browser entsprechen.

Die Ausnahmebestimmung ist ein Zugeständnis an Webauftritte, die mit möglichst geringem Darstellungsaufwand realisiert wurden. Nichts zu tun heißt hier auch gleichzeitig, nichts anzustellen. Wer sich jedoch nicht auf Browser verlassen will oder Wert auf ein einheitliches Erscheinungsbild über Browser hinweg legt, wird explizit Fokuseffekte festlegen.

Fokuseffekt durch Browser bei Hintergrundänderung

Werden beim Design Farben für den Bereich festgelegt, in dem sich ein Steuerelement befindet, kann sich dies auch auf Kontrastverhältnisse beim Fokuseffekt auswirken. In diesem Fall sind möglicherweise Fokuseffekte für betroffene Steuerelemente explizit vorzusehen.

In Chrome Version 120 werden Links und Schalter im fokussierten Zustand mit einer dicken schwarzen Umrandung versehen:

Wird der Hintergrund verdunkelt, bleibt der Fokus durch eine weiße Außenumrandung des Fokusindikators deutlich sichtbar:

In Firefox Version 121 hingegen ist bei einem dunkleren Hintergrund die Wahrnehmbarkeit deutlich beeinträchtigt:

Labordatei: Fokuseffekte in Browsern

Welche Fokuseffekte sind standardmäßig im Browser vorhanden?

Anwendungen zur Textverarbeitung

Enthält eine Webseite eine Anwendung zum Editieren von Text, ist diese typischerweise nicht als Komponente der Benutzeroberfläche einzustufen (Textverarbeitung, Editierbereich für Code, …). Solche großen Editierbereiche werden bei der Nutzung im Gegensatz zu einem textarea-Element nicht als singuläres Steuerelement mit abgegrenzter Funktion erachtet.

Ein solcher Editierbereich wird daher nicht von diesem Erfolgskriterium berührt. Eine visuelle Kennzeichnung durch einen Rahmen wird trotzdem sinnvoll sein.

Der Textverarbeitungsbereich benötigt jedoch zumindest einen Indikator für den Eingabepunkt (Caret), um das Erfolgskriterium 2.4.7 Fokus sichtbar zu erfüllen.

Nicht fokussierbare Elemente

Links können auf die id eines Elements referenzieren, ohne dass dieses Element mit der Tab-Taste fokussierbar ist. Typischerweise befinden sich solche Links in einer Einsprungnavigation oder einem Inhaltsverzeichnis.

Derartige Elemente fallen nicht unter dieses Erfolgskriterium, weil sie ohne Zusatzmechanismen durch assistierende Technologien nicht mit der Tastatur bedienbar sind.

Zielgruppen

• Sehende Menschen, die auf die Bedienung allein mit der Tastatur, eine Spracheingabe oder andere alternative Bedienungstechnologien ohne Maus und Touch Screen angewiesen sind, können die Komponente besser erkennen, welche den Fokus innehat.
• Menschen mit eingeschränkter Aufmerksamkeit, herabgesetztem Kurzzeitgedächtnis oder Beeinträchtigungen beim Abwickeln von Prozessen sehen deutlicher den Fokus der aktuellen Aktivität.
• Menschen mit herabgesetztem Kontrastsehvermögen wird die Wahrnehmung des Fokus erleichtert.
• Menschen, die mit einer Vergrößerungssoftware arbeiten und dabei vorrangig die Maus verwenden, haben eine höhere Chance, den Fokus aufzufinden.

Screen Reader stellen Inhalte mit deren Semantik dar. Bei deren Nutzung ist daher das visuelle Erscheinungsbild nicht relevant.

Beispiele

Rahmenindikator mit Abstand

Die Berechnung der Mindestfläche für einen Fokusindikator leitet sich im Erfolgskriterium von der Umgrenzung des Elements ab. Ein zuverlässiger Ansatz besteht also darin, einen entsprechenden Rahmen vorzusehen.

Typischerweise wird der Rahmen nicht direkt an die Schaltfläche angefügt, sondern abgerundet mit einem Abstand zum Steuerelement. Dies erleichtert die visuelle Differenzierung, wird jedoch im Erfolgskriterium nicht verlangt.

.myButton button:focus {
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
}

Rahmenindikator für Kachel

Verlinkte Komponenten aus einem Bild, einem Text mit dem Linkziel und gelegentlich auch Zusatztext werden als Cards (Kacheln) bezeichnet. Der folgende Screenshot zeigt den Fokuseffekt für derartige Komponenten auf Zweiter Blick:

Erläuterungen zum Beispiel Rahmenindikator für Kachel

Verwendete Fokuseffekte

• Der Außenrahmen um den Link aus Bild und Beschriftung weißt eine Breite von 2 Pixeln auf und entspricht damit den Anforderungen an die Größe des Indikators.
• Die Farbe des Außenrahmens weißt zum Hintergrund ein Kontrastverhältnis von annähernd 7∶1 auf und übertrifft damit die Anforderungen:
  (Berechnung auf contrast-ratio.com)
• Darüber hinaus werden folgende Effekte eingesetzt, ohne die grundlegenden Anforderungen zu verletzen:
  • Das Bild wird leicht ausgegraut (CSS Anweisung opacity).
  • Der Linktext wird gelb hinterlegt.

Zum Ausprobieren

Setze den Fokus auf den zweiten Kachel!

Goldenes Dachl A ⟶

Goldenes Dachl B ⟶

HTML

Der HTML-Code für eine Kachel weist etwa folgende Struktur auf:

<a class="card"
  href=[…] >
  <img 
    alt=" "
    src=[…]>
  <p>Goldenes Dachl &#10230;</p>
</a>

Wenn die sichtbare Bildunterschrift (Goldenes Dachl) das Linkziel angemessen beschreibt, muss der Alternativtext für das vorhandene Bild im Link leer bleiben.

CSS

Für die verwendeten Fokuseffekte sind folgende CSS-Anweisungen relevant:

.card a {
  background-color: white;
  border: solid 1px darkred;
  color: darkred;
  padding: .3ex;
}
.Card a:focus {
  background-color: yellow;
  border-color: black;
  color: black;
  opacity: .8;
  outline: solid 2px black;
  outline-offset: 2px;
}

Testverfahren

Manuelle Prüfung

Wer den Fokuseffekt gänzlich dem Browser überlässt, hat das Erfolgskriterium noch nicht unbedingt erfüllt. In den CSS-Anweisungen sollte sich zunächst nirgends die Zeichenfolge :focus befinden. Wurde die Hintergrundfarbe der Umgebung eines Steuerelements geändert, kann dies die Sichtbarkeit des Fokuseffekts durch den Browser beeinträchtigt sein. Mögliche Probleme können nur durch eine visuelle Sichtung identifiziert werden. Das Standardverhalten des Browsers sollte dabei den Prüfenden bekannt sein.

1. Drücke die Tabulator-Taste und suche nach Komponenten, die mutmaßlich über keine ausreichenden Fokuseffekte verfügen.
2. Prüfe, ob eine Ausnahmebedingung vorliegt.
3. Wirf einen Blick in den CSS-Code und analysiere die Festlegungen von Größe und Kontrast auf die Erfüllung der Anforderungen aus dem Erfolgskriterium.

Maschinelle Prüfung

Werkzeuge zur Prüfung von Kontrastverhältnissen werden benötigt.

Prüfung durch betroffene Menschen (Peer Evaluation)

Prüfung mit visueller Beeinträchtigung

Sehbehinderte Menschen sind am meisten auf angemessene Fokuseffekte angewiesen. Sie können daher subjektiv rasch Problembereiche identifizieren.

Farbfehlsichtige oder farbenblinde Menschen können potenzielle Problembereiche bei einer Durchsicht der Fokuseffekte aus alltäglicher Betroffenheit intuitiv ermitteln.

Prüfung durch blinde Menschen

Um das Erfolgskriterium 2.4.13 prüfen zu können, ist ein ausreichendes Sehvermögen erforderlich. Eine Prüfung mit einer sehenden Assistenzperson erscheint für blinde Menschen nur mit einem hohen Kommunikationsaufwand möglich.

Unterschiede zu Entwürfen (Drafts)

Übersetzungen von Entwürfen

Ich habe an Übersetzungen bereits im Entwicklungsstadium gearbeitet:

Änderungen zu Entwürfen

Das Erfolgskriterium als Teil des WCAG 2.2 Standard weist folgende signifikanten Änderungen zu Entwürfen auf:

• In ersten Entwürfen wurde eine Einstufung in die Konformitätsstufe AA vorgeschlagen. Damit verbunden ist auch eine frühere Reihung unter der Ziffer 2.4.11.
• Die Komplexität der Anforderungen wurde auf eine einfache Flächenberechnung aus einem umgebenden Umfang und einen Mindestkontrast reduziert.
  So konnten in Entwürfen noch überlappende Eckpunkte bei der Berechnung der Mindestfläche abgezogen werden.
• Die Mindestfläche des Indikators beruhte in Entwürfen lediglich auf einer Mindestbreite des Rahmens von 1 Pixel und nicht 2 Pixel. Eine Verbesserung der Sichtbarkeit, die jedoch wohl mit einer Abstufung des Kriteriums auf die Konformitätsstufe AAA verbunden war.