键盘、焦点与语义

先理解这个概念

焦点指示用户当前操作位置，顺序应符合内容逻辑。按钮、链接和输入元素提供默认键盘行为。复杂模式如对话框、标签页和菜单需要遵循对应的交互约定，而不是给每个 div 加 tabindex。

焦点是键盘操作的当前位置，阅读顺序则通常来自文档结构。视觉上移动元素并不会自动改变逻辑顺序。动态界面还需要决定操作后焦点留在哪里：删除当前项、关闭弹窗和切换路由都可能让原焦点失效。应按用户接下来的任务选择合理位置。

记住这三个原则

1. 01

   Tab 顺序跟随 DOM 的逻辑顺序。

2. 02

   不要移除焦点轮廓而没有可见替代。

3. 03

   动态视图切换与模态关闭时合理恢复焦点。

实际设计时，分三步做

1. STEP 01

   从页面开头只用键盘走一次，检查顺序、可见焦点和是否能绕过重复导航，不使用正数 tabindex 修补结构。

2. STEP 02

   为复合控件查对应交互模式，区分 Tab 在区域间移动与方向键在区域内移动，避免给每个内部元素都制造停靠点。

3. STEP 03

   定义打开、关闭和删除后的焦点目标；若触发元素已不存在，选择合理的后续操作而不是机械回到页面顶部。

一个容易理解的例子

位置连续性同样适用于键盘用户。

:focus-visible {
  outline: 3px solid #366cbd;
  outline-offset: 4px;
}

适用边界与取舍

主动聚焦能帮助继续任务，也可能突然打断阅读。普通后台数据更新不应随意抢焦点；只在用户动作与上下文变化确实需要时移动。