0Pricing
Web Accessibility Academy · 课时

tabindex 0、-1,以及永不使用正值

控制哪些元素可获得焦点,哪些只能由脚本操作。

tabindex 0、-1,以及永不使用正值 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 1 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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,以及永不使用正值」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Web Accessibility Academy 课程的其余内容,请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。

「tabindex 0、-1,以及永不使用正值」这节课中我会学到什么?

控制哪些元素可获得焦点,哪些只能由脚本操作。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Accessibility Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 1 节课,共 4 节。

「tabindex 0、-1,以及永不使用正值」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Web Accessibility Academy 课中编写并运行代码吗?

能。每节 Web Accessibility Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. tabindex 0、-1,以及永不使用正值
  2. 操作后移动焦点
  3. 图层关闭时恢复焦点
  4. 管理组件中的 roving tabindex
← 返回 Web Accessibility Academy