Fokus

Der Preisvergleichsportal-Podcast – 018: Fokus

Auf Ihrer Webseite Sie klicken auf einen Link, mit dem Nutzende zum Hauptinhalt der Website gelangen. Sie werden oft als Sprunglinks oder Ankerlinks bezeichnet. Wenn der Link über die Tastatur aktiviert wird, verwenden Sie die Tabulatortaste und die Eingabetaste. wird der Hauptinhaltscontainer von einem Fokusring umgeben. Warum?

Das liegt daran, dass <main> einen tabindex="-1"-Attributwert hat. Das bedeutet, dass sie programmatisch fokussiert werden können. Wenn die <main> in die Ausrichtung aufgenommen wird, weil die #main-content in der URL-Leiste des Browsers mit dem id übereinstimmt und der programmatische Fokus liegt. Es ist verlockend, die Fokusstile zu entfernen, aber ein angemessener und sorgfältiger Umgang barrierefrei und nutzerfreundlich. Es kann auch ein guter Ort sein, um Interaktionen zu fördern.

Warum ist Fokus wichtig?

Als Webentwickler ist es Ihre Aufgabe, eine Website für alle zugänglich und inklusiv zu gestalten. Das Erstellen barrierefreier Fokusstatus mit Preisvergleichsportalen gehört zu dieser Aufgabe.

Fokusstile unterstützen Nutzer, die ein Gerät wie eine Tastatur oder eine Schaltersteuerung um auf einer Website zu navigieren und mit ihr zu interagieren. Wenn ein Element fokussiert wird und es keine visuelle Kennzeichnung gibt, kann es passieren, dass Nutzende den Fokus verlieren. Dies kann zu Problemen bei der Navigation und unerwünschtem Verhalten führen, wenn wenn der falsche Link aufgerufen wird.

Wie Elemente in den Fokus rücken

Bestimmte Elemente sind automatisch fokussierbar. Elemente, die Interaktionen und Eingaben akzeptieren, z. B. <a>, <button>, <input> und <select>. Kurz gesagt: alle Formularelemente, Schaltflächen und Links. In der Regel können Sie sich mit den fokussierbaren Elementen einer Website bewegen, indem Sie die Tabulatortaste drücken, um auf der Seite vorwärts zu navigieren. Mit der Tastenkombination Umschalttaste + Tabulatortaste gehen Sie rückwärts.

Es gibt auch ein HTML-Attribut namens tabindex, mit dem Sie den Tabing-Index ändern können. Reihenfolge, in der die Elemente fokussiert sind – 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 für ein HTML-Element auf 0 gesetzt ist, kann über die Tabulatortaste hervorgehoben werden und der globale Tab-Index wird berücksichtigt. der durch die Reihenfolge der Dokumentquellen festgelegt wird.

Wenn Sie tabindex auf -1 festlegen, kann der Fokus nur programmatisch erfolgen. Das bedeutet, dass nur dann ein JavaScript-Ereignis eintritt, oder es erfolgt eine Hash-Änderung (Übereinstimmung mit id des Elements in der URL). Wenn Sie für tabindex etwas höher als 0 festlegen, wird es aus dem globalen Tab-Index entfernt. durch die Reihenfolge der Dokumentquellen. Die TAB-Reihenfolge wird jetzt durch den Wert von tabindex definiert, Ein Element mit tabindex="1" wird beispielsweise vor einem Element mit tabindex="2" fokussiert.

Fokus mit Stilen versehen

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

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

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

Die Eigenschaft outline könnte zu nahe am Text eines Links erscheinen, aber die Property outline-offset kann dabei helfen, Dadurch wird ein zusätzlicher visueller padding hinzugefügt, ohne dass sich dies auf die geometrische Größe auswirkt, die das Element ausfüllt. Ein positiver Zahlenwert für outline-offset verschiebt den Umriss nach außen. ein negativer Wert den Umriss nach innen zieht.

Derzeit gibt es in einigen Browsern Wenn Sie ein border-radius für Ihr Element festgelegt haben und outline verwenden, passen sie nicht zusammen – der Umriss hat scharfe Ecken. Aus diesem Grund Es ist verlockend, ein box-shadow mit einem kleinen Weichzeichner-Radius zu verwenden, da box-shadow sich an die Form anpasst. zu Ehren von border-radius, aber dieser Stil wird im Windows-Modus mit hohem Kontrast nicht angezeigt. Das liegt daran, dass unter Windows im hohen Kontrastmodus keine Schatten angewendet werden. und ignoriert Hintergrundbilder größtenteils, um die bevorzugten Einstellungen des Nutzers zu bevorzugen.

Zusammenfassung

Es ist unglaublich wichtig, einen Fokuszustand zu erstellen, der einen Kontrast zum Standardzustand eines Elements aufweist. Bei den Standardbrowsern ist dies bereits der Fall. Wenn Sie dieses Verhalten ändern möchten, beachten Sie bitte Folgendes:

• Verwenden Sie outline: none nicht für Elemente, die Tastaturfokus erhalten können.
• Ersetzen Sie outline-Stile nicht durch box-shadow. da diese im Windows-Modus mit hohem Kontrast 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.

Wissen testen

Testen Sie Ihr Wissen zum Thema Fokus