网页可访问性：五件今天就能做的事

为什么要做

有些用户靠键盘操作，有些用读屏软件听网页，有些人视力不太好，还有人只是在强光下看手机。可访问性做得好，这些人都能顺畅地使用网站，搜索引擎也更容易理解页面。下面五件事投入不大，效果却很明显。

1. 用正确的标签

原生标签自带键盘操作和语义，自己用 div 模拟就要全部重新实现一遍：

<!-- 不能用 Tab 聚焦，按回车没有反应，读屏软件也不知道它是按钮 -->
<div class="btn" onclick="save()">保存</div>

<!-- 这些能力全都自带 -->
<button type="button" class="btn">保存</button>

页面结构同样要用语义化标签：header、nav、main、footer，标题按 h1、h2、h3 的层级使用。读屏软件的用户经常靠标题和地标在页面中跳转。

能跳转到新地址的用 a，在当前页面执行操作的用 button。这条简单的规则可以避免很多问题。

2. 让键盘能走完所有流程

试试放下鼠标，只用 Tab、回车和方向键操作你的页面。常见问题有：

• 焦点样式被 outline: none 去掉了，用户不知道当前在哪。
• 弹窗打开后焦点还留在后面的页面上，关闭后也没有回到原来的按钮。
• 只有鼠标悬停才能看到的菜单，键盘用户打不开。

不喜欢点击时出现的焦点框，不要直接去掉，改用 :focus-visible。它只在键盘操作时显示：

button:focus-visible {
  outline: 2px solid #2442d6;
  outline-offset: 2px;
}

3. 图片要有合适的替代文本

alt 要传达图片的作用，而不是描述它的外观：

<!-- 传达信息的图片：说明它想表达什么 -->
<img src="chart.png" alt="2026 年访问量逐月上升，10 月达到峰值">

<!-- 带链接的图标：说明点击后去哪 -->
<a href="/"><img src="logo.svg" alt="返回首页"></a>

<!-- 纯装饰的图片：alt 留空，读屏软件会跳过 -->
<img src="divider.svg" alt="">

注意最后一种写法要写 alt=""，而不是省略 alt。省略的话，读屏软件可能会读出文件名。

4. 表单控件要关联标签

只有占位符是不够的：输入内容后占位符就消失了，读屏软件也不一定会把它当作标签读出来。

<label for="email">邮箱</label>
<input id="email" type="email" autocomplete="email" aria-describedby="email-tip">
<p id="email-tip">我们只用它发送订单通知。</p>

关联 label 之后还有一个额外的好处：点击文字也能聚焦输入框，手机上的点击区域一下子变大了。

5. 保证足够的对比度

浅灰色小字在设计稿上很精致，换到实际的屏幕上可能就看不清了。WCAG AA 级的要求是：

可以在这里试试你的配色：

同时，不要只靠颜色传达信息。比如只把错误的输入框标红，色觉障碍的用户可能发现不了，要配上文字说明或者图标。

ARIA：能不用就不用

ARIA 属性可以补充语义，但使用它的第一原则就是：能用原生标签解决，就不要用 ARIA。 错误的 ARIA 比没有 ARIA 更糟糕。确实需要时，下面这些是最常用的：

<!-- 只有图标的按钮，需要说明用途 -->
<button type="button" aria-label="关闭"><svg aria-hidden="true">…</svg></button>

<!-- 动态更新的内容，让读屏软件读出来 -->
<p role="status">已保存</p>

尊重减少动画的设置

有些用户会因为大幅度的动画感到不适，系统里可以设置减少动画。CSS 中可以这样响应：

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

怎样检查

• 只用键盘把主要流程走一遍。
• 把页面放大到 200%，看看内容是否还能正常使用。
• 运行 DevTools 里的 Lighthouse，或者安装 axe 扩展做自动检查。自动工具只能发现一部分问题，手动测试不可替代。
• 打开读屏软件（macOS 的 VoiceOver、Windows 的 NVDA）听一遍页面。

延伸阅读

• Learn Accessibility（web.dev）
• WCAG 快速参考（W3C）