The CSS Podcast – 018: Focus
Sie klicken auf Ihrer Webseite auf einen Link, über den der Nutzer zum Hauptinhalt der Website gelangt. Diese Links werden oft als Sprunglinks oder Ankerlinks bezeichnet. Wenn dieser Link mit den Tasten Tabulatortaste und Eingabetaste von einer Tastatur aktiviert wird, wird der Hauptinhaltscontainer von einem Fokusring umgeben. Why is that?
Das liegt daran, dass <main> einen tabindex="-1"-Attributwert hat, was bedeutet, dass er programmatisch fokussiert werden kann.
Wenn <main> als Ziel verwendet wird, erhält es programmatischer Fokus, weil #main-content in der URL-Leiste des Browsers mit id übereinstimmt.
In diesen Situationen ist es verlockend, die Fokusstile zu entfernen, aber ein angemessener und sorgfältiger Umgang mit dem Fokus trägt dazu bei, eine gute, zugängliche Nutzererfahrung zu schaffen.
Sie eignet sich auch hervorragend, um Interaktionen mit Interesse zu wecken.
Warum ist Fokus wichtig?
Als Webentwickler ist es Ihre Aufgabe, eine Website für alle zugänglich und inklusiv zu machen. Die Erstellung barrierefreier Fokuszustände mit CSS gehört zu dieser Verantwortung.
Fokusstile unterstützen Nutzer, die ein Gerät wie eine Tastatur oder einen Schalter zum Navigieren auf einer Website und zur Interaktion mit ihr verwenden. Wenn ein Element fokussiert wird und es keine visuelle Angabe gibt, verlieren Nutzende möglicherweise den Überblick darüber, was im Fokus ist. Dies kann zu Problemen mit der Navigation und unerwünschtem Verhalten führen, wenn beispielsweise dem falschen Link gefolgt wird.
Wie Elemente in den Fokus rücken
Bestimmte Elemente sind automatisch fokussierbar. Dies sind Elemente, die Interaktionen und Eingaben akzeptieren, z. B. <a>, <button>, <input> und <select>.
Kurz gesagt: Alle Formularelemente, Schaltflächen und Links.
In der Regel verwenden Sie zur Navigation durch die fokussierbaren Elemente einer Website die Tabulatortaste, um auf der Seite vorwärts zu navigieren, und die Umschalttaste + Tabulatortaste, um rückwärts zu navigieren.
Es gibt auch ein HTML-Attribut namens tabindex, mit dem Sie den TAB-Index, also die Reihenfolge, in der die Elemente hervorgehoben sind, jedes Mal ändern können, wenn jemand die Tabulatortaste drückt oder der Fokus durch eine Hash-Änderung in der URL oder durch ein JavaScript-Ereignis verschoben wird.
Wenn tabindex für ein HTML-Element auf 0 gesetzt ist, kann es über den Schlüssel tab hervorgehoben werden. Außerdem wird der globale Tabindex berücksichtigt, der durch die Reihenfolge der Dokumentquelle definiert wird.
Wenn Sie tabindex auf -1 setzen, kann der Fokus nur programmatisch erfolgen, d. h. nur dann, wenn ein JavaScript-Ereignis eintritt oder eine Hash-Änderung (entsprechend der id des Elements in der URL) erfolgt.
Wenn Sie für tabindex einen höheren Wert als 0 festlegen, wird die Datei aus dem globalen Tabindex entfernt, der durch die Reihenfolge der Dokumentquelle definiert ist.
Die Reihenfolge der Tabulatortaste wird nun durch den Wert von tabindex definiert, sodass beispielsweise ein Element mit tabindex="1" im Fokus vor einem Element mit tabindex="2" liegt.
Stil für Fokus festlegen
Das Standardverhalten des Browsers, wenn ein Element fokussiert wird, ist der Fokusring. Dieser Fokusring variiert je nach Browser und Betriebssystem.
Dieses Verhalten kann mit CSS geändert werden. Dazu verwenden Sie die Pseudoklassen :focus, :focus-within und :focus-visible, die Sie in der Lektion zu Pseudoklassen kennengelernt haben.
Es ist wichtig, einen Fokusstil festzulegen, der einen Kontrast mit dem Standardstil eines Elements aufweist.
Ein gängiger Ansatz ist beispielsweise die Verwendung des Attributs outline.
a:focus {
outline: 2px solid slateblue;
}
Die Eigenschaft outline kann zu nah am Text eines Links erscheinen. Die outline-offset-Eigenschaft kann jedoch dabei helfen, da sie zusätzliche visuelle padding hinzufügt, ohne die geometrische Größe, die das Element füllt.
Ein positiver Wert für outline-offset schiebt den Umriss nach außen, ein negativer Wert nach innen.
Wenn Sie für Ihr Element ein border-radius festgelegt haben und outline verwenden, wird es derzeit in einigen Browsern nicht übereinstimmen, da der Umriss scharfe Ecken hat.
Aus diesem Grund ist es verlockend, einen box-shadow mit einem kleinen Weichzeichner-Radius zu verwenden, da box-shadow an die Form zuschneidet und border-radius berücksichtigt. Dieser Stil wird jedoch im Windows-Modus mit hohem Kontrast nicht angezeigt.
Dies liegt daran, dass im Windows-Modus mit hohem Kontrast keine Schatten angewendet werden und Hintergrundbilder größtenteils ignoriert werden, um die bevorzugten Einstellungen des Nutzers zu bevorzugen.
Zusammenfassung
Das Erstellen eines Fokuszustands, der einen Kontrast zum Standardstatus eines Elements aufweist, ist äußerst wichtig. Bei den Standard-Browserstilen ist dies bereits erledigt. Falls Sie dieses Verhalten ändern möchten, beachten Sie Folgendes:
- Verwenden Sie
outline: nonenicht für ein Element, das Tastaturfokus erhalten kann. - Ersetzen Sie
outline-Designs nicht durchbox-shadow. da sie unter Windows im Modus mit hohem Kontrast nicht angezeigt werden. - Legen Sie nur dann einen positiven Wert für
tabindexbei einem HTML-Element fest, wenn dies unbedingt erforderlich ist. - Achten Sie darauf, dass der Fokus und der Standardzustand sehr klar sind.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Konzentration
Welche der folgenden Elemente sind automatisch fokussierbare Elemente?
<a><p><button><input><output><select>Welches der folgenden Eingabegeräte kann den Fokus einstellen?