别让键盘用户迷路：做好焦点样式

把鼠标放到一边，用 Tab 访问自己的页面。你能看出当前选中了哪里吗？每一个按钮都能按下吗？这个小测试往往比一份复杂清单更快发现问题。

保留看得见的焦点

不要全局移除 outline。如果浏览器默认样式不符合设计，可以为 :focus-visible 提供清晰的替代样式。

:focus-visible {
  outline: 3px solid #3452da;
  outline-offset: 4px;
}

焦点颜色要与周围背景有足够对比度。深色主题可能需要更亮的颜色；也要检查父元素的 overflow: hidden 是否裁掉了轮廓。

先选对 HTML 元素

执行一个动作，用 button；导航到另一个地址，用带 href 的 a。原生元素已经具备键盘操作和语义，不必从 div 开始重新实现。

<button type="button" aria-label="打开文章搜索">
  搜索
</button>
<a href="/archive/">浏览文章归档</a>

不要为了改变视觉排序而随意使用正数 tabindex。优先让 DOM 顺序与阅读顺序一致。

给重复内容一条捷径

在页面开头添加“跳至主要内容”链接，键盘用户就可以跳过每页重复的导航。

<a class="skip-link" href="#main">跳至主要内容</a>
<header><!-- 导航 --></header>
<main id="main"><!-- 正文 --></main>

这条链接可以平时隐藏，在获得焦点时显示。不要用 display: none 隐藏，否则它无法被键盘访问。

弹窗也是一段完整旅程

搜索弹窗打开时，焦点应该进入弹窗；关闭后，应回到打开它的控件。原生 dialog 配合 showModal() 能处理许多基础行为，但仍需测试关闭按钮、Escape 键和焦点返回。

无障碍不是最后的一层装饰。它决定了一个控件究竟是否能够被使用。