CodePen

bookmark_border Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Element in die Tabulatorreihenfolge einfügen

Fügen Sie mit tabindex="0" ein Element in die natürliche Tab-Reihenfolge ein. Beispiel:

<div tabindex="0">Focus me with the TAB key</div>

Wenn Sie den Fokus auf ein Element legen möchten, drücken Sie die Taste Tab oder rufen Sie die Methode focus() des Elements auf.

Elemente 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 aber weiterhin durch Aufrufen der focus()-Methode fokussiert werden.

Wenn Sie tabindex="-1" auf ein Element anwenden, hat das keine Auswirkungen auf die untergeordneten Elemente. Wenn sie sich aufgrund eines tabindex-Werts oder auf natürliche Weise in der Tabulatorreihenfolge befinden, bleiben sie dort. Wenn Sie ein Element und alle untergeordneten Elemente aus der Tab-Reihenfolge entfernen möchten, können Sie die inert-Polyfill-Funktion des WICG verwenden. Die Polyfill emuliert das Verhalten eines vorgeschlagenen inert-Attributs, das verhindert, dass Elemente von Hilfstechnologien ausgewählt oder gelesen werden.

Jetzt gehts los!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Beachten Sie die Verwendung von steps(var(--count)), um den richtigen Effekt zu erzielen ✨