Ein kleiner Spaß mit benutzerdefinierten Fokus-Stilen

Jeder Frontend-Entwickler hat dieses Szenario schon erlebt oder wird es erleben: Ihr Chef, Kunde oder Designer findet, dass der von Browsern auf fokussierten Elementen angewendete Umriss nicht zur Benutzeroberfläche passt, und bittet Sie, ihn zu entfernen. Oder Sie möchten ihn vielleicht selbst entfernen.

Sie recherchieren ein wenig und stellen fest, dass dies dringend abgeraten wird, da der Fokus-Umriss einen Grund hat: Er bietet visuelles Feedback für die Tastaturnavigation (mit der Tabulatortaste) und lässt Benutzer, die keine Maus bedienen können oder eine Sehstörung haben, wissen, wo sie sich auf dem Bildschirm befinden.

Das bedeutet jedoch nicht, dass Sie an diesen Umriss gebunden sind. Anstatt ihn zu entfernen, können Sie ihn einfach durch etwas anderes ersetzen. So behalten Sie die Barrierefreiheit Ihrer Benutzeroberfläche bei und erhalten mehr Flexibilität bei der Gestaltung, damit sie besser zu Ihrer Benutzeroberfläche passt.

Sie können damit beginnen, den Standard-Browserumriss zu entfernen, indem Sie den fokussierten Zustand des Elements auswählen und outline: none anwenden. Anschließend können Sie aus den folgenden Optionen wählen, um ihn zu ersetzen

Hintergrundfarbe ändern

Dies funktioniert am besten für Elemente, die gefüllt werden können, wie z. B. Schaltflächen. Wählen Sie den fokussierten Zustand des Elements aus und wenden Sie eine kontrastierende Hintergrundfarbe darauf an. Je höher der Kontrast, desto besser, da subtile Änderungen möglicherweise keine ausreichenden visuellen Hinweise liefern, insbesondere bei Farbenblindheit und Sehschwäche.

Im folgenden Beispiel ändern sich sowohl die Hintergrund- als auch die Randfarbe; Sie können entweder eine oder beide auswählen.

Klicken oder fokussieren Sie mit der Tabulatortaste, um zu sehen, wie dieser Zustand aussieht.

Siehe den Pen
Elemente, die den nativen Umrissfokus durch Hintergrundfarbe ersetzen von Lari (@larimaza)
auf CodePen.

Textfarbe ändern

Wenn das Element Text enthält, können Sie den fokussierten Zustand auswählen und seine Farbe ändern. Dies funktioniert auch für mit mask-image angewendete Icons. Sie können das Icon als Nachfahre des fokussierten Elements auswählen und seine Hintergrundfarbe ändern, wie im folgenden Beispiel mit einer Schaltfläche.

Siehe den Pen
Elemente, die den nativen Umrissfokus durch Text- und Iconfarbe ersetzen von Lari (@larimaza)
auf CodePen.

Auch hier ist Kontrast entscheidend. Sie können auch erwägen, Textlinks eine Unterstreichung hinzuzufügen und diese als Teil des geänderten Zustands zu gestalten, denn wie die Web Content Accessibility Guidelines besagen

Farbe wird nicht als einziges visuelles Mittel verwendet, um Informationen zu vermitteln, eine Aktion anzuzeigen, eine Reaktion auszulösen oder ein visuelles Element zu unterscheiden. (Level A)
Verständnis von Erfolgskriterium 1.4.1

Schatten anwenden

Die Eigenschaft box-shadow kann genau denselben Zweck wie der Umriss erfüllen, nur dass sie viel leistungsfähiger ist – Sie können jetzt Farbe, Deckkraft, Versatz, Weichzeichnungsradius und Streuradius steuern. Und wenn ein border-radius angegeben ist, folgt der Box-Schatten denselben abgerundeten Ecken.

Siehe den Pen
Elemente, die den nativen Umrissfokus durch Box-Schatten ersetzen von Lari (@larimaza)
auf CodePen.

Sie können mit dieser Technik wirklich kreativ werden (im Ernst, tun Sie das nicht)

Siehe den Pen
Elemente, die den nativen Umrissfokus durch einen verrückten Box-Schatten ersetzen von Lari (@larimaza)
auf CodePen.

Dies funktioniert für praktisch jeden Art von fokussierbarem Element, wie z. B. Toggles, Kontrollkästchen, Optionsfelder und Schieberegler.

Siehe den Pen
Toggle und Radiobutton, die den nativen Umrissfokus durch Box-Schatten ersetzen von Lari (@larimaza)
auf CodePen.

Elementgröße erhöhen

Als Alternative zur Farbänderung können Sie auch eine subtile Größenänderung als Fokus-Feedback verwenden. In diesem Beispiel verwenden wir transform: scale.

Siehe den Pen
Elemente, die den nativen Umrissfokus durch transform scale ersetzen von Lari (@larimaza)
auf CodePen.

Der Schlüssel hier ist Subtilität. Extreme Größenänderungen können zu Inhaltsverschiebungen führen, ganz zu schweigen von einer schlechten Erfahrung für Menschen, die reduzierte Bewegungen bevorzugen.

Vorhandene Hover-Stile replizieren

Wenn das Element bereits einen kontrastierenden Hover-Stil hat, können Sie diesen Stil einfach übernehmen und auch für den Fokus-Zustand verwenden. Das ist eine ziemlich elegante Lösung, da Sie keine neuen Farben oder Umrisse zur Benutzeroberfläche hinzufügen müssen.

Hier ist ein Beispiel, bei dem sowohl der Fokus- als auch der Hover-Zustand einen hohen Kontrast zum Hintergrund des Standardstils eines Elements aufweisen

Siehe den Pen
Elemente, die den nativen Umrissfokus durch Hover-Stile ersetzen von Lari (@larimaza)
auf CodePen.

Bonus: Den Standardumriss anpassen

Alles, was wir bisher betrachtet haben, geht davon aus, dass wir den Fokus-Umriss komplett entfernen wollen. Das müssen wir nicht! Tatsächlich ist es ein Rand, den wir anpassen können.

button:focus {
  outline: 3px dashed orange;
}

Das ist Kurzschreibweise und hätte so geschrieben werden können, wenn wir die Stile verfeinern wollen

button:focus {
  outline-width: 3px;
  outline-style: dashed;
  outline-color: orange;
}

Eine zusätzliche Superkraft, die wir haben, ist die Eigenschaft outline-offset, die von der outline Kurzschreibweise getrennt ist, aber mit ihr zusammen verwendet werden kann, um die Position des Fokus-Rings zu ändern

button:focus {
  outline: 3px dashed orange;
  outline-offset: 10px;
}

Fazit

Sie können all diese Optionen mischen und kombinieren, um benutzerdefinierte Stile zu erhalten, die für jeden Komponententyp innerhalb Ihrer Benutzeroberfläche geeignet aussehen.

Und es ist erwähnenswert: Vergessen Sie nicht, strenge Farbkontraste und andere visuelle Hinweise zusätzlich zur Farbe zu verwenden, wenn Sie benutzerdefinierte Fokus-Zustände anwenden. Sicher, wir alle wünschen uns eine Erfahrung, die mit unseren Designs übereinstimmt, aber wir können dabei gute Barrierefreiheitsstandards einhalten. Das W3C empfiehlt dieses Tool, um den Kontrast von Farbwerten gegen die WCAG-Richtlinien zu testen.