ACCESSIBILITY
漫游焦点Roving Tabindex
一组按钮里只有「当前项」的 tabindex 是 0，其余是 -1；方向键在组内移动焦点，Tab 一次直接跳出整组。
效果预览
◧◫◈✳⬡
方向键切换 ← →，Tab 直接跳出
适合用在哪
标签页（Tabs）、工具栏、单选按钮组、菜单、日期选择器等复合控件。
容易踩的坑
- 方向键移动焦点时没有同步 tabindex，Tab 离开再回来焦点落在错误的项上。
- 组内禁用项仍可被方向键聚焦却没有 aria-disabled，读屏用户以为能操作。
- 在普通链接列表上滥用漫游焦点，用户习惯的 Tab 逐项浏览被打破。
设计提示词 · Prompt
漫游焦点（Roving Tabindex）：容器 role="tablist" / "toolbar" / "radiogroup"。组内每个项目都有 tabindex，但只有当前选中/聚焦的那项是 0，其余为 -1 —— 这样 Tab 键只会进入整组一次而不是逐项停留。方向键（←/→ 或 ↑/↓）在组内移动，移动时把当前项的 tabindex 设为 0、上一项设为 -1，并调用 .focus()。Home/End 跳到首尾。容器加 aria-orientation。好处是键盘用户不会被 8 个标签页卡住 8 次 Tab。WAI-ARIA APG 的 Tabs / Toolbar 模式都是这个做法。
Roving Tabindex: the container has role="tablist" / "toolbar" / "radiogroup". Every item in the group has a tabindex, but only the currently selected/focused one is 0 and the rest are -1 — so Tab enters the group only once instead of stopping at each item. Arrow keys (←/→ or ↑/↓) move within the group: when moving, set the current item's tabindex to 0, set the previous one to -1, and call .focus(). Home/End jump to the first/last item. Add aria-orientation to the container. The benefit is that keyboard users won't get stuck pressing Tab 8 times through 8 tabs. The WAI-ARIA APG Tabs / Toolbar patterns both use this approach.
常见搭配
同一页面里经常和「漫游焦点」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-col" style="align-items:center;gap:3px"> <div class="a11y-roving"><i>◧</i><i class="is-on">◫</i><i>◈</i><i>✳</i><i>⬡</i></div> <span class="a11y-roving__hint">方向键切换 <kbd>←</kbd> <kbd>→</kbd>，Tab 直接跳出</span> </div>