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 durchbox-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
Welche der folgenden Elemente sind automatisch fokussierbare Elemente?
<a>
<p>
<button>
<input>
<output>
<select>
Mit welchem der folgenden Eingabegeräte kann der Fokus festgelegt werden?