必须在开发流程中嵌入可访问性检查：用axe DevTools做PR前快速扫描，eslint-plugin-jsx-a11y拦截JSX结构性错误，Playwright+axe-core验证交互状态，三者互补覆盖静态、结构与运行时场景。
直接在开发流程里嵌入可访问性检查，而不是等迭代结束再补救——这是唯一能跟上敏捷节奏的做法。
用 axe DevTools 在每次 PR 前快速过一遍
axe DevTools 浏览器插件是目前最轻量、最贴近开发者工作流的可访问性检查工具。它不依赖服务端、不上传代码、能即时反馈，且对动态内容（如 React/Vue 渲染后的 DOM）有效。
- 安装后，在 Chrome 或 Edge 中打开 DevTools → 切换到
axe标签页 → 点击Scan all of my page - 重点看
critical和serious级别问题，比如img element missing alt、form element missing label、color contrast ratio less than 4.5:1 - 它会高亮具体 DOM 节点，并跳转到 Elements 面板，方便你立刻修改源码或模板
- 不要依赖“自动修复”按钮——它只改静态 HTML，对 JS 动态插入的内容无效
把 eslint-plugin-jsx-a11y 加进 CI 流水线
如果你用 React（或类似 JSX 模板），这个 ESLint 插件能在提交前拦截大部分结构性可访问性错误，比运行时检查更早、更准。
- 安装：
npm install eslint-plugin-jsx-a11y --save-dev - 在
.eslintrc.js中启用规则："jsx-a11y/alt-text": "error"、"jsx-a11y/label-has-associated-control": ["error", { "controlComponents": ["Input"] }] - CI 中加一步：
npx eslint src/**/*.{js,jsx} --ext .js,.jsx，失败则阻断 PR 合并 - 注意：它不检查颜色对比度、焦点顺序、ARIA 状态变更等运行时行为，仅覆盖静态结构
用 playwright + axe-core 写轻量端到端可访问性快检
当组件有交互状态（hover/focus/active/disabled）或需要验证多步流程（如表单提交后提示框）时，纯静态扫描会漏掉关键路径。Playwright 可以模拟用户操作并触发 axe 扫描。
立即学习“前端免费学习笔记（深入）”；
- 示例脚本片段：
const { chromium } = require('playwright');
const axe = require('axe-core');
test('checkout form meets a11y', async ({ page }) => {
await page.goto('/checkout');
await page.fill('#email', 'test@example.com');
await page.click('#submit-btn');
const results = await page.evaluate(() => axe.run());
expect(results.violations.length).toBe(0);
});
color-contrast、aria-required-children）axe.run()，否则结果为空或误报真正卡住团队进度的，往往不是“怎么修”，而是“没意识到要修”——比如一个用 div + onclick 实现的按钮，在 axe 扫描里不会报错，但 eslint-plugin-jsx-a11y 会提醒你改用 button；而它的焦点样式是否可见、键盘能否抵达，则只有 Playwright 模拟 tab 键才能暴露。三者互补，缺一不可。
