Tipps zum Designen von nützlichen und benutzbaren Fokus-Anzeigen

Wenn man beschließt, die Standard-Darstellung des Fokus des jeweiligen Browsers zu ändern bzw. abzuschalten, muss man ein gutes Konzept entwerfen, um ein eigenes Fokus-Design anzulegen. Der Vorteil davon ist, dass der Fokus dann in allen Browsern gleich aussieht. Außerdem sind die Standard-Fokus-Darstellungen der Browser nicht mal besonders gut bzw. nicht konsistent, deshalb ist es eine gute Idee, diese Anzeigen selbst zu gestalten.

Es gibt viele Benutzer, die sich auf diese Anzeigen verlassen, um zu wissen, wo einer Webseite sie sich befinden. Das sind vor allem Screenreader-Nutzer, Menschen mit eingeschränkter Bewegung und Power User (z. B. Web Developer).

Die meisten interaktiven Elemente sind fokussierbar, z. B. Formular-Felder und Kontrollkästen, Menü-Einträge, Links, Buttons, Tooltips (ausgelöst durch hover), Widgets (z. B. ein Kalender).

Zusammenfassung: Effektve Fokus-Anzeigen gestalten

• Guter Kontrast
• Passende Form und Größe zum zugehörigen Element
• Das Farbschema ist passend, aber sticht dennoch hervor
• Muss nicht für alle Elemente gleich sein
• Animationen helfen dem User, die Fokus-Bewegung zu verfolgen
• Sollte für ältere Browser auch funktionieren
• Sollte in allen Browsern gleich aussehen

Tipps fürs Designen

• Mache eine Liste aller fokussierbaren Elemente. Wie viele Variationen gibt es von jedem? Gibt es primary und secondary buttons, die verschiedene Farben nutzen und wird die Fokus-Anzeige bei beiden funktionieren?
• Denke an dein Farbschema. Benutzt du eine callout / highlight Farbre? Würde diese Farbe auch für den Fokus funktionieren? Falls nicht, gibt es eine andere Farbe, die funktionieren könnte?
• In vielen Fällen könnte ein guter Fokus-Status auch der Hover-Status sein. Wenn der Hover-Status, den es schon gibt, sehr offensichtlich ist, könnte man ihn auch als Fokus-Status benutzen.
• Es ist generall eine gute Idee, den nativen Browser Fokus-Style mit einem eigenen Style zu ersetzen, damit der Style in allen Browsern gleich ist

Wie bei vielen anderen Elementen auch, ist es besser, die Fokus-Styles schon von Anfang an zu berücksichtigen und zu designen, es macht die Sache einfacher und das Design ist dann insgesamt zusammenhängender. Wenn man sowieso schon andere Stati wie z. B. hover definiert, kann man auch gleich den Fokus mit berücksichtigen. Auch beim Implentieren kann dies dann zusammen erledigt werden.

Quelle: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators (deque, Link öffnet in einem neuen Fenster)

Exkurs: Technischer Hintergrund zu :focus und :focus-visible

Stile, die mit der Pseudoklasse :focus definiert sind, werden immer dann angewendet, wenn ein Element den Fokus hat. Wenn man mit der Maus auf eine Schaltfläche oder eine Eingabe klickt, wird dieses Element fokussiert, so dass Mausbenutzer auch :focus-Stile sehen. Für Mausbenutzer sind diese Stile unnötig, können verwirrend und visuell ablenkend sein und werden möglicherweise als hässlich empfunden. Für Tastaturbenutzer sind sie eine Notwendigkeit.

Stile, die mit der Pseudoklasse :focus-visible gesetzt werden, erscheinen, wenn ein Benutzer mit der Tastatur navigiert, werden aber nicht durch Mausinteraktionen* angewendet.

:is(select, button, input):focus {
    outline: none;
}

:is(select, button, input):focus-visible {
    outline: solid 2px blue;
}

*Welche Stile angewendet werden, hängt vom jeweiligen Element ab. Eine Schaltfläche, ein Link, ein Kontrollkästchen, ein Optionsfeld, ein Bereich, eine Farb- oder Dateieingabe oder ein Element mit einem Tabindex von 0 zeigt nur dann :focus-visible Stile an, wenn der Benutzer das Element mit einer Tastatur fokussiert hat. Jede Eingabe mit einem Textfeld (z. B. E-Mail, Passwort oder Zahleneingabe, Textarea) zeigt sowohl den :focus als auch die :focus-visible Stile an, unabhängig davon, wie der Benutzer das Element fokussiert hat. Eine Auswahl zeigt bei Mausklicks in Chrome sowohl :focus als auch :focus-visible Stile an, in Firefox jedoch nur Fokus-Stile.

Entnommen aus Focus styles and programmatic focus. Hier gibt es auch noch eine Erklärung dazu, was passiert, wenn man ein Element mit javascript (programmatic focus) fokusiert.