tabindex
Управляет тем, можно ли перейти к элементу клавишей Tab.
Синтаксис
<div tabindex="0">…</div>Параметры
| Параметр | Тип | Описание |
|---|---|---|
| tabindex | 0 | -1 | `0` — элемент попадает в обход клавишей Tab; `-1` — фокус только из скрипта. |
Примеры
Нажимайте Tab: блок с tabindex="0" тоже получает фокус:
<style>
:focus { outline: 3px solid orange; }
</style>
<button>Button</button>
<div tabindex="0">Scrollable panel</div>
<div>Plain div (skipped)</div>
<a href="#">Link</a>Примечания
Ссылки, кнопки и поля фокусируются сами — tabindex им не нужен. Положительные значения (1, 2…) меняют порядок обхода и почти всегда запутывают пользователей: лучше поправить порядок элементов в разметке.
См. также
Вопросы и ответы по теме
В учебнике
- Доступность — Как сделать страницу удобной для всех — работа с клавиатуры, фокус, подписи и alt, aria-label, контраст и смысловые теги.