Warum
Eine klare Hervorhebung des aktuell fokussierten Elements ist entscheidend für eine benutzerfreundliche Navigation auf einer Webseite. Während Mausbenutzer gar nicht darauf angewiesen sind, ist diese Funktion für Tastaturnutzer von unschätzbarem Wert. Sie ermöglicht es ihnen, problemlos zu erkennen, wo sie sich auf der Webseite befinden und erleichtert so ihre Interaktion erheblich. Daher ist es von großer Bedeutung, sicherzustellen, dass das aktuell fokussierte Element immer deutlich sichtbar ist, um die Zugänglichkeit gemäß den WCAG-Richtlinien (WCAG 2.4.7 - Focus visible (Level AA)) zu verbessern.
Gestaltung
Eine effektive Fokus-Hervorhebung ist von entscheidender Bedeutung, um klar erkennbar zu sein. Gemäß dem Erfolgskriterium 2.4.13 - Focus Appearance (Level AAA) ist es wichtig, dass die Hervorhebung mindestens so groß ist wie eine 2 Pixel dicke Umrandung der nicht fokussierten Fläche und ein Kontrastverhältnis von mindestens 3:1 zwischen den gleichen Pixeln im fokussierten und unfokussierten Zustand aufweist.
Sichtbarkeit
Eine wirkungsvolle Fokus-Hervorhebung kommt nur dann vollständig zur Geltung, wenn sie auch tatsächlich sichtbar ist. Um sicherzustellen, dass dies der Fall ist, ist es wichtig, dass fokussierte Elemente maximal nur teilweise (gemäß WCAG 2.4.12 - Focus Not Obscured (Minimum) (Level AA)) oder überhaupt nicht (gemäß WCAG 2.4.13 - Focus Not Obscured (Enhanced) (Level AAA)) verdeckt werden. Wer sicherstellen möchte, dass die Fokus-Hervorhebung lediglich im Falle einer Tastatursteuerung angezeigt wird, erreicht dies mit Hilfes der CSS-Pseudo-Klasse :focus-visible.
Diese Seite wurde am 28.02.2024 erstellt und zuletzt am 05.07.2024 aktualisiert.