第一章：为什么无障碍至关重要？
1.1 用户规模与法律风险
- 全球残障人士：超13 亿人（WHO），占人口 16%
- 中国视障用户：超1700 万，听障用户2700 万
- 法律合规：
- 欧盟 EN 301 549
- 美国 ADA / Section 508
- 中国《无障碍环境建设法》（2023 实施）
案例：Domino’s Pizza 因网站不支持屏幕阅读器被起诉并败诉。
1.2 无障碍 = 更好的用户体验
- 键盘用户：开发者、游戏玩家、临时手部受伤者
- 高对比度模式：强光下户外用户受益
- 字幕/文字替代：嘈杂环境中的视频观看者
无障碍优化往往带来 SEO、移动端体验、性能的同步提升。
第二章：WCAG 2.2 核心原则（POUR）
| 原则 | 含义 | 关键成功标准（AA 级） |
|---|---|---|
| P - 可感知 | 信息可被用户感官识别 | 1.4.3 对比度 ≥ 4.5:1 1.2.2 预录音视频需字幕 |
| O - 可操作 | 组件可被交互 | 2.1.1 所有功能支持键盘 2.4.7 可见焦点指示 |
| U - 可理解 | 内容清晰可读 | 3.1.1 页面语言声明 3.2.4 一致标识 |
| R - 健壮性 | 兼容辅助技术 | 4.1.2 名称、角色、值可编程确定 |
本篇重点落地 AA 级中最常被忽视的 10 项标准。
第三章：语义化 HTML 与 ARIA
3.1 优先使用原生语义元素
错误做法（仅用<div>）：
<!-- bad --> <div @click="submit">提交</div>正确做法（使用<button>）：
<!-- good --> <button @click="submit">提交</button>原生元素自动具备：
- 键盘可聚焦（Tab 键）
- 屏幕阅读器识别为“按钮”
- 默认焦点样式
3.2 ARIA 的正确使用场景
ARIA（Accessible Rich Internet Applications）用于增强语义，而非替代 HTML。
场景 1：动态区域通知
<template> <!-- 操作结果实时通知屏幕阅读器 --> <div aria-live="polite" class="sr-only"> {{ message }} </div> <button @click="deleteItem">删除</button> </template> <script setup> const message = ref('') const deleteItem = async () => { await api.delete() message.value = '项目已删除' // 屏幕阅读器自动朗读 } </script>场景 2：自定义组件角色
<!-- 自定义开关组件 --> <template> <div role="switch" :aria-checked="isChecked" @click="toggle" tabindex="0" > {{ isChecked ? '开' : '关' }} </div> </template>ARIA 黄金法则：
- Don’t use ARIA unless you must
- Test with real assistive tech
第四章：键盘导航全覆盖
4.1 焦点管理三原则
- 可聚焦：所有交互元素可通过 Tab 访问
- 可见焦点：
:focus-visible样式清晰 - 逻辑顺序：DOM 顺序 = 视觉顺序
修复焦点丢失（Vue 动态内容）
<template> <div ref="modalRef" role="dialog" aria-modal="true"> <button @click="close">关闭</button> </div> </template> <script setup> const modalRef = ref<HTMLElement | null>(null) onMounted(() => { // 模态框打开时，自动聚焦第一个可交互元素 modalRef.value?.querySelector('button')?.focus() // 禁止背景滚动（避免焦点逃逸） document.body.style.overflow = 'hidden' }) onUnmounted(() => { document.body.style.overflow = '' }) </script>4.2 跳转链接（Skip Link）
在页面顶部添加“跳至主内容”链接：
<!-- base.html (Flask Jinja2) --> <body> <a href="#main-content" class="skip-link">跳至主内容</a> <header>...</header> <main id="main-content">...</main> </body>/* 默认隐藏，聚焦时显示 */ .skip-link { position: absolute; top: -40px; left: 6px; background: #000; color: #fff; padding: 8px; z-index: 1000; } .skip-link:focus { top: 6px; }第五章：表单无障碍
5.1 标签与字段显式关联
错误：
<!-- bad: 无关联 --> <div>用户名</div> <input type="text">正确：
<!-- good: 使用 for/id 或嵌套 --> <template> <label for="username">用户名</label> <input id="username" type="text" v-model="username" required> <!-- 或嵌套方式 --> <label> 密码 <input type="password" v-model="password" required> </label> </template>5.2 错误提示可访问
<template> <label for="email">邮箱</label> <input id="email" type="email" v-model="email" aria-invalid="true" aria-describedby="email-error" > <div id="email-error" class="error" role="alert"> 请输入有效邮箱地址 </div> </template>关键属性：
aria-invalid="true"：标记无效字段aria-describedby：关联错误描述role="alert"：立即通知屏幕阅读器
第六章：色彩与视觉设计
6.1 色彩对比度 ≥ 4.5:1
使用工具检测：
- WebAIM Contrast Checker
- VS Code 插件：Color Highlight
CSS 自定义属性保障：
:root { --text-primary: #2d2d2d; /* 对比度 12:1 on white */ --text-secondary: #666666; /* 对比度 4.7:1 on white */ --bg-primary: #ffffff; }6.2 不依赖颜色传递信息
错误：
<!-- bad: 仅用红色表示错误 --> <span style="color: red">库存不足</span>正确：
<!-- good: 图标 + 文字 --> <span aria-label="错误：库存不足"> ⚠️ 库存不足 </span>6.3 支持系统偏好（减少动画）
/* 尊重用户“减少动画”设置 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }第七章：屏幕阅读器测试实战
7.1 免费工具清单
| 平台 | 屏幕阅读器 | 快捷键 |
|---|---|---|
| Windows | NVDA（免费） | CapsLock + 方向键 |
| macOS | VoiceOver（内置） | Cmd + F5 |
| iOS | VoiceOver | 三击侧边键 |
| Android | TalkBack | 三指滑动 |
7.2 测试清单
- 能否通过 Tab 访问所有控件？
- 屏幕阅读器是否正确朗读按钮/链接用途？
- 动态内容更新是否被通知？
- 表单错误是否即时播报？
- 模态框是否形成焦点陷阱？
技巧：闭眼操作 10 分钟，感受真实体验。
第八章：自动化无障碍测试
8.1 Cypress + axe-core 集成
// cypress/e2e/a11y.cy.ts import { injectAxe, checkA11y } from 'cypress-axe' describe('Accessibility Tests', () => { beforeEach(() => { cy.visit('/login') injectAxe() }) it('Should have no detectable a11y violations', () => { cy.checkA11y( null, { includedImpacts: ['critical', 'serious'], // 只检查严重问题 rules: { 'color-contrast': { enabled: true }, 'button-name': { enabled: true } } } ) }) })8.2 CI 中阻断严重问题
# .github/workflows/a11y.yml name: Accessibility Check on: [pull_request] jobs: a11y: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Run Cypress a11y tests run: npx cypress run --spec "cypress/e2e/a11y.cy.ts" # 若发现 critical 问题，CI 失败注意：自动化工具只能覆盖30～40%问题，人工测试不可替代。
第九章：服务端渲染（Flask Jinja2）的 a11y
9.1 页面语言声明
<!-- base.html --> <html lang="{{ g.locale or 'zh-CN' }}">9.2 主要区域标记
<body> <header role="banner">...</header> <nav role="navigation">...</nav> <main role="main" id="main-content">...</main> <footer role="contentinfo">...</footer> </body>9.3 表格语义化
<table> <caption>用户列表</caption> <thead> <tr> <th scope="col">姓名</th> <th scope="col">邮箱</th> </tr> </thead> <tbody> {% for user in users %} <tr> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> {% endfor %} </tbody> </table>第十章：建立包容性开发文化
10.1 a11y 融入开发流程
| 阶段 | 行动 |
|---|---|
| 需求 | 明确 a11y 验收标准（如“支持键盘操作”） |
| 设计 | 提供高对比度设计稿、焦点状态规范 |
| 开发 | 组件库内置 a11y（如 Element Plus 的 a11y 选项） |
| 测试 | 手动 + 自动化 a11y 测试 |
| 上线 | 发布 a11y 声明（Accessibility Statement） |
10.2 团队赋能
- 培训：组织 NVDA/VoiceOver 工作坊
- 工具：安装浏览器 a11y 插件（如 WAVE）
- 倡导：设立 “a11y champion” 角色
总结：技术的温度，在于包容
无障碍不是“为少数人做的额外工作”，而是“为所有人构建更好产品的基础”。
