【高频考点精讲】前端无障碍访问：如何让网站符合WCAG标准？

前端无障碍访问：如何让网站符合WCAG标准？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

今天咱们聊聊一个容易被忽视但极其重要的领域——无障碍访问（Accessibility）。作为前端工程师，我们写的代码不只是给视力正常、四肢健全的人看的，还要考虑到各种残障人士的使用体验。这就好比建房子不能只考虑腿脚利索的年轻人，还得给老人、孕妇和残障人士留好坡道和扶手。

WCAG是什么来头？

WCAG（Web Content Accessibility Guidelines）就像互联网世界的”无障碍设计规范”，由W3C制定。最新版本WCAG 2.1分为三个等级：A、AA、AAA，就像游戏里的难度设置。国内大多数项目要求达到AA级就够了，但有些政府项目会要求AAA级。

全栈老李在这里提醒：别把无障碍当成负担，它其实能帮你写出更健壮的代码。就像给视频加字幕，不仅帮助听障人士，在嘈杂环境或静音模式下也能帮到普通用户。

从四个原则入手

WCAG的核心可以用POUR来记：

可感知（Perceivable）：信息不能被”隐形”
可操作（Operable）：不能要求用户做不可能完成的任务
可理解（Understandable）：别让用户猜谜语
健壮（Robust）：现在和未来的技术都能兼容

实战代码示例

来看几个常见问题的解决方案：

<!-- 全栈老李的无障碍小课堂 -->
<!-- 糟糕的图片示例 -->
<img src="product.jpg" />

<!-- 正确的做法 -->
<img 
  src="product.jpg" 
  alt="黑色皮质办公椅，带可调节扶手" 
  width="300"
  height="200"
/>

<!-- 更复杂的场景 -->
<img
  src="chart.png"
  alt="2023年季度销售趋势图"
  longdesc="#chart-description"
/>
<div id="chart-description" class="visually-hidden">
  折线图显示Q1销售额120万，Q2增长至180万...
</div>

全栈老李提示：alt文本不是随便写的，要遵循：

装饰性图片：
信息性图片：描述内容
功能性图片：说明功能（比如按钮图标）

表单的无障碍优化

表单是残障用户的重灾区，特别是视障用户。来看看常见的坑：

<!-- 问题表单 -->
<input type="text" name="username" />
<button>提交</button>

<!-- 优化后版本 -->
<div class="form-group">
  <label for="username">用户名</label>
  <input 
    type="text" 
    id="username" 
    name="username"
    aria-describedby="username-help"
    required
  />
  <small id="username-help">请输入3-16位字母或数字</small>
</div>

<button type="submit" aria-label="提交注册表单">提交</button>

全栈老李的锦囊：使用Chrome的Lighthouse工具可以快速检测无障碍问题，就像给网站做”体检”。

色彩对比度那些事儿

色弱用户约占男性的8%，女性的0.5%。WCAG要求：

普通文本：对比度至少4.5:1
大号文本(18pt+/14pt+粗体)：3:1

可以用这个公式计算： contrast ratio = (L1 + 0.05) / (L2 + 0.05) 其中L是颜色的相对亮度

全栈老李推荐工具：WebAIM的颜色对比度检查器，或者VS Code插件”Color Contrast Checker”。

ARIA的正确打开方式

ARIA就像给HTML打辅助补丁，但记住：能用原生HTML就别用ARIA！

<!-- 滥用ARIA的反例 -->
<div 
  role="button"
  tabindex="0"
  onclick="submitForm()"
>
  提交
</div>

<!-- 正确的做法 -->
<button onclick="submitForm()">提交</button>

<!-- 真正需要ARIA的场景 -->
<button 
  aria-expanded="false"
  aria-controls="dropdown-menu"
  onclick="toggleMenu()"
>
  菜单
</button>
<ul id="dropdown-menu" hidden>
  <!-- 菜单项 -->
</ul>

全栈老李见过太多”ARIA滥用综合症”患者了。记住：ARIA是最后手段，不是首选方案！

焦点管理实战

键盘用户的体验往往被忽视。试试只用Tab键操作你的网站，可能会发现新大陆。

// 模态框的焦点陷阱
function trapFocus(modal) {
            
  const focusable = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  modal.addEventListener('keydown', (e) => {
            
    if (e.key !== 'Tab') return;
    
    if (e.shiftKey && document.activeElement === first) {
            
      last.focus();
      e.preventDefault();
    } else if (!e.shiftKey && document.activeElement === last) {
            
      first.focus();
      e.preventDefault();
    }
  });
  
  first.focus();
}
// 全栈老李提示：别忘了在关闭模态框时恢复焦点到触发元素

移动端的特殊考量

移动端的无障碍经常被忽视，但要注意：

触控目标至少44×44px
避免纯手势操作（要提供替代方案）
禁用缩放可能违反WCAG

/* 糟糕的做法 */
.button {
            
  width: 30px;
  height: 30px;
}

/* 符合无障碍的做法 */
.button {
            
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
}