CodePen

Inserir um elemento na ordem da tabulação

Insira um elemento na ordem natural de tabulação usando tabindex="0". Exemplo:

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

Para focar um elemento, pressione a tecla Tab ou chame o método focus().

Remover um elemento da ordem de tabulação

Remova um elemento usando tabindex="-1". Exemplo:

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

Isso remove um elemento da ordem natural da tabulação, mas o elemento ainda pode ser focado chamando o método focus() dele.

A aplicação de tabindex="-1" a um elemento não afeta os filhos dele. Se eles estiverem na ordem de tabulação naturalmente ou devido a um valor tabindex, eles permanecerão na ordem da tabulação. Para remover um elemento e todos os filhos da ordem da tabulação, use o polyfill inert do WICG. O polyfill emula o comportamento de um atributo inert proposto, o que impede que elementos sejam selecionados ou lidos por tecnologias adaptativas.

Faça as coisas acontecerem!

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

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

Observe o uso de steps(var(--count)) para criar o efeito certo ✨