Setzen Sie Akzente auf Ihrer Website! Tipps zur Gestaltung nützlicher und benutzerfreundlicher Fokusanzeigen

Was sind Fokusindikatoren?

Sind Ihnen schon einmal die blauen Umrisse aufgefallen, die manchmal um Schaltflächen oder Formularfelder herum erscheinen? Und wie sieht es aus, wenn Sie auf einen Menüpunkt klicken? Haben Sie schon einmal versucht, diese Umrisse verschwinden zu lassen?

Browser verwenden die CSS-Pseudoklasse „:focus-visible“, um Formularfeldern und anderen Elementen Konturlinien zuzuweisen, wenn sie im Fokus stehen. Hier noch ein Tipp: Wenn Sie die vom Browser standardmäßig angezeigten Konturlinien entfernen möchten, sollten Sie diese unbedingt durch etwas anderes ersetzen! Es gibt eine ganze Gruppe von Nutzern, die sich auf diese Konturlinien verlassen, um zu erkennen, an welcher Stelle auf der Seite sie sich gerade befinden.

Diese Umrandungen werden als Fokusindikatoren bezeichnet. Es handelt sich dabei um visuelle Markierungen, die anzeigen, welches Element auf einer Webseite gerade den Fokus hat. Es kann jeweils nur ein Element auf einer Seite den Fokus haben, und dies sollte deutlich erkennbar sein. Fast alle Elemente, die den Fokus erhalten können, sind interaktiv – Formularfelder, Links, Schaltflächen, Tooltips usw.

Eine Faustregel für barrierefreies Design: Wenn Sie mit der Maus mit einem Element interagieren können, sollten Sie dieselben Aktionen auch über die Tastatur ausführen können. Und wenn Sie die Tastatur verwenden, sollte alles, womit Sie interagieren, einen sichtbaren Fokus haben.

Warum Konzentration wichtig ist

Der Hauptzweck des Fokus besteht darin, dem Benutzer eine Orientierungshilfe zu geben.

Für sehende Nutzer ist es wichtig, dass der Fokus deutlich sichtbar und erkennbar ist. Er ist ein Gestaltungselement wie jedes andere, das Sie entwerfen, und sollte Ihren Konsistenzstandards entsprechen. Der Fokus zeigt den Nutzern, was „anklickbar“ ist, und hilft dabei, die Funktion eines Elements zu erkennen.

Wer braucht denn überhaupt Fokusanzeigen?

„Wer nutzt denn keine Maus, um sich auf Websites zu bewegen?“, fragen Sie sich vielleicht. Wie sich herausstellt, nutzen viele Menschen (jeder vierte Erwachsene in den USA hat eine Behinderung) die Tastatur als primäres Mittel zur Nutzung des Internets, darunter:

Menschen, die Bildschirmleseprogramme nutzen. Nutzer von Bildschirmleseprogrammen sind oft blind, aber nicht immer! Auch Menschen mit Sehbehinderungen oder kognitiven Beeinträchtigungen (wie Legasthenie) nutzen Bildschirmleseprogramme, um Inhalte im Internet besser verstehen zu können. Bildschirmleseprogramme werden fast ausschließlich über die Tastatur bedient.

Menschen mit eingeschränkter Mobilität. Zum Beispiel Menschen, deren Feinmotorik in den Händen nicht ausreicht, um eine Maus zu bedienen. Sie können beispielsweise einen Mundstab verwenden, um eine Standardtastatur zu bedienen, oder einen Schalter, der eine Tastatur simuliert.

Power-User. Ein Power-User könnte beispielsweise ein Webentwickler sein, der den ganzen Tag damit verbringt, Code zu schreiben. Oder ein Administrator, der viele Daten eingibt. Ich persönlich finde es praktischer, beim Ausfüllen eines Webformulars mit der Tabulatortaste von Feld zu Feld zu springen, anstatt jedes Feld einzeln anzuklicken.

Es sei außerdem darauf hingewiesen, dass „Focus visible“ eine Voraussetzung dafür ist, dass eine Website gemäß den Web Content Accessibility Guidelines (WCAG) als barrierefrei gilt. Die WCAG sind der am weitesten anerkannte Standard für Barrierefreiheit, und immer mehr Länder haben Gesetze erlassen, die vorschreiben, dass öffentlich zugängliche Websites den WCAG-Standard erfüllen müssen.

Was lässt sich auf einer Webseite fokussieren?

Eine Reihe verschiedener Elemente auf einer Webseite können (und sollten!) den Fokus erhalten. Sie alle müssen über eine Art Fokusanzeige verfügen, damit sie sich optisch von den umgebenden Elementen abheben. Hier sind einige der vielen Elemente, die auf jeder Website den Fokus erhalten können sollten:

• Links
• Schaltflächen
• Formularfelder / Steuerelemente (Textfelder, Auswahllisten, Optionsfelder usw.)
• Menüpunkte
• Elemente, die beim Darüberfahren mit der Maus ausgelöst werden, wie z. B. Tooltips
• Widgets, wie beispielsweise eine Kalenderauswahl

Auch hier gilt: Wenn Sie mit der Maus mit einem Element interagieren können, sollten Sie dies auch über die Tastatur tun können.

Wie Fokusindikatoren aussehen

Die Darstellung eines Umrisses um ein Element herum ist eine Hilfe für alle, die a) zur Navigation eine Tastatur verwenden und b) den Bildschirm sehen können.

Möchten Sie sehen, wie das funktioniert? Laden Sie diese Seite neu und drücken Sie dann ein paar Mal die Tabulatortaste. Sie sollten nun gelbe Umrisse um einige Elemente in der Kopfzeile sehen, beispielsweise um das Logo und die Social-Media-Symbole.

Jedes Mal, wenn Sie die Tabulatortaste drücken, springt der Cursor zum nächsten Element in der Fokusreihenfolge (die in der Regel der Reihenfolge entspricht, in der die Elemente im Code erscheinen). Sie können die Enter- oder Return-Taste drücken, um den Link zu aktivieren. Mit der Tabulatortaste, den Pfeiltasten und der Enter-/Return-Taste können Sie den Großteil des Internets per Tastatur steuern.

Die gängigsten Browser (Firefox, Chrome, Internet Explorer und Safari) verfügen alle über standardmäßige Fokusanzeigen für die meisten (wenn nicht sogar alle) Elemente, die in den Browser integriert sind. Wenn Sie den Fokus an keiner Stelle definieren, können Sie sich zumindest auf die nativen Browser-Anzeigen verlassen.

Die Fokusanzeigen sehen jedoch je nach Browser unterschiedlich aus. Wenn Sie möchten, dass Ihre Website in verschiedenen Browsern ein einheitliches Erscheinungsbild aufweist, lohnt es sich, Zeit in die Definition von Fokusstilen zu investieren.

Erstellen eines barrierefreien Standardfokus

Es gibt einige wichtige Aspekte für gut gestaltete Fokusanzeigen. Einige davon wurden oben bereits erwähnt. Zur besseren Übersicht finden Sie hier eine Liste:

• Guter Kontrast
• Form und Größe, die zum Element passen
• Die Farbgebung ist komplementär, sticht aber dennoch hervor
• Das muss nicht für alle Elemente gleich sein.
• Animationen helfen den Benutzern dabei, die Bewegung des Fokus zu verfolgen
• Sollte einwandfrei funktionieren (auch in älteren Browsern sichtbar sein)
• Sollte in allen Browsern gleich sein

Gestaltung für mehr Konzentration

• Erstellen Sie eine Liste aller Elemente, auf die der Fokus gesetzt werden kann. Wie viele Varianten gibt es von jedem Element? Wenn es primäre und sekundäre Schaltflächen gibt, die unterschiedliche Farben verwenden, funktioniert dann dieselbe Fokusanzeige für beide?
• Denken Sie über Ihr Farbschema nach. Verwenden Sie eine Farbe für Hervorhebungen? Würde sich diese Farbe gut zur Hervorhebung eignen? Falls nicht, gibt es eine andere Farbe, die sich dafür eignen würde?
• In vielen Fällen entspricht der Fokus-Zustand dem Hover-Zustand. Wenn Ihr Hover-Zustand deutlich erkennbar ist, sollten Sie in Erwägung ziehen, diesen auch als Fokusanzeige zu verwenden.
• Es empfiehlt sich generell, den nativen Fokusstil des Browsers für alle Elemente durch einen benutzerdefinierten Stil zu ersetzen, damit die Fokusanzeigen in allen Browsern einheitlich dargestellt werden.

Schauen wir uns den Standard-CSS-Fokus für unsere Musterbibliothek „Cauldron“ an:

*:focus {
    outline: 2px solid #d71ef7;
}

Unser Standard-Fokus ist ein sattes Violett, damit er sich auf einem weißen (#ffffff) oder cremefarbenen (#fdfdfe) Arbeitsbereich gut abhebt. Er hat einen Umriss von 2 px, sodass er etwas besser sichtbar ist als ein einfacher 1-px-Strich, und es gibt einen Versatz von 2 px, damit er nicht direkt an den Text stößt, beispielsweise wenn man den Fokus auf einen Link setzt.

Gutes Beispiel

Schlechtes Beispiel

Navigieren Sie mit der Tabulatortaste durch Ihre Anwendung und achten Sie darauf, wo der Fokus besonders gut aussieht und wo er … ähm, weniger gut aussieht. Die Stellen, an denen der Fokusstil fehl am Platz wirkt, könnten für einen benutzerdefinierten Fokus in Frage kommen.

Individueller Fokus

Es gibt zwei Fälle, in denen wir benutzerdefinierten Fokus verwenden:

1. Wenn Sie dem fokussierbaren Element besondere Hervorhebung verleihen möchten (z. B. Eingabefelder oder Schaltflächen).
2. Wenn die Standardfarbe für den Fokus vor einem bestimmten Hintergrund nicht funktioniert.

Schauen wir uns ein paar maßgeschneiderte Schwerpunkte an, die wir für Cauldron entwickelt haben.

Feldangaben

Dies ist ein nicht fokussiertes Feld aus „Cauldron“.

Wir wollten, dass unser Fokus auf dem Spielfeld einen unverwechselbaren Charakter hat und sich an den Zustand des Spielfelds anpasst. Wir haben uns dafür entschieden, die Farbe der Spielfeldumrandung zu übernehmen und ihr einen sanften Schimmer zu verleihen, um den Fokus zu kennzeichnen.

Befindet sich das Feld im Fehlerzustand, wird es mit einer dickeren Linie und einem roten Umriss sowie dem dazugehörigen Fehlertext dargestellt.

Wenn der Fokus wieder auf ein Fehlerfeld zurückkehrt, verwandelt sich der dicke Rahmen wieder in einen Schimmer, wodurch eine visuelle Kontinuität zum Fokuszustand ohne Fehler hergestellt wird.

Wir haben versucht, den Fokuszustand für Felder so zu gestalten, dass er sich wie eine natürliche Erweiterung des Musters anfühlt und nicht wie etwas, das dieses überlagert.

Schaltflächen

Dies ist eine nicht fokussierte Hauptschaltfläche aus „Cauldron“:

Unser Terminal-Button-Fokus gehört zu meinen persönlichen Favoriten – nicht nur, weil unser Frontend-Entwickler bei der Umsetzung hervorragende Arbeit geleistet hat, sondern auch, weil er optisch ansprechend ist und sofort als fokussierter Zustand erkennbar ist.

Unsere Sekundär- und Fehler-Schaltflächen verwenden denselben Fokus, ihre Farbe wird jedoch angepasst, damit sie farblich gut zum Text passt.

Wir haben die Fokusanzeigen der Schaltflächen optisch deutlich hervorgehoben, damit sie ins Auge fallen, da sie in unseren Anwendungen für Terminalaktionen verwendet werden.

Dialoge

Wenn ein Nutzer eines Screenreaders ein Formular aufruft, das Text oder eine Überschrift enthält, müssen diese Informationen vorgelesen werden. Daher muss der Fokus auf das Formular in irgendeiner Weise gesetzt werden. Dies äußert sich häufig darin, dass das gesamte Formular hervorgehoben wird (manchmal unsichtbar?). Bei Textfeldern verwenden wir verschiedene Fokusarten, damit die assistive Technologie den Text vorlesen kann, ohne dass es optisch unübersichtlich wird.

Für Textabschnitte, die als Block vorgelesen werden sollen, verwenden wir eine linke Leiste, die im Randbereich des umschließenden Objekts erscheint, wie hier in unserer Meldung. Sobald Sie die Tabulatortaste drücken, springt der Fokus zum ersten Objekt, das mit der Tabulatortaste ausgewählt werden kann – in diesem Fall ist das die Schaltfläche „READY“.

Bei Elementen wie Modalfenstern, bei denen wir ein Formular mit einer eindeutigen Überschrift haben, verwenden wir einen Unterstrich, um den Fokus anzuzeigen. Außerdem springt der Fokus nach dem Drücken der Tabulatortaste zum ersten Objekt, das mit der Tabulatortaste ausgewählt werden kann – in diesem Fall wäre das „Vorname“.

Die Standardgröße passt nicht

Es gibt Situationen, in denen man keinen benutzerdefinierten Fokus erstellen möchte, die Standardfarbe aber nicht zur Hintergrundfarbe passt. Ihr könnt euch sicher denken, was ihr tun müsst: die Farbe des Fokus ändern. Unten seht ihr ein Beispiel aus unseren Toasts.

Gutes Beispiel

Schlechtes Beispiel

Auch wenn das „X“-Schließsymbol den Standardfokus verwendet, mussten wir die Farbe ändern, um den Farbkontrast zu verbessern und es besser an das Farbschema anzupassen.

Was man vermeiden sollte

Ein paar Dinge, die Sie bei der Festlegung Ihres Schwerpunkts vermeiden sollten:

1. Ein zu unauffälliger Fokus. Ich glaube, wir alle kennen diesen schrecklichen gepunkteten Fokus, den praktisch niemand erkennen kann. Der Fokus sollte optisch deutlich erkennbar sein.
2. Der Fokus verschwindet. Dies ist oft auf ein Problem mit dem z-Index zurückzuführen und tritt häufig bei Menüs mit Registerkarten auf. Es ist wichtig, zu überprüfen, ob der Fokus eines Elements nicht durch ein anderes Element verdeckt wird.
3. Optisch unstimmiger Fokus. Das liegt natürlich ganz in Ihrem gestalterischen Ermessen, aber vergessen Sie nicht die alte Regel: Wenn etwas nicht ganz stimmt, ist es das meistens auch.

Wie und wann man Fokusindikatoren angeht

Unabhängig davon, wann Sie beginnen, sollten Sie als Erstes eine Liste aller fokussierbaren Elemente erstellen, die Sie auf der Website verwendet haben oder verwenden werden. Wie viele Farb- oder Stilvarianten gibt es jeweils? Verwendet Ihre Website benutzerdefinierte Widgets oder Steuerelemente? Verwendet Ihre Website (oder Ihr System) mehrere Farbschemata?

Bei der Gestaltung von Fokusindikatoren gibt es zwei Situationen, in denen Sie sich möglicherweise befinden:

1. Entwurf neuer Muster
2. Eine bestehende Anwendung verbessern

Der beste Zeitpunkt für die Gestaltung von Fokusindikatoren ist, bevor die Elementmuster implementiert wurden – beispielsweise wenn man bei einer neuen Website ganz von vorne anfängt oder wenn man das Design einer bestehenden Website überarbeitet. Zwar kann man versuchen, Fokusindikatoren im Nachhinein anzupassen, doch ist es aus mehreren Gründen oft einfacher, die Fokusindikatoren bereits bei der Gestaltung der Elementmuster selbst zu berücksichtigen:

1. Es ist einfacher, Zustimmung für Fokusindikatoren zu gewinnen, wenn diese Teil eines einheitlichen Designs sind.
2. Es ist einfacher, den Fokus gleichzeitig mit anderen Zuständen, wie beispielsweise dem Hover-Zustand, zu implementieren.
3. Bei der Gestaltung anderer Zustände (wie „Hover“ und „aktiv“) fällt es leichter, den Fokus zu gestalten, da man Zeit hat, sich genauer Gedanken darüber zu machen, wie sich der Fokus in das übrige Design einfügt.

Mein Rat: Integrieren Sie Fokusanzeigen frühzeitig und überprüfen Sie sie regelmäßig. Am schwierigsten ist es, Fokusanzeigen unter Zeitdruck in eine Anwendung zu integrieren. Auch die Nutzer Ihrer Website werden es Ihnen danken, wenn Sie Fokusanzeigen von Anfang an einbauen.