CodePen

Inserimento di un elemento nell'ordine delle schede

Inserisci un elemento nell'ordine della tabulazione naturale utilizzando tabindex="0". Ad esempio:

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

Per impostare lo stato attivo su un elemento, premi il tasto Tab o chiama il metodo focus() dell'elemento.

Rimuovere un elemento dall'ordine delle schede

Rimuovi un elemento utilizzando tabindex="-1". Ad esempio:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Un elemento viene rimosso dall'ordine della scheda naturale, ma può comunque essere impostato chiamando il relativo metodo focus().

Tieni presente che l'applicazione di tabindex="-1" a un elemento non ha effetto sui relativi elementi secondari; se si trovano naturalmente nell'ordine delle schede o a causa di un valore tabindex, rimangono nell'ordine delle schede. Per rimuovere un elemento e tutti i relativi elementi secondari dall'ordine delle schede, valuta la possibilità di utilizzare il polyfill inert di WICG. Il polyfill emula il comportamento di un attributo inert proposto, che impedisce che gli elementi vengano selezionati o letti dalle tecnologie per la disabilità.

Fai girare le cose!

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

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

Prendi nota dell'uso di steps(var(--count)) per ottenere l'effetto giusto ✨