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 ✨