Zugängliche Fokuszustände: Entwerfen eines sichtbaren Tastaturfokus

Warum Fokuszustände wichtig sind

Personen, die eine Tastatur, ein Umschaltgerät oder eine Bildschirmlupe verwenden, bewegen sich Element für Element auf einer Seite. Nur durch den Fokusindikator wissen sie, wo sie sich befinden. Das ersatzlose Entfernen der Browser-Gliederung ist einer der häufigsten Fehler bei der Barrierefreiheit.

Was WCAG 2.2 erfordert

Erfolgskriterium 2.4.7 „Fokus sichtbar“ (Stufe AA) erfordert, dass jede tastaturbedienbare Schnittstelle über einen Modus verfügt, in dem die Fokusanzeige sichtbar ist. WCAG 2.2 fügte 2.4.13 Focus Appearance (Stufe AAA) hinzu, was einen starken Indikator beschreibt: mindestens so groß wie die Fläche eines 2 CSS Pixel dicken Umfangs der Komponente, mit einem Kontrastverhältnis von mindestens 3:1 zwischen dem fokussierten und dem unfokussierten Zustand.

:fokus-sichtbar

MDN erklärt, dass :focus-visible gilt, wenn ein Element den Fokus hat und der Browser mithilfe von Heuristiken entscheidet, dass der Fokus angezeigt werden soll, normalerweise für die Verwendung über die Tastatur. Dadurch können Sie Tastaturbenutzern starke Fokusringe anzeigen, ohne sie jedes Mal anzuzeigen, wenn jemand mit der Maus auf eine Schaltfläche klickt. Verwenden Sie es, anstatt Konturen zu entfernen.

Den Ring entwerfen

Praktische Anleitung:

• Verwenden Sie einen Umriss oder Ring mit einem Versatz, damit er nicht mit dem Element verschmilzt.
• Überprüfen Sie den Kontrast vor jedem Hintergrund, auf dem das Element erscheinen kann. Ein zweifarbiger Ring hilft.
• Halten Sie es komponentenübergreifend konsistent und definieren Sie es als Token in Ihrem Designsystem.
• Verlassen Sie sich nie allein auf einen subtilen Farbwechsel.
• Stellen Sie sicher, dass das fokussierte Element nicht hinter Sticky-Headern verborgen ist.

Fokus und Bewegung

Ein Fokusring kann mit einem sehr kurzen Übergang erscheinen, sollte sich aber augenblicklich anfühlen. Vermeiden Sie Animationen, die den Ring verzögern oder das Element verschieben, und stellen Sie bei benutzerdefinierten, auf der Leinwand gezeichneten Komponenten sicher, dass es immer noch ein echtes fokussierbares Element auf der Seite gibt, damit Tastaturbenutzer es erreichen können.