课程介绍与无障碍概念归纳总结
各位同学好，我是这门课的主讲。干无障碍国际化这件事，说实话有点“吃力不讨好”——你花了大量时间处理语言切换、屏幕朗读、ARIA 属性，但用户根本看不见。可如果没人做，那些视障用户、跨国用户就真的被挡在门外了。
我早年接手过一个海外项目，上来就要支持 6 种语言，同时还要过 WCAG 2.1 AA 认证。那时候团队里没人重视，觉得“先上线再说”，结果审计报告出来 80 多个问题，重写了一个多月。嗯，从那以后我就彻底学乖了——要把无障碍和国际化从一开始就嵌入到 CI 流水线里，而不是最后集中修复。
这门课到底讲什么？
说白了，就是一套能落地的方法论：无障碍国际化 CI 分层实战。我们不会只讲空洞的概念，而是手把手带你搭一套自动化检查系统。
- 第一层：国际化层 — 搞定 i18n 翻译、格式化、复数规则、双向文本。
- 第二层：无障碍层 — 确保 ARIA、焦点管理、颜色对比度、屏幕朗读兼容。
- 第三层：CI 集成层 — 用 GitHub Actions、Lighthouse CI、Axe 把这些检查自动化跑起来，不让问题流到生产环境。
每层我都会讲原理、给代码、踩坑记录。你想象一下：每次提交代码，CI 自动帮你检查有没有漏掉 lang 属性、对比度是否达标、翻译键是否缺失。舒服。
无障碍是什么？先别急着背定义
我习惯把「无障碍」理解为：让所有用户，包括残障用户，都能平等地使用你的产品。这不是道德绑架，而是实在的需求。你知道吗？全球有超过 10 亿人生活在某种形式的残障中。视力障碍、听力障碍、行动不便、认知障碍，都可能因为你的代码不规范而无法完成一次简单的购物。
真正的无障碍并不是「专门给残疾人做一套东西」，而是让产品本身具备弹性。比如：
- 屏幕朗读器能读出每个图片的替代文本
- 键盘能完全操作所有功能
- 文字和背景的对比度足够清晰
- 表单错误提示能被辅助技术识别
核心原则：POUR
WCAG（Web Content Accessibility Guidelines）背后是四个原则 —— 可感知（Perceivable）、可操作（Operable）、可理解（Understandable）、健壮（Robust）。你不需要背全，但每次写代码时问自己一句：我的内容能“看到”吗？能“操作”吗？能“理解”吗？能兼容不同设备吗？
我记得有次给一个下拉菜单加自定义样式，只顾着好看，结果键盘 Tab 进去之后焦点直接消失了。那个 bug 被无障碍测试抓了个正着。现在我都习惯在项目初期就把 Axe 和 Lighthouse 集成到 CI 里，每笔提交都能看到报告。
国际化又是什么？不只是翻译
国际化（i18n）和本地化（l10n）经常被搞混。我个人的理解：国际化是让代码架构能支持多种语言和地区，本地化是填充具体内容。比如，你在代码里用 Intl.DateTimeFormat 处理日期，这就是国际化；而翻译“确定”为“OK”就是本地化。
常见的国际化坑，我列几个：
| 问题 | 例子 | 正确做法 |
|---|---|---|
| 硬编码字符串 | alert("提交成功") | 用 i18n key 替换 |
| 数字格式 | 1,000.00 在德国是 1.000,00 | 使用 Intl.NumberFormat |
| 日期格式 | MM/DD/YYYY vs DD/MM/YYYY | 使用 Intl.DateTimeFormat |
| 文字方向 | 阿拉伯语从右往左 | 设置 dir="rtl" + CSS 逻辑属性 |
| 复数规则 | 英文 1 apple / 2 apples，中文不变 | 使用 ICU MessageFormat / Plural |
我之前做过一个阿拉伯语版本，忘了改 dir，结果整个页面布局是反的。更尴尬的是，那个项目用户投诉说“按钮位置不对”。还好只是 UI 问题，但你需要想想：阿拉伯语的阅读习惯是从右往左，按钮应该在左边还是右边？
为什么要放在 CI 里做？
你可能会问：手动检查不行吗？行，但不可靠。人眼总有疲劳的时候，而且当项目有 20 个页面、5 种语言、10 种屏幕尺寸，每次发版前手动检查一遍，不现实。
CI 流水线能做到：
- 每次 PR 自动运行无障碍检查（Axe、Lighthouse）
- 国际化 key 是否存在、是否遗漏翻译
- 对比度阈值检测
- 焦点顺序逻辑检查
这些检查一旦通过，就可以大大减少回归风险。我自己的团队在接入这套流程后，无障碍 bug 减少了 70% 以上。
我的建议：不要一开始就追求 100% 覆盖率。先挑最常出问题的几条规则（比如缺 alt 属性、对比度不足、缺少 lang），加到 CI 里，运行起来后逐步扩大。
本章知识体系全景图
下面这张图总结了整个课程的分层结构，也是你接下来几十章会一步一步攻克的内容。
课程的整体结构
下面这张表格把 30 章的内容按三个阶段展开。你不需要记住它，但可以当个索引。
| 阶段 | 章节范围 | 核心内容 |
|---|---|---|
| 基础准备 | 1–5 章 | 无障碍概念、国际化基础、CI 工具链选型 |
| 分层实现 | 6–20 章 | 国际化正式实施、无障碍模式、自动化规则配置 |
| 集成与迭代 | 21–30 章 | CI 流水线完整搭建、多语言并行、性能与合规 |
请注意： 国际化与无障碍不能分开做。比如你只是翻译了文案，但阿拉伯语的 dir="rtl" 没处理，或者屏幕朗读器在中文语音库下无法正确读出图标含义，那用户体验依然是割裂的。这两件事情必须一起规划，一起检查。
接下来做什么？
从下一章开始，我们会先搭建一个最基本的国际化环境，配置 react-intl 和 eslint-plugin-i18n。我建议你提前准备好一个空的 React 或 Vue 项目，跟着一起写代码。那种“看懂了但写不出来”的坑，我踩过太多回了。
嗯，第一章就说这么多。先消化一下这张图，把 POUR 四个词记在心里。后面几十章会一幕一幕展开，你会发现其实没那么难。