Fokus

The CSS Podcast – 018: Fokus

Auf Ihrer Webseite klicken Sie auf einen Link, der den Nutzer zum Hauptinhalt der Website weiterleitet. 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 durch einen Fokusring umgeben. Warum?

Das liegt daran, dass <main> einen tabindex="-1"-Attributwert hat und programmatisch fokussiert werden kann. Wenn <main> im Targeting ist, weil #main-content in der URL-Leiste des Browsers mit id übereinstimmt, erhält es 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 User Experience schaffen. Außerdem können Sie damit Interaktionen interessanter gestalten.

Warum ist 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 fokussiert wird und es keine visuelle Anzeige dafür gibt, verliert der Nutzer möglicherweise den Überblick. Dies kann zu Problemen bei der Navigation und unerwünschtem Verhalten führen, wenn beispielsweise dem falschen Link gefolgt wird.

Wie Elemente in den Fokus rücken

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".

Fokus des Stylings

Wenn ein Element den Fokus erhält, wird standardmäßig im Browser ein Fokusring eingeblendet. Dieser Fokusring variiert je nach Browser und Betriebssystem.

Dieses Verhalten kann mithilfe der Pseudoklassen :focus, :focus-within und :focus-visible, die Sie in der Lektion zu Pseudoklassen kennengelernt haben, mit CSS geändert werden. Es ist wichtig, einen Fokusstil mit Kontrast zum Standardstil eines Elements festzulegen. Ein gängiger Ansatz ist beispielsweise die Property outline.

a:focus {
  outline: 2px solid slateblue;
}

Das Attribut outline kann zu nah am Text eines Links erscheinen. Mit dem Attribut outline-offset lässt sich das Problem jedoch beheben, 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 unglaublich wichtig, einen Fokuszustand zu erstellen, der einen Kontrast zum Standardzustand eines Elements aufweist. Die Standardbrowserstile übernehmen das bereits für Sie. Wenn Sie dieses Verhalten ändern möchten, beachten Sie Folgendes:

• Verwenden Sie outline: none nicht für ein Element, das den Tastaturfokus erhalten kann.
• Ersetzen Sie outline-Stile nicht durch box-shadow. da sie im Modus mit hohem Kontrast von Windows nicht angezeigt werden.
• Legen Sie nur dann einen positiven Wert für tabindex in einem HTML-Element fest, wenn es unbedingt erforderlich ist.
• Achten Sie darauf, dass der Fokus nicht wie der Standardzustand, sondern klar erkennbar ist.

Wissenstest

Testen Sie Ihr Wissen zum Thema Fokus