CodePen

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 ✨