无障碍、性能与工具链：WCAG 2.2 / 字体加载 / CSS 性能 / 构建工具

0. 元信息

• 主题路径：docs/topics/html-css-responsive/subtopics/a11y-performance-and-tooling/
• 父主题：html-css-responsive
• 主分类：前端与客户端
• 辅助分类：工程技术 / 安全与可靠性（无障碍纳入可靠性视角）
• 适合对象：已有 HTML/CSS 基础、想把页面真正做到”可被所有人使用、加载快、构建稳”的开发者
• 建议周期：1.5 周（每周 8~12 小时）
• 前置知识：html-semantics-and-forms 与 css-fundamentals-and-layout 与 responsive-and-modern-css
• 最终目标：能把页面做到 Lighthouse a11y ≥ 95、Performance ≥ 90，并能在 CI 跑 stylelint + axe-core 把关

1. 学习路线

WCAG 2.2 POURE + 关键准则（Perceivable / Operable / Understandable / Robust）
  → 键盘可达 + 焦点管理 + skip link
  → 对比度与 forced colors
  → 屏幕阅读器 + landmark 跳区 + 表单 error live
  → CSS 性能：critical CSS、content-visibility、contain、aspect-ratio 占位
  → 字体加载：font-display、size-adjust、preload、unicode-range
  → 构建工具：PostCSS、Lightning CSS、Tailwind / UnoCSS、stylelint
  → CI 阻断：axe-core / Lighthouse CI / stylelint
  → 综合：上一阶段营销页 + 公司官网首页的全部 a11y / 性能 / 工具链升级

按”合规（WCAG） → 体验（键盘 / 屏幕阅读器） → 性能（critical CSS / 字体） → 工程（工具链 / CI）“的顺序学。

2. 阶段周数分配（1.5 周，每天 1.5~2 小时）

总计约 15~20 小时；1.5 周可含真机回归 + CI 配齐。

3. 九阶段表

陷阱：把 critical CSS 当”加 inline 就行”；font-display: swap 时字体全替换；axe 0 critical 误以为 a11y 过。

4. 第一周（每天 1.5~2 小时）

Day 1 约定：编辑器 = VS Code + axe DevTools 扩展；浏览器 = Chrome + Firefox + Lighthouse；本计划结合上一阶段营销页迭代 a11y / 性能 / 工具链。所有截图、axe / Lighthouse 报告、CI 截图记录到 notes/week1/dayN/，便于复盘。

Day 7 步骤 C 是验收关键——CI 阻断要在 PR 上看到 1 次”红→修→绿”完整闭环，不是空配置。

5. 阶段通用验收

1. 不看答案重写该阶段的最小 demo（skip link / critical CSS / 自托管字体 / stylelint 配置 各 1 个）；
2. 解释”axe 0 critical ≠ WCAG 全过”、“critical CSS 为何不全等于内联”、“font-display swap 为何要 size-adjust”、“Lighthouse preset desktop 与 mobile 差异”；
3. 截图 3 种宽度（360 / 768 / 1440）+ 暗色 + 高对比 + reduce-motion + forced colors 至少 5 态；
4. 跑 1 次 Lighthouse（修改前）+ 1 次（修改后），对比 LCP / CLS / INP 改善；
5. 至少 1 张图标记”axe 0 critical 后仍需手测的项目”（键盘 / 屏幕阅读器 / 对比度边界）；
6. 列出至少 3 类边界：forced colors 下自定义颜色失效 / font-display 缺 fallback / critical CSS 漏提取首屏关键样式；
7. CI 至少跑通 1 次 stylelint + axe-core CLI 阻断。

6. 最终验收

• 独立完成：1 份上一阶段营销页的全量 a11y / 性能 / 工具链升级（4 断点 + 4 态 + 1 打印）；
• 至少完成 9 个练习：2 个 WCAG 自评、2 个键盘 / 焦点、2 个对比度 / forced colors、2 个 CSS 性能、1 个字体加载；
• Lighthouse 跑分：Performance ≥ 90、A11y ≥ 95、Best Practices ≥ 90、SEO ≥ 90；
• axe-core 0 critical / serious 违规；
• W3C HTML Validator 0 error；
• 自托管 1 个可变字体 + size-adjust 同步度量 + 字体不阻塞首屏；
• CI 阻断：stylelint + axe-core CLI + Lighthouse CI 三件套全配置并实跑过 1 次”红→绿”；
• 用 10 分钟讲清”WCAG / axe / Lighthouse / critical CSS / 字体加载 / 工具链”链路。

7. 综合项目

首选：把父主题前一阶段的营销页 + 公司官网首页（同品牌两套页）做”a11y / 性能 / 工具链”全量升级，跑通 CI 阻断。

必做：

• axe-core / axe DevTools 0 critical / serious；
• Lighthouse Performance ≥ 90、A11y ≥ 95、Best Practices ≥ 90、SEO ≥ 90；
• 4 断点（360 / 768 / 1024 / 1440）+ 4 态（浅 / 深 / 高对比 / reduce-motion）+ 1 打印样式；
• 跳转链接 + :focus-visible + skip nav + aria-current + aria-live 表单提交反馈；
• 自托管 1 个可变字体 + font-display: swap + size-adjust + ascent-override + unicode-range；
• critical CSS 内联首屏 + 剩余 CSS 异步加载；
• 首屏图片 fetchpriority="high" + decoding="async"；
• 工具链：Lightning CSS 压缩 + PostCSS（autoprefixer + nesting）+ stylelint（a11y + 现代语法）；
• CI：GitHub Actions 跑 stylelint + axe-core CLI + Lighthouse CI 阻断，PR 红不能合并。

备选：把一套遗留的”无 a11y / 无性能优化”营销页升级为达标水平，附”原 vs 新”Lighthouse + axe 对比。

notes/ 与 README 存放规范

所有截图、Lighthouse / axe 报告原文、CI 截图、字体度量对比统一存放在项目根目录的 notes/ 子目录或 README 的对应章节。综合项目的 notes/ 至少包含：

• notes/design.md：a11y 决策表、性能预算、字体加载策略、CI 阻断配置；
• notes/test.md：4 断点 × 4 态截图、axe 报告、Lighthouse 报告、CI 红绿截图；
• notes/retrospective.md：复盘（用时、难点、收获、未完成项）。

任何综合项目都必须包含：

1. 需求与受众；
2. 完整 a11y 决策表（每条 axe 报错 → 修复 → 验证）；
3. 完整性能预算（LCP / CLS / INP 目标值与实测值）；
4. 完整字体加载策略（自托管 / swap / size-adjust / unicode-range）；
5. 4 断点 × 4 态 × 1 打印 截图（共 17 张，编号清晰）；
6. CI 配置文件（lighthouserc / stylelint / axe-core CLI）；
7. README：项目介绍、运行步骤、目录结构、复盘；
8. 复盘记录：用时、难点、收获、下一步。

本主题贡献（Loop 6-D · html-css-responsive / a11y-performance-and-tooling）

本主题把”WCAG 合规、键盘 / 屏幕阅读器体验、CSS 性能、构建工具链”四条独立工程线拧成一条验收闭环，输出可被父主题营销页与官网首页直接复用的升级模板。

3 项核心职责

• 可访问性审计：对照 WCAG 2.2 AA 的 50+ 条准则，用 axe-core + axe DevTools 抓 critical / serious 违规，给每条违规配修复 + 验证证据；强制键盘导航（Tab 顺序、:focus-visible、skip link、roving tabindex）覆盖到 4 态（浅 / 深 / 高对比 / reduce-motion），并对 color contrast 4.5:1 / 3:1 的边界（按钮、链接、placeholder）逐项核算。
• CSS 性能预算：用 content-visibility: auto + contain-intrinsic-size 给首屏外的卡片网格让路，配合 critical CSS 内联（Critters 自动抽取）+ font-display: swap + size-adjust + ascent-override + unicode-range 把可变字体塞进 LCP ≤ 2.5s / CLS ≤ 0.1 / INP ≤ 200ms 的 Web Vitals 预算，输出”修改前 / 修改后”Lighthouse 对比与 misattribution 排查。
• CI 阻断闭环：把 stylelint（含 a11y 规则）+ axe-core CLI + Lighthouse CI + W3C HTML Validator 拼成 PR 红绿阻断，PR 红不能合并；并把”WCAG / axe / Lighthouse / critical CSS / 字体加载”五条链路在 10 分钟内讲清。

4 项交付物

1. WCAG 2.2 AA 自评表：8 条核心 success criteria × 4 态逐项”通过 / 待修 / 不适用”，含键盘路径与屏幕阅读器录屏。
2. a11y 决策表：每条 axe 报错 → 修复代码 → 验证截图 / 录屏，覆盖 ARIA landmark、表单错误 aria-live、forced colors 下 CanvasText / LinkText 系统色。
3. 性能与字体策略包：critical CSS 抽取配置（Critters / penthouse）+ 自托管可变字体 + size-adjust 同步度量 + unicode-range 分阶段加载，外加 LCP / CLS / INP 目标值与实测值表。
4. CI 红绿阻断配置：.lighthouserc.cjs + stylelint（含 a11y 规则）+ axe-core CLI + W3C Validator 的 GitHub Actions 工作流，附 1 次完整”红 PR → 修 → 绿”复盘。

3 个验收指标

• Lighthouse：Performance ≥ 90、A11y ≥ 95、Best Practices ≥ 90、SEO ≥ 90（P75，desktop + mobile 各 1 次）。
• axe-core：0 critical / 0 serious 违规（CI 阻断命中示例 ≥ 1 个）。
• 可变字体不阻塞首屏：CLS ≤ 0.1、字体切换位移 ≤ 0.05。

8. 推荐开源资料

许可证提示：WCAG / WAI-ARIA / W3C 规范文本由 W3C 公开；MDN / web.dev 内容采用 CC BY 4.0；axe-core 是 MPL-2.0；Lighthouse 是 Apache-2.0；PostCSS / stylelint / Tailwind 是 MIT；Lightning CSS 是 MPL-2.0；Fontsource 各字体许可证见其仓库。复制代码或长段引用前先看 LICENSE；默认做法是读思路后自己重写，而不是复制粘贴。

默认使用顺序：WCAG 2.2 查验收 → web.dev a11y / Web Vitals 走主线 → axe DevTools 浏览器扫 → MDN / spec 排错 → web.dev font-display 配字体 → Lightning CSS / PostCSS / stylelint 配工具链 → Lighthouse CI + axe-core CLI 配 CI 阻断 → PR 红绿复盘。

9. 学习资料汇聚（v0.3 自包含）

9.1 背景与动机

WCAG 1.0（1999）定义 a11y 起点；WCAG 2.0（2008）引入 POURE；WCAG 2.1（2018）增加移动与认知；WCAG 2.2（2023）扩展焦点外观、目标尺寸、拖拽等细则。今天合规底线是 2.2 AA。

性能侧，Google 自 2010 年起持续发布 RAIL、Web Vitals，CSS 成为关键路径：head 中的大样式表会阻塞渲染。“关键 CSS 内联、字体分阶段、可视区懒加载”是从 RAIL/INP 角度的硬约束。

工具链侧，PostCSS 与 Sass 自 2013 年起改变 CSS 写法的可编程性；Tailwind v1（2017）让原子化成为选项之一；Lightning CSS（2023）把”压缩 + 现代语法降级”放进单一 Rust 工具。

9.2 概念地图

flowchart LR
  WCAG[WCAG 2.2]
  WCAG --> Perceivable[Perceivable: alt text / contrast]
  WCAG --> Operable[Operable: keyboard / focus / target size]
  WCAG --> Understandable[Understandable: language / consistency]
  WCAG --> Robust[Robust: name role value]

  A11y[无障碍实践]
  A11y --> Keyboard[键盘可达 + :focus-visible]
  A11y --> Contrast[对比度 4.5:1 / 3:1]
  A11y --> Forced[forced-colors 高对比模式]
  A11y --> SR[屏幕阅读器 + aria-live]
  A11y --> SkipLink[skip link + landmark 顺序]

  Perf[性能]
  Perf --> Critical[Critical CSS]
  Perf --> Contain[contain / content-visibility]
  Perf --> Font[字体: font-display / size-adjust]
  Perf --> WebVitals[LCP / INP / CLS]

  Tool[工具链]
  Tool --> PostCSS[PostCSS + autoprefixer / nesting]
  Tool --> LC[Lightning CSS]
  Tool --> Sass[Sass]
  Tool --> Tailwind[Tailwind / UnoCSS]
  Tool --> Stylelint[stylelint]

  CI[CI 阻断]
  CI --> Axe[axe-core CLI]
  CI --> LighthouseCI[Lighthouse CI]
  CI --> Validator[W3C validator]

9.3 基础知识讲解

9.3.1 规范 / 提案

9.3.2 经典书籍 / 资源

9.3.3 优秀博客 / 文档

9.3.4 核心人物

9.3.5 开发方法

9.3.6 必读资源子集（≥5 条）

1. WCAG 2.2
2. The A11y Project checklist
3. axe-core rules
4. web.dev — Accessibility
5. web.dev — Web Vitals / Optimize LCP
6. Lightning CSS docs
7. font-display / size-adjust 指南

9.4 经典问题与经典案例

9.5 学习难点

概念难点

思维难点

工程难点

9.6 技术标准与接口

9.6.1 Entity

9.6.2 Scope

• WCAG 是验收基准；axe-core 是部分自动化的实现。
• PostCSS 与 Lightning CSS 处理现代 CSS → 目标浏览器 CSS 降级与压缩。
• stylelint 与 prettier 维护代码一致性。
• Tailwind / UnoCSS 是设计抽象层，可选。

9.6.3 Structure

• WCAG：POURE × Level（A / AA / AAA），AA 是商业合规基线。
• Web Vitals：LCP ≤ 2.5s / INP ≤ 200ms / CLS ≤ 0.1（75th percentile，桌面 + 移动）。
• 工具链：browserslist 声明目标浏览器 → postcss-preset-env / autoprefixer / lightningcss 编译 → minify → inline。
• 字体：@font-face { font-display: swap } + size-adjust + ascent-override + 自托管。
• a11y 测试：单元（jest-axe）/ 集成（testing-library）/ 端到端（axe-core CLI + Playwright）/ 屏幕阅读器（手测）。

9.6.4 Ecosystem

• 自动化：axe-core / pa11y / Lighthouse CI / W3C HTML validator / W3C CSS validator。
• 工具链：PostCSS、Lightning CSS、Tailwind / UnoCSS、stylelint、Prettier、ESLint (a11y 插件)。
• 字体：Fontsource、Inter、Recoleta、IBM Plex、Atkinson Hyperlegible。
• CI：GitHub Actions / GitLab CI / Jenkins + lighthouse-ci + axe-core CLI。

9.6.5 Depth Tiers

本子主题目标：L3。综合项目阶段可触及 L4。

9.6.6 Source

• W3C WCAG 2.2
• axe-core rules
• web.dev — Web Vitals
• Lightning CSS docs
• PostCSS docs
• 引用快照日期：2026-07-30。

10. 常见误区

• 把 tabindex="1" 显式排序；
• 用 outline: none 干掉焦点环；
• 用 display: none 隐藏 skip link；
• 用 alert() 通报表单错误；
• prefers-reduced-motion 没分支；
• critical CSS 仅内联”自己想”的部分；
• content-visibility: auto 不给 intrinsic size 跳屏；
• font-display: swap 不 size-adjust，字体切换位移；
• 把 Tailwind 当唯一真理，丢掉原生 CSS；
• Light House 看一眼分数就放过，不复盘；
• 用 pointer-events: none 阻挡交互元素的鼠标；
• aria-label 与 <label> 混用导致双重朗读；
• 用 <div role="button"> 而不写真正按钮；
• a11y 误以为 axe 0 critical = 全过；
• 在生产用 font-display: block（默认隐藏文字）不写 fallback；
• HTML / CSS 验证器红线不修。

11. 所有知识点分类（统一规则）

本子主题归属：前端与客户端 主 + 无障碍 + 工程技术 辅。