怎么让AI建站生成的页面通过无障碍访问检测？

学完这篇，你能把 AI 建站工具（v0、Lovable、Bolt、Framer、Webflow AI 等）生成的那套页面，从"检测一片红"改到能通过 axe 和 Lighthouse 的无障碍检测（WCAG 2.1 AA 级别）。

第一步：先跑检测，拿到具体问题清单

这一步的目标是别凭感觉改，先让工具告诉你哪里不合格。装两个工具：

1. Chrome 浏览器装 axe DevTools 扩展（Deque 官方）。按 F12 打开开发者工具，切到 axe DevTools 标签页，点 Scan ALL of my page。结果按 Critical / Serious / Moderate / Minor 分级，每条都带具体 DOM 节点和修复建议。
2. 用 Chrome 自带 Lighthouse。F12 → Lighthouse 面板 → 类别只勾 Accessibility → 模式选 Navigation → 点 Analyze page load。

AI 建站生成的页面，第一轮几乎必然出现这几条：Images must have alternate text、Buttons must have discernible text、Elements must meet minimum color contrast ratio、Form elements must have labels、Heading elements are not in a sequentially-descending order。

注意：Lighthouse 的分数会波动，同一页面跑两次可能差几分。以 axe 报出的具体条目为准，别盯着分数改。

第二步：按高频问题逐类修

这一步做完，Critical 和 Serious 级别通常能清空。AI 生成的代码里，问题高度集中在五处：

图片 alt：AI 常用 Unsplash 占位图，alt 写成文件名或直接留空。装饰性图片写 alt=""（保留属性，别删），有信息量的写具体描述。别写 "image of a cat"，直接写"一只橘猫趴在键盘上"。

对比度：AI 爱用浅灰小字（#999 配白底）和渐变文字。在 DevTools 的 Elements 面板 → Styles 里点任意颜色小方块，Chrome 会显示对比度数值和两条线：正文要 ≥ 4.5:1，18pt 以上大字或粗体 14pt 以上要 ≥ 3:1。不达标就加深前景色，别去调字号绕过。

图标按钮：AI 常写成 <div onClick={...}><svg/></div>。改成 <button type="button" aria-label="关闭弹窗">，键盘才能 Tab 到、才能按 Enter 触发。

表单 label：placeholder 不能替代 label。每个 input 配 <label htmlFor="email">邮箱</label>，或者用 aria-label。错误提示用 aria-describedby 关联到对应字段。

标题层级：页面只能有一个 <h1>，往下不能从 h2 跳到 h4。AI 经常把 logo 做成 h1、把卡片标题做成 h4。

注意：别用 outline: none 去掉焦点框。要自定义就写 :focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }，直接删掉焦点样式是最常见的"自己造的坑"。

第三步：把检测写进命令，防止改一处坏一处

这一步得到的是一个能反复跑的命令，而不是一次性检查。在项目里执行：

npm i -D pa11y-ci
npx pa11y-ci --standard WCAG2AA https://你的预览地址

输出会列出每条错误的选择器和原因。想在 CI 里跑，就建一个 .pa11yci.json：

{
  "defaults": { "standard": "WCAG2AA", "timeout": 30000 },
  "urls": ["http://localhost:3000/", "http://localhost:3000/login"]
}

配置好后运行 npx pa11y-ci，有报错时退出码非 0，能直接卡住流水线。

第四步：手动键盘走一遍

这一步验证的是自动化测不出来的东西。只按键盘操作：

• 按 Tab 从头走到尾，焦点顺序是否和视觉顺序一致、焦点框是否始终可见；
• 按 Enter 或 Space 能否触发所有按钮；
• 弹出的模态框，焦点是否被限制在框内，按 Esc 能否关闭；
• 页面顶部有没有"跳到主内容"的链接（AI 基本不会生成，需手动加：<a href="#main" class="skip-link">跳到主内容</a>）。

装个 NVDA（Windows，免费）配 Chrome，或 macOS 直接用 VoiceOver（Cmd + F5），闭着眼睛听一遍首页，能听明白就算过关。

小结

• 先用 axe DevTools 和 Lighthouse 拿到具体报错，再动手改，别猜。
• 高频问题就五类：alt、对比度、图标按钮、表单 label、标题层级。
• 装饰图写 alt=""，图标按钮必须用 <button> 加 aria-label。
• 永远不要删掉焦点样式，用 :focus-visible 自定义。
• 把 pa11y-ci 或 @axe-core/playwright 接进 CI，配合一轮键盘+屏幕阅读器手动验证，才算真的通过。
• 给 AI 的提示词里直接写明"遵循 WCAG 2.1 AA，图标按钮带 aria-label，图片带 alt"，能从源头少一半返工。