link

使用场景

几乎从不——请使用 <a href="...">。原生锚点为你提供焦点管理、按 Enter 键盘激活、已访问状态、右键”在新标签页中打开”、拖拽到书签栏，以及用户可分享的真实 URL。在 <div> 上使用 role="link" 会丢失上述所有特性。

唯一合理的使用场景：

• 第三方设计系统提供了无法替换的非锚点”链接”组件。
• 在重构上线前，临时修复无障碍性缺失的 <div onclick> 元素。

若确实使用 role="link"，还必须：

• 通过 tabindex="0" 使元素可聚焦。
• 为 keydown 事件绑定 Enter 键处理（链接不会在按下 Space 键时激活——Space 是按钮的行为）。
• 为用户提供在悬停/聚焦时查看目标 URL 的真实方式，因为元素上没有 href。

常见错误

• <a> 没有 href。缺少 href 的元素不在 Tab 顺序中，屏幕阅读器也不会将其播报为链接。
• 将 <a href="#" onclick="..."> 当作按钮使用。应使用 <button>——链接用于导航，按钮用于操作。
• role="link" 在按下 Space 键时激活。Space 会滚动页面；链接只应在按下 Enter 键时激活。
• 链接文本为”点击此处”或”阅读更多”。屏幕阅读器用户在链接列表中只能看到链接文本——请使其具有描述性。
• 导航中代表当前页面的链接缺少 aria-current="page"。

示例

<!-- 推荐方式 -->
<a href="/toolkit/standards/wcag/">WCAG 2.2 参考</a>

<!-- 仅在无法使用 <a href> 时 -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  工具包
</span>