CodePen

Inserir um elemento na ordem de guias

Insira um elemento na ordem natural das guias 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() do elemento.

Remover um elemento da ordem das guias

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 de guias, mas o elemento ainda pode ser centralizado 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 guias naturalmente ou devido a um valor tabindex, eles vão permanecer na ordem de guias. Para remover um elemento e todos os filhos dele da ordem de guias, use o polyfill inert do WICG. O polyfill emula o comportamento de um atributo inert proposto, o que impede que os elementos sejam selecionados ou lidos por tecnologias adaptativas.

Vamos começar!

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

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

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