前端无障碍入门：语义化HTML与键盘导航

无障碍常被当成”最后再补的合规项”，但对静态站点来说，成本最低的做法其实是一开始就把HTML写对。下面几条不需要任何依赖。

用对标签，比加ARIA更重要

原生元素自带键盘行为、角色和状态，自定义div再加一堆aria-*往往既啰嗦又容易漏。

需求	该用的
可点击跳转	<a href>
触发动作	<button type="button">
页面主内容	<main>
独立内容单元	<article>
导航区域	<nav aria-label="主导航">

一个很实用的自检：把CSS全部禁用，页面是否仍然读得通、点得动。如果顺序混乱或者链接消失，说明结构依赖了样式。

跳转到主内容

键盘用户每翻一页都要跳过整段导航，很折磨。加一个默认隐藏、聚焦时才出现的跳转链接，几行就够：

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
}

对应HTML放在body最前面，指向<main id="main">。

焦点必须可见

很多人为了”干净”会写outline: none，这直接让键盘用户失去位置感。正确做法是保留焦点，只把样式做得和主题一致：

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:focus-visible只在键盘操作时出现，鼠标点击不会有多余的框，视觉和无障碍可以同时满足。

状态变化要能被读出来

搜索结果数、评论提交成功或失败这类动态内容，放在aria-live="polite"容器里，屏幕阅读器才会主动播报。表单错误则应该用aria-describedby把提示和输入框关联起来，而不是只在旁边放一段红字。

<label for="q">关键词</label>
<input id="q" name="q" aria-describedby="q-hint">
<p id="q-hint">支持多个关键词，空格分隔</p>
<p role="status" aria-live="polite">找到3篇文章</p>

别和用户的系统偏好对着干

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

深色模式、减少动画、字号偏好都是系统级设置，站点应该跟随而不是覆盖。手动主题切换要记住用户选择，但不能忽略首次访问时的系统值。

这些做下来，页面对所有人都会更好用——包括只想知道”这个按钮能不能点”的普通用户。