Mit ein Wenig Spaß Mit den Benutzerdefinierten Fokus Stile

0
11

Jeder front-end-Entwickler beschäftigt hat oder beschäftigen sich mit diesem Szenario: Ihr Chef, AUFTRAGGEBER oder designer denkt die Gliederung angewendet, die von Browsern, die auf konzentrierten Elementen nicht mit der UI, und fragt Sie, um es zu entfernen. Oder Sie vielleicht sogar auf der Suche, um es selbst entfernen.

Also tun Sie etwas Forschung und finden Sie heraus, dass dies stark davon abgeraten, da die Fokus-outline ist es für einen Grund: es bietet visuelles feedback für die navigation mit der Tastatur (per Tab-Taste), so dass Benutzer, die nicht verwenden können, eine Maus oder eine Sehbehinderung wissen, wo Sie sind auf dem Bildschirm.

Diese Schaltfläche zeigt einen fokussierten Zustand mit Chrome Standard-Umriss-Stil.

Das bedeutet nicht, Sie stecken mit diesem Entwurf, obwohl. Statt es zu entfernen, können Sie einfach ersetzen Sie es mit etwas anderem. So behalten Sie Ihr interface zugänglich und erhalten Sie mehr Flexibilität, wie es aussieht, so können Sie besser passen Sie Ihre Benutzeroberfläche.

Sie können beginnen, durch entfernen der Standard-browser Gliederung durch Auswahl der fokussierte Zustand des Elements und anwenden Gliederung: keine. Dann, Sie können wählen Sie aus den jeweiligen Optionen vor, um es zu ersetzen:

Ändern Sie die Hintergrundfarbe

Dies funktioniert am besten für die Elemente, die gefüllt werden können, wie etwa Schaltflächen. Wählen Sie den fokussierten Zustand des Elements, und wenden Sie einen kontrastierenden hintergrund Farbe. Je höher der Kontrast desto besser, weil die feinen Veränderungen kann nicht stark genug sein, visual cues, insbesondere in Fällen, in denen mit Farbe Blindheit und low vision.

In dem Beispiel unten, sowohl hintergrund-und Rahmenfarbe ändern; Sie können auswählen, entweder oder beide.

Klicken oder den Fokus mit der Tab-Taste, um anzuzeigen, wie dieser Zustand aussieht.

Siehe Stift
Elemente ersetzen einheitlichen Gliederung konzentrieren, mit der Hintergrundfarbe von Lari (@larimaza)
auf CodePen.

Ändern Sie die text-Farbe

Wenn das element hat einen beliebigen text, können Sie den fokussierten Zustand und die Veränderung seiner Farbe. Dies funktioniert auch für Symbole angewendet, mit der Maske-Bild; Sie können wählen Sie das Symbol als ein Nachkomme von dem fokussierten element und ändern seine Hintergrundfarbe, wie die Beispiel-button unten.

Siehe Stift
Elemente ersetzen einheitlichen Gliederung focus mit text und Symbol Farbe von Lari (@larimaza)
auf CodePen.

Wieder, der Kontrast ist der Schlüssel. Sie können auch erwägen, eine Unterstreichung auf und text-links, so dass es Teil von dem Zustand geändert, weil, wie die Web Content Accessibility Guidelines Stand:

Farbe ist nicht die einzige visuelle Mittel der übermittlung von Informationen, die auf eine Aktion, woraufhin eine Antwort, oder ein visuelles element zu unterscheiden. (Stufe A)
Grundlegendes Erfolgskriterium 1.4.1

Anwenden einer box-shadow

Die box-shadow Eigenschaft können Sie genau die gleiche Arbeit wie die Umrisse, außer es ist sehr viel mächtiger — jetzt können Sie die Farbe, die Deckkraft, offset, blur radius ” und ” spread-radius. Und wenn ein border-radius angegeben ist, wird der box-shadow folgt dem gleichen abgerundeten Ecken.

Siehe Stift
Elemente ersetzen einheitlichen Gliederung Fokus mit dem box-shadow von Lari (@larimaza)
auf CodePen.

Sie können wirklich kreativ mit dieser Technik (im ernst, obwohl, tun Sie das nicht):

Siehe Stift
Elemente ersetzen einheitlichen Gliederung focus mit insane-box-shadow von Lari (@larimaza)
auf CodePen.

Das funktioniert für praktisch jede Art von justierbares element, wie Schalter, Checkboxen, radio-buttons und Folien.

Siehe Stift
Toggle-und radio button Ersetzung einheitlichen Gliederung Fokus mit dem box-shadow von Lari (@larimaza)
auf CodePen.

Erhöhen Sie die Größe des Elements am

Als alternative zu Farbe ändern, können Sie auch resort zu subtilen Größe änderung als Fokus-feedback. In diesem Beispiel verwenden wir transformieren: skalieren.

Siehe Stift
Elemente ersetzen einheitlichen Gliederung focus mit transformieren-skalieren von Lari (@larimaza)
auf CodePen.

Der Schlüssel hier ist Subtilität. Extreme Größe änderungen möglicherweise content reflow, nicht zu erwähnen, eine schlechte Erfahrung für diejenigen, die lieber reduzierte Bewegung.

Replizieren vorhandene hover-styles

Wenn das element bereits eine kontrastierende hover-Stil, können Sie nehmen Sie einfach, dass Stil und wendet es für den fokussierten Zustand als gut. Dies ist eine ziemlich elegante Lösung, da Sie nicht haben, fügen Sie neue Farben oder Umrisse an der Oberfläche.

Hier ist ein Beispiel, wo der Fokus und hover-Staaten nehmen einen hohen Kontrast zum hintergrund eines Elements ist der Standard-Stil:

Siehe Stift
Elemente ersetzen einheitlichen Gliederung Fokus mit hover-Stile von Lari (@larimaza)
auf CodePen.

Bonus: Passen Sie die Standard-Gliederung

Alles, was wir uns angeschaut haben, so weit nimmt die Annahme, dass wir wollen, entfernen Sie den Fokus-Gliederung insgesamt. Wir haben nicht zu! In der Tat, es ist eine Grenze, die wir individuell anpassen können.

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

Das ist die Kurzform und geschrieben worden sein könnte, auf diese Weise, wenn wir wollen, um die Feinabstimmung der Stile:

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

Eine weitere Supermacht, die wir haben, ist die outline-offset-Eigenschaft, die getrennt von der Gliederung Kurzschrift-Eigenschaft, kann aber verwendet werden, neben der auf die änderung der position der Fokus-ring:

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

Fazit

Sie können mix and match all diese Optionen, um benutzerdefinierte Stile, die Aussehen, geeignet für jeden Komponententyp in Ihrer Schnittstelle.

Und es lohnt sich zu wiederholen: vergessen Sie nicht die krassen Farbkontraste und andere visuelle Hinweise neben der Farbe, wenn die Annahme, den benutzerdefinierten Fokus Staaten. Sicher wollen wir alle eine Erfahrung, die im Einklang mit unseren designs, aber wir befolgen können, um bewährte Methoden für die Barrierefreiheit in den Prozess. Das W3C empfiehlt dieses tool zum testen der Kontrast der Farben-Werte gegen die WCAG-Richtlinien.

SHARE
Previous article“Headless-Modus”
Next article“Headless-Modus”