1. 知记首页
  2. 编程

Web可访问性实战指南：跟着WCAG标准做对每一步

• 编程 • 阅读 6

你有没有遇到过这种情况？想点一个按钮，手指抖了半天都点不到？或者看一篇文章，背景太浅文字太淡，眼睛都要眯成一条缝？再或者，想给视障朋友分享一篇好文，结果他用屏幕阅读器读的时候，全是“图片1”“链接2”的无效信息？这些其实都是Web可访问性没做好的问题——而解决它的核心，就是跟着WCAG标准（Web Content Accessibility Guidelines，网页内容可访问性指南）走。

Web可访问性实战指南：跟着WCAG标准做对每一步

先搞懂：Web可访问性到底是帮谁？

很多人以为“可访问性=视障用户专属”，这其实是最大的误解。WCAG标准覆盖的是所有有“访问障碍”的人，比如：
– 视障用户：用屏幕阅读器（如NVDA、VoiceOver）“听”网页内容；
– 听障用户：需要视频加字幕、音频加文字 transcript；
– 运动障碍用户：手抖或无法用鼠标，只能用键盘导航；
– 认知障碍用户：需要简洁的语言、清晰的导航，避免复杂动画；
– 临时障碍用户：比如阳光太强看不清屏幕的户外用户，或者手机没电只能用电脑键盘的人。

举个真实例子：我之前帮一家教育机构优化官网，他们的“报名按钮”只有20x20px，结果很多中老年人反馈“点不动”——后来把按钮放大到48x48px（WCAG推荐的最小可点击区域），报名转化率直接涨了15%。你看，可访问性不是“额外工作”，是真的能帮你留住更多用户。

WCAG标准的4个核心原则，用“人话”翻译给你听

WCAG 2.1（当前最常用的版本）的核心是4个P原则，不用记术语，我用“能感知、能操作、能理解、能兼容”帮你总结：

原则 通俗解释 关键要求示例
Perceivable（可感知） 内容得“被用户接收到” 图片要有准确的alt文本，视频加字幕
Operable（可操作） 交互得“能被用户触发” 按钮能被键盘Tab键选中，点击区域足够大
Understandable（可理解） 内容得“让用户看得懂” 导航一致，语言简洁，避免歧义
Robust（鲁棒性） 内容得“兼容辅助工具” 用标准HTML标签（如

这4个原则是所有优化的基础——比如“可感知”里的替代文本（alt），不是随便写“图片”就行，要“说清楚图片的核心信息”：
❌ 错误示例：<img src="course.jpg" alt="课程图">（屏幕阅读器读“课程图”，用户不知道是什么课程）
✅ 正确示例：<img src="course.jpg" alt="2025年Python入门课程封面，背景是蓝色代码页，标题用白色字体">（视障用户能准确理解图片内容）

实战：按WCAG做优化的3个关键层，附代码示例

接下来是最干的“实战步骤”——从内容层→交互层→视觉层，每一步都给你“能直接抄的方案”。

1. 内容层：让“信息”能被“听”懂、“看”懂

内容是网页的核心， WCAG对内容的要求是“清晰、准确、可替代”：
– 标题层级要“有逻辑”：用H1-H6按顺序嵌套，不要跳级（比如H1之后直接用H3）。比如一篇文章的结构应该是：
<h1>2025年Web可访问性指南</h1> → <h2>为什么要做可访问性？</h2> → <h3>视障用户的需求</h3>
这样屏幕阅读器能快速“定位内容结构”，就像书的目录一样。
– 表格要“会说话”：加caption标签说明表格用途，用scope属性标记表头（避免屏幕阅读器读错行列关系）：

<table caption="2025年Q2课程销量Top3">
  <thead>
    <tr>
      <th scope="col">课程名称</th>
      <th scope="col">销量</th>
      <th scope="col">满意度</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Python入门</td>
      <td>1200</td>
      <td>9.2/10</td>
    </tr>
  </tbody>
</table>

– 视频/音频要“有备份”：视频加同步字幕（不是“自动生成的渣字幕”），音频加文字转录（transcript）——比如B站的“字幕开关”，就是最基础的“可感知”优化。

2. 交互层：让“操作”能被“所有人触发”

交互是可访问性的“重灾区”，很多网站用

做按钮、用JS禁用键盘导航，结果把用户挡在门外。按WCAG要求，交互元素要满足3点：

（1）所有元素都能“用键盘控制”

比如：
– 用Tab键能遍历所有可交互元素（按钮、链接、输入框）；
– 用Enter键触发按钮/链接，用Space键选中复选框；
– 不要用tabindex="-1"禁用默认焦点（除非你有100%的理由）。

关键代码：确保:focus样式“看得见”——很多网站为了“美观”把:focus outline去掉，这会让键盘用户找不到焦点位置：

/* 正确的:focus样式：高对比度、不遮挡内容 */
a:focus, button:focus, input:focus {
  outline: 2px solid #2563eb; /* 蓝色轮廓，WCAG推荐的高对比度色 */
  outline-offset: 2px; /* 轮廓和元素保持距离，避免遮挡 */
  background-color: #f3f4f6; /* 可选：增加背景色强化提示 */
}
（2）可点击区域“足够大”

WCAG 2.1推荐最小48x48px的可点击区域——不是“按钮本身的大小”，是“用户能点到的范围”。比如你用做链接，要加padding扩大点击区域：

/* 按钮的正确样式：最小48x48px，间距合适 */
.btn {
  display: inline-block;
  padding: 12px 24px; /* 上下左右 padding，扩大点击区域 */
  min-width: 48px;
  min-height: 48px;
  font-size: 16px; /* 字体至少16px，避免太小看不清 */
}

3. 视觉层：让“内容”能“被看清楚”

视觉层的核心是对比度和可读性：
– 文本对比度：WCAG 2.1 AA级要求“普通文本（小于18pt）的对比度≥4.5:1”，“大文本（≥18pt或加粗≥14pt）≥3:1”。
用WebAIM Contrast Checker（免费工具）就能快速检查——比如黑色文字（#000）配白色背景（#fff）的对比度是21:1，完全符合要求；但浅灰色（#ccc）配白色背景只有1.4:1，视障用户根本看不清。
– 避免“干扰性动画”：自动播放的视频/动画要能“一键暂停”（比如B站的“暂停按钮”），避免闪烁频率超过3次/秒（会引发癫痫）。
– 响应式设计：网页要能适应不同屏幕大小，避免横向滚动——比如用max-width: 100%;让图片自适应，用媒体查询调整字体大小：

/* 小屏幕下放大字体，方便手机用户阅读 */
@media (max-width: 768px) {
  body {
    font-size: 18px;
  }
}

检查：怎么确认“符合WCAG标准”？

光做优化还不够，得“验证”——这3类工具一定要用：

  1. 自动检查工具：快速扫“低级错误”
  2. axe（Chrome扩展）：直接在DevTools里运行，能找出“缺失alt文本”“按钮没有语义标签”等问题；

  3. Lighthouse（Chrome内置）：在“Accessibility”tab下生成报告，还能给优化建议。

  4. 手动测试：模拟真实用户场景

  5. 用键盘导航：关掉鼠标，只用Tab和Enter键逛网站，看能不能完成核心操作（比如报名、购物）；
  6. 用屏幕阅读器：Windows装NVDA（免费）、Mac用VoiceOver（系统自带），听一听你的网页“读起来顺不顺”；

  7. 用高对比度模式：打开Windows的“高对比度主题”，看内容会不会被遮挡。

  8. 用户测试：找真实用户反馈
    比如联系本地的视障协会，邀请他们试用你的网站——我之前帮一家电商优化时，视障用户反馈“购物车图标没有alt文本”，后来改成“当前购物车有3件商品，总金额299元”，用户说“像有了眼睛一样”。

最后：避开3个最常见的坑

  1. “替代文本越长越好”：错！alt文本要“简洁准确”，比如图片是“红色运动鞋”，就写“红色网面运动鞋，鞋底有防滑纹路”，不用加“这是我们店的爆款”这种冗余信息。
  2. “可访问性只针对残障用户”：错！比如你加班到凌晨，眼睛酸得睁不开，这时“高对比度模式”就是帮你的；再比如你手里拿着奶茶，只能用一根手指划手机，“大按钮”就是帮你的。
  3. “自动检查工具能解决所有问题”：错！自动工具只能查“技术错误”，比如“缺失alt文本”，但查不出“alt文本写得不准确”“导航逻辑混乱”——这些得靠人测。

写在最后：可访问性不是“负担”，是“责任”

很多人觉得“可访问性是额外成本”，但实际上，做好可访问性能帮你：
– 覆盖更多用户（全球有13亿残障人士，占总人口17%）；
– 提升SEO（Google会优先收录符合WCAG标准的网站）；
– 规避法律风险（欧美很多国家要求网站必须符合可访问性标准，比如美国的ADA法案）。

我见过最感动的案例：一个视障用户给某书店写邮件，说“你们的网站能让我自己选书、下单，这是我第一次感受到‘独立购物’的快乐”——这就是Web可访问性的意义：让每一个人都能平等地使用互联网。

现在就打开你的网站，用axe工具扫一遍，改一个alt文本，放大一个按钮——你做的每一步，都在让互联网更“温暖”一点。

原创文章，作者：，如若转载，请注明出处：https://zube.cn/archives/308

赞 (0)
0