前端可访问性（Accessibility）工程实践：从合规到体验

先说结论：可访问性不是”附加功能”，是”基础功能”

很多团队把可访问性当作”上线前的合规检查”——用工具扫一遍，把报错修掉就完事了。但真正的可访问性不是”没有报错”，而是”让所有用户都能顺畅地使用你的产品”。

---

1. 语义 HTML

为什么语义 HTML 重要

屏幕阅读器（如 NVDA、VoiceOver、TalkBack）通过 HTML 标签的语义来判断页面结构。用了正确的语义标签，屏幕阅读器才能正确地朗读页面内容。

常用语义标签

<!-- 不对 -->
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>

<!-- 正确 -->
<nav>...</nav>
<main>...</main>
<footer>...</footer>

其他重要的语义标签：<article>、<aside>、<section>、<header>、<button>（不要用 <div> 模拟按钮）。

---

2. ARIA 标签

什么时候用

只有原生 HTML 元素无法表达语义时才用 ARIA。比如：

<!-- 自定义复选框：原生 checkbox 不够用 -->
<div role="checkbox" aria-checked="false" tabindex="0"
     @click="toggle" @keydown.enter="toggle">
  同意条款
</div>

原则

• 不要滥用 ARIA——优先使用原生 HTML 元素
• 不要在原生元素上重复 ARIA 语义（<button> 不需要 role="button"）
• 使用前检查：有没有原生 HTML 元素可以替代？

---

3. 键盘导航

焦点管理

// 弹窗打开时，将焦点移到弹窗内
function openModal(modal) {
  modal.style.display = 'block';
  modal.querySelector('.close-button').focus();
}

// 弹窗关闭时，将焦点移回触发按钮
function closeModal(triggerButton) {
  modal.style.display = 'none';
  triggerButton.focus();
}

Tab 顺序

<!-- 使用 tabindex 控制焦点顺序，但不要用正数（会破坏自然顺序） -->
<!-- tabindex="-1"：元素可以通过 JS 聚焦，但不能通过 Tab 键聚焦 -->
<!-- tabindex="0"：元素按文档顺序聚焦 -->

---

4. 颜色对比度

检查工具

• WebAIM Contrast Checker
• Chrome DevTools 的 Accessibility 面板
• axe DevTools 浏览器扩展

本站实践

本站的配色方案经过对比度测试，所有文本都满足 WCAG 2.1 AA 标准（普通文本 ≥ 4.5:1，大文本 ≥ 3:1）。

---

5. 屏幕阅读器支持

<!-- 提供图片的替代文本 -->
<img src="logo.webp" alt="AI Enable Harness 官网 Logo" />

<!-- 用 aria-label 提供额外描述 -->
<button aria-label="关闭弹窗">×</button>

<!-- 用 aria-live 区域播报动态内容 -->
<div aria-live="polite">
  加载完成，共 10 条结果
</div>

---

总结

维度	核心原则	常见错误
语义 HTML	使用正确的标签表达结构	全部用 div
ARIA	原生元素不够用时才用	滥用 ARIA
键盘导航	所有功能都能用键盘操作	只支持鼠标
颜色对比度	文本 ≥ 4.5:1	设计稿好看但看不清
屏幕阅读器	提供替代文本和描述	图片没有 alt 属性

可访问性做得好不好，不看”工具检查零报错”，而看”视障用户能不能顺畅地完成核心操作”。 一个可访问性好的产品，对所有用户都更好——更好的语义 HTML 也意味着更好的 SEO 和 GEO。

需要前端可访问性优化或前端开发服务？联系我们，说清你的产品类型与用户群体，24 小时内回可行性。