Вставка элемента в порядок табуляции
Вставьте элемент в естественный порядок табуляции, используя tabindex="0"
. Например:
<div tabindex="0">Focus me with the TAB key</div>
Чтобы сфокусировать элемент, нажмите клавишу Tab
или вызовите метод focus()
элемента.
Удаление элемента из порядка табуляции
Удалите элемент, используя tabindex="-1"
. Например:
<button tabindex="-1">Can't reach me with the TAB key!</button>
Это удаляет элемент из естественного порядка табуляции, но элемент все равно можно сфокусировать, вызвав его метод focus()
.
Обратите внимание, что применение tabindex="-1"
к элементу не влияет на его дочерние элементы; если они находятся в порядке табуляции естественным образом или из-за значения tabindex
, они останутся в порядке табуляции. Чтобы удалить элемент и все его дочерние элементы из порядка табуляции, рассмотрите возможность использования inert
полифила WICG . Полифилл имитирует поведение предлагаемого inert
атрибута, который предотвращает выбор или чтение элементов с помощью вспомогательных технологий.
Заставьте вещи вращаться!
.loader {
animation: spin 0.75s infinite steps(var(--count));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
Обратите внимание на использование steps(var(--count))
для получения правильного эффекта ✨