Element in die TAB-Reihenfolge einfügen
Fügen Sie ein Element mithilfe von tabindex="0"
in die natürliche TAB-Reihenfolge ein. Beispiel:
<div tabindex="0">Focus me with the TAB key</div>
Wenn du ein Element fokussieren möchtest, drücke die Tab
-Taste oder rufe die focus()
-Methode des Elements auf.
Ein Element aus der TAB-Reihenfolge entfernen
Entfernen Sie ein Element mit tabindex="-1"
. Beispiel:
<button tabindex="-1">Can't reach me with the TAB key!</button>
Dadurch wird ein Element aus der natürlichen TAB-Reihenfolge entfernt. Es kann jedoch weiterhin durch Aufrufen der Methode focus()
hervorgehoben werden.
Das Anwenden von tabindex="-1"
auf ein Element hat keine Auswirkungen auf die untergeordneten Elemente. Wenn sie von Natur aus in der TAB-Reihenfolge oder aufgrund eines tabindex
-Werts vorhanden sind, bleiben sie in der TAB-Reihenfolge.
Wenn Sie ein Element und alle zugehörigen untergeordneten Elemente aus der TAB-Reihenfolge entfernen möchten, können Sie das inert
-Polyfill des WICG verwenden.
Der Polyfill emuliert das Verhalten eines vorgeschlagenen inert
-Attributs, das verhindert, dass Elemente von Hilfstechnologien ausgewählt oder gelesen werden.
Dreh die Zeit!
.loader {
animation: spin 0.75s infinite steps(var(--count));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
Beachte die Verwendung von steps(var(--count))
, um den richtigen Effekt zu erzielen ✨