The CSS Podcast – 018: Fokus
Auf Ihrer Webseite klicken Sie auf einen Link, über den Nutzer direkt zum Hauptinhalt der Website gelangen. Diese werden oft als Sprung- oder Ankerlinks bezeichnet. Wenn dieser Link über die Tastatur mit den Tasten Tab und Eingabe aktiviert wird, wird der Hauptinhaltscontainer von einem Fokusring umgeben. Warum?
Das liegt daran, dass <main> den Attributwert tabindex="-1" hat und daher programmatisch fokussiert werden kann.
Wenn die <main> ausgerichtet ist, weil die #main-content in der URL-Leiste des Browsers mit der id übereinstimmt, erhält sie den programmatischen Fokus.
In diesen Fällen ist es verlockend, die Fokusstile zu entfernen. Wenn Sie den Fokus jedoch richtig und mit Bedacht verwenden, können Sie eine gute, barrierefreie Nutzererfahrung schaffen.
Außerdem können Sie damit Interaktionen interessanter gestalten.
Warum ist der Fokus wichtig?
Als Webentwickler ist es Ihre Aufgabe, eine Website barrierefrei und für alle zugänglich zu machen. Dazu gehört auch, barrierefreie Fokuszustände mit CSS zu erstellen.
Fokusstile unterstützen Nutzer, die ein Gerät wie eine Tastatur oder einen Schalter verwenden, um auf einer Website zu navigieren und zu interagieren. Wenn ein Element den Fokus erhält und es keine visuellen Hinweise gibt, kann der Nutzer den Überblick verlieren, was gerade im Fokus ist. Dies kann zu Navigationsproblemen und unerwünschtem Verhalten führen, wenn beispielsweise der falsche Link angeklickt wird.
So erhalten Elemente den Fokus
Bestimmte Elemente können automatisch fokussiert werden. Das sind Elemente, die Interaktionen und Eingaben zulassen, z. B. <a>, <button>, <input> und <select>.
Kurz gesagt: alle Formularelemente, Schaltflächen und Links.
Normalerweise können Sie die fokusierbaren Elemente einer Website mit der Tabulatortaste auf der Seite vor- und mit der Umschalttaste + Tabulatortaste zurückgehen.
Es gibt auch ein HTML-Attribut namens tabindex, mit dem Sie den Tabulatorindex ändern können, also die Reihenfolge, in der Elemente den Fokus erhalten. Das passiert jedes Mal, 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 in einem HTML-Element auf 0 gesetzt ist, kann es über die Taste Tab den Fokus erhalten und der globale Tab-Index wird berücksichtigt, der durch die Reihenfolge der Dokumentquelle definiert ist.
Wenn Sie tabindex auf -1 festlegen, kann es nur programmatisch den Fokus erhalten, also nur, wenn ein JavaScript-Ereignis auftritt oder sich der Hashwert ändert (entspricht der id des Elements in der URL).
Wenn Sie tabindex auf einen Wert festlegen, der höher als 0 ist, wird er aus dem globalen Tab-Index entfernt, der durch die Reihenfolge der Dokumentquellen definiert wird.
Die Tabulatorreihenfolge wird jetzt durch den Wert von tabindex definiert. Ein Element mit tabindex="1" erhält also beispielsweise den Fokus vor einem Element mit tabindex="2".
Stilisierungsschwerpunkt
Standardmäßig wird im Browser ein Fokusring angezeigt, wenn ein Element den Fokus erhält. Dieser Fokusring variiert je nach Browser und Betriebssystem.
Dieses Verhalten kann mit CSS geändert werden. Verwenden Sie dazu 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 zum Standardstil eines Elements aufweist.
Häufig wird beispielsweise die Property outline verwendet.
a:focus {
outline: 2px solid slateblue;
}
Das Attribut outline kann zu nah am Text eines Links erscheinen. Das Attribut outline-offset kann hier Abhilfe schaffen, da es zusätzliche visuelle padding hinzufügt, ohne die geometrische Größe des Elements zu beeinflussen.
Ein positiver Wert für outline-offset schiebt den Umriss nach außen, ein negativer Wert zieht ihn nach innen.
Wenn Sie in einigen Browsern für Ihr Element border-radius festlegen und outline verwenden, stimmen die Konturen derzeit nicht überein. Der Umriss hat scharfe Ecken.
Daher ist es verlockend, box-shadow mit einem kleinen Unkenntlichmachungsradius zu verwenden, da box-shadow an der Form zugeschnitten wird und border-radius berücksichtigt. Dieser Stil wird jedoch im Hochkontrastmodus von Windows nicht angezeigt.
Das liegt daran, dass im Modus mit hohem Kontrast von Windows keine Schatten angewendet und Hintergrundbilder größtenteils ignoriert werden, um die bevorzugten Einstellungen des Nutzers zu berücksichtigen.
Zusammenfassung
Es ist sehr wichtig, einen Fokusstatus zu erstellen, der einen Kontrast zum Standardstatus eines Elements bildet. Die Standardbrowserstile übernehmen das bereits für Sie. Wenn Sie dieses Verhalten ändern möchten, beachten Sie Folgendes:
- Verwenden Sie
outline: nonenicht für ein Element, das den Tastaturfokus erhalten kann. - Ersetzen Sie
outline-Stile nicht durchbox-shadow. da sie im Modus mit hohem Kontrast von Windows nicht angezeigt werden. - Legen Sie nur dann einen positiven Wert für
tabindexfür ein HTML-Element fest, wenn es unbedingt erforderlich ist. - Der Fokusstatus muss sich deutlich vom Standardstatus unterscheiden.
Wissen testen
Ihr Wissen über den Fokus testen
Welche der folgenden Elemente können automatisch fokussiert werden?
<a><p><button><input><output><select>Mit welchem der folgenden Eingabegeräte kann der Fokus festgelegt werden?