Fokus

Wo bin ich auf der Webseite und was kann hier passieren?

30.12.2023

[Materialsammlung]

Der Fokus ist der Punkt auf einer Webseite, auf den sich eine Tastaturaktion auswirkt.

Fokusindikatoren

Als Fokusindikator wird der visuelle Effekt bezeichnet, der ein Element auf einer Webseite hervorhebt, auf das sich Tastatureingaben gerade auswirken. Die Definition des W3C bezieht sich allgemein auf die Änderung von Pixeln, während das Erfolgskriterium 2.4.13 detaillierte Anforderungen an Größe und Kontrast aufstellt.

Fokuseffekte sind in folgender Weise gebräuchlich:

Rahmenindikator

Der einfachste Weg zu einem ausreichenden Fokuseffekt ist ein Rahmen um das fokussierte Steuerelement. Der Rahmen muss über 2 Pixel Breite und nach innen und außen einen 3∶1 Kontrast zur Umgebung verfügen. Eine durchgehende Linie umschließt das Element (solid).

Der Rahmen befindet sich außerhalb der minimalen umgrenzenden Box. Dieser Indikator wird trotzdem auch als Bounding Box oder Fokus-Rechteck (Focus Rectangle bezeichnet.

In der folgenden Darstellung weist der Schalter B die erforderlichen Merkmale auf:

Schalter A Schalter B

Ein durchgehend umschließender Fokusindikator kann für Links und Schalter als optimal und etabliert angesehen werden.

Rahmen mit den CSS-Werten dotted (gepunktet) oder dashed (strichliert) benötigen für die erforderliche Indikatorfläche 4 Pixel Breite:

DOTTED DASHED

Flächenindikator

Innerhalb des Steuerelements ändert sich bei diesem Ansatz im fokussierten Zustand kontrastreich eine Mindestfläche. Das Steuerelement kann technisch dabei über die visuelle Beschriftung durch transparenten Hintergrund hinausragen.

Die Mindestfläche kann innerhalb des Steuerelements auf mehrere Flächen aufgeteilt werden. Gewöhnlich befindet sie sich jedoch beidseits oder an der linken Seite der Beschriftung.

In der folgenden Darstellung weist der Schalter B die erforderlichen Merkmale auf:

Symbolindikator

Gelegentlich wird lediglich ein Symbol oder Icon als Indikator zum Hervorheben des fokussierten Elements verwendet. Typischerweise erscheint auf der linken Seite des Steuerelements ein Icon etwa in Form eines nach rechts zeigenden Pfeils:

Um den Anforderungen des Erfolgskriteriums 2.4.13 (Fokus Erscheinen) in der Konformitätsstufe AAA gerecht zu werden, muss das Symbol mit einer kontrastreichen Mindestfläche hinterlegt werden. Dies wird im obigen Beispiel im Schalter C gewährleistet.

Links im Fließtext (Inline Links)

Für Links innerhalb eines Absatzes können grundsätzlich sowohl Rahmenindikatoren als auch Flächenindikatoren eingesetzt werden.

Flächenberechnung für 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.

Umrandung als Indikator für Inline Links

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:

Textabschnitt mit Link und als Fokusindikator ein Rahmen

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

Textabschnitt mit Link und als Fokusindikator eine Außenlinie

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

Es empfiehlt sich in jedem Fall, die Zeilenhöhe generell zu erhöhen, um Überlappungen von Umrandungen von Indikatoren zu vermeiden. Hier ein Codebeispiel zum Erhöhen des Zeilenabstands:

  line-height: 140%

Hintergrundfarbe als Fokusindikator

Absatz mit Links ohne Fokus und im Fokussierten Zustand mit dunkelgelbem Hintergrund

Fokuseffekt und Hovereffekt

Dem Fokuseffekt, der mit der Tastatur ausgelöst wird, steht der Hovereffekt gegenüber, der beim Überstreichen mit der Maus ausgelöst wird.

Bei der Überlagerung beider Effekte kann es zum Problem kommen, dass visuell nicht klar ist, auf welche Komponente sich eine Tastatureingabe auswirkt. Befindet sich die Maus zufällig gerade an einer Stelle, an der sich auch ein Fokuseffekt befinden könnte, kann es zu Fehleingaben kommen.

Die Indikatoren für beide Effekte sollten sich daher auf unterschiedliche Bereiche der Komponente auswirken.

Für Hover-Effekte gibt es keine Anforderungen in den WCAG. Wer visuell mit der Maus arbeiten kann, verfügt wohl über ein ausreichendes Sehvermögen.

Beispiel: Unterschiedlicher Fokus- und Hover-Effekt

Im folgenden Beispiel wird eine Möglichkeit dargestellt, wie ein Fokuseffekt sich von einem Hovereffekt ausreichend unterscheiden kann.

Erläuterungen zum Beispiel

Der Schalter A stellt den Zustand ohne jeglichen Effekt dar. Visuell wird das Steuerelement lediglich durch eine abgerundete Hintergrundfläche hervorgehoben, die sich von der Umgebungsfarbe mit einem Kontrastverhältnis von 3∶1 unterscheidet.
Der Schalter B zeigt als Fokuseffekt eine abgesetzte Außenlinie entsprechend den Anforderungen des Erfolgskriteriums 2.4.13. Technisch wird der Effekt durch die CSS-Anweisung outline realisiert.
Der Schalter C stellt einen Hover-Effekt dar, der lediglich aus einem gepunkteten Rahmen besteht. (CSS-Anweisungen für border)
Der Schalter D zeigt das Erscheinungsbild bei einer Überlagerung von Fokus- und Hovereffekt. Der Fokuseffekt ist auch dann sichtbar, wenn sich der Mauszeiger gerade über dem Steuerelement befindet.

WCAG Erfolgskriterien mit Bezug zum Fokus

1.4.13 Inhalt bei Hover oder Fokus: Programmierte Tooltips, die mit der Maus oder beim Tastaturfokus angezeigt werden, müssen in der Regel bis auf Abruf angezeigt bleiben.
Erfolgskriterium 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.
WCAG Erfolgskriterium 2.4.7 Fokus sichtbar: Bei Links, Schaltern und Formularkomponenten muss der Fokus sichtbar 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.
Erfolgskriterium 2.4.13 Fokus Erscheinungsbild: Konformitätsstufe AAA; Ein Fokusindikator muss ausreichend Größe und Kontrast aufweisen.
3.2.1 Bei Fokus: Ein Fokuseffekt besteht nicht in einer Änderung des Kontextes.
Erfolgskriterium 4.1.3 Statusmeldungen: Statusmeldungen müssen vom Screen Reader wiedergegeben werden, ohne dass der Fokus zur Information bewegt wird, etwa als Live-Region.