CodePen

bookmark_border Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Inserire un elemento nell'ordine delle schede

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

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

Per mettere in primo piano 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>

In questo modo, l'elemento viene rimosso dall'ordine naturale delle schede, ma può comunque essere attivato chiamando il relativo metodo focus().

Tieni presente che l'applicazione di tabindex="-1" a un elemento non influisce sui relativi elementi secondari. Se sono nell'ordine di tabulazione in modo naturale o a causa di un valore tabindex, rimarranno nell'ordine di tabulazione. Per rimuovere un elemento e tutti i suoi elementi secondari dall'ordine delle schede, ti consigliamo di utilizzare il polyfill inert del WICG. Il polyfill emula il comportamento di un attributo inert proposto, che impedisce la selezione o la lettura degli elementi da parte delle tecnologie per la disabilità.

Inizia a lavorare.

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

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

Tieni presente l'uso di steps(var(--count)) per ottenere l'effetto giusto ✨