0Pricing
Web Accessibility Academy · Урок

tabindex 0, -1 и никогда не положительный

Управляйте тем, какие элементы доступны для фокусировки, а какие — только для управления скриптами.

«tabindex 0, -1 и никогда не положительный» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

What tabindex Controls

The tabindex attribute decides whether an element can receive keyboard focus and how it fits into the Tab order. It is your dial for focusability.

Most Things Are Already Focusable

Links, buttons, and inputs are focusable by default, so you rarely touch tabindex on them. Reach for it only when the native element cannot do the job.

tabindex 0 Joins the Order

Setting tabindex="0" puts a normally non-focusable element into the natural Tab order, right where it sits in the DOM.

<div role="button" tabindex="0">Custom action</div>

When to Use 0

Use tabindex="0" on a custom widget you built from a div or span that must be reachable by keyboard, like a scripted toggle.

tabindex -1 Means Scriptable Only

With tabindex="-1", an element is skipped by the Tab key but can still be focused from JavaScript using element.focus().

<div id="panel" tabindex="-1">Result area</div>

Why -1 Is So Useful

You use tabindex="-1" to move focus to a region after an action, like a results panel, without adding it to every Tab press. 🎯

Never Use Positive Values

A positive tabindex like 3 jumps that element ahead of everything, scrambling the order and trapping you in a maze. Avoid it.

<input tabindex="3">

Positive Values Break the Flow

Any element with a positive value is visited before all the tabindex="0" and default elements, so the focus order stops matching the visual order.

Let the DOM Set the Order

The cleanest Tab order comes from DOM order itself. Arrange your markup logically and most focus problems disappear on their own.

Do Not Make Everything Focusable

Adding tabindex="0" to plain text or whole containers creates noise, forcing keyboard users to Tab through stops that do nothing.

A Simple Rule of Thumb

Use 0 to add a custom control to the order, -1 to focus by script only, and never a positive number. That covers almost everything.

Quick Check

Which tabindex value makes an element focusable by script but skips it in the Tab order?

Recap

You now own the tabindex dial: 0 adds custom controls to the order, -1 enables scripted focus, and positive values are off-limits. 👍

Часто задаваемые вопросы

Урок «tabindex 0, -1 и никогда не положительный» бесплатный?

Да — полный текст урока «tabindex 0, -1 и никогда не положительный» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.

Чему я научусь в уроке «tabindex 0, -1 и никогда не положительный»?

Управляйте тем, какие элементы доступны для фокусировки, а какие — только для управления скриптами. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Web Accessibility Academy?

Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «tabindex 0, -1 и никогда не положительный»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Web Accessibility Academy?

Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. tabindex 0, -1 и никогда не положительный
  2. Перемещение фокуса после действия
  3. Возврат фокуса после закрытия слоя
  4. Управление перемещаемым tabindex в виджетах
← Назад к Web Accessibility Academy