A11y: Visueller Fokus

You wouldn’t steal their cursor! // Laura Carvajal

Tastatur-Nutzer, Nutzer von Vergrößerungshilfen und Nutzer von Spracherkennungs-Software sind darauf angewiesen zu wissen, wo sich der momentane Fokus auf einer Seite befindet. Oft wird das beim Gestalten einer Webeite vergessen oder die visuelle Anzeige des Fokus sogar absichtlich versteckt, typerweise indem die Kontur komplett entfernt wird.

Die Standardeinstellungen des Browser beizubehalten ist ein guter Ansatz, und kann auch z. B. so verbessert werden:

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Quelle: Standardstil des Browsers

Aber anstatt einfach nur so die WCAG Anforderungen zu erfüllen, ist es noch besser, diese Standard Styles mit etwas zugänglicheren zu überschreiben, vor allem im Bereich Farbkontrast. Für das ally Theme haben wir einen gut sichtbaren Fokus-Indikator gestylt.

Der Fokus-Indikator ist für Tastatur-Nutzer was der Maus-Cursor für Maus-Nutzer ist. Und wie man auch niemals den Maus-Cursor verstecken würde, sollte man auch nie den Fokus Indikator verstecken.

Umsetzung

Die WCAG (Web Content Accessibility Guidelines) definieren den minimal benötigten Farbkontrast Ratio für interaktive Komponenten und ihre Zustände, damit sie als zugänglich gelten: Erfolgs-Kriterium 1.4.11 Non-Text Contrast (deutsche Übersetzung: 1.4.11 Nicht-Text-Kontrast)

Fokus-Indikatoren auf User Interface Elementen fallen unter die „nicht-text“-Kategorie, da sie dazu benutzt werden, um den Zustand einer Komponente zu identifizieren. Um das Kriterium zu erfüllen, muss der Fokus-Indikator einen Farbkontrast von mindestens 3:1 zu benachbarten Farben haben.

Die Standard-Fokus-Indikatoren der Browser können evtentuell das Kriterium nicht erfüllen, je nachdem was für Farben man auf seiner Website verwendet, deshalb ist es gut, eigene Indikatoren zu stylen. In den neuen Vorgaben in WCAG 2.2 wird dies sogar nötig, da das Standard-Aussehen oft nicht mehr reichen wird.

Neue Fokus-Indikatoren Anforderungen in WCAG 2.2

Es wurden 3 neue Erfolgskriterien hinzugefügt, die sich mit Farben, Umgebung und Sichtbarkeit der Fokus-Indikatoren beschäftigen:

• SC 2.4.11 Focus Appearance (Level AA),
• SC 2.4.12 Focus Not Obscured (Minimum) (Level AA), and
• SC 2.4.13 Focus Not Obscured (Enhanced) (level AAA)

Quelle: A guide to designing accessible, WCAG-compliant focus indicators

Anwendungsbeispiel:

Auf der Website der britischen Regierung ist die Fokus-Anzeige richtig gut umgesetzt:

gov.uk