Vibe Coding 视觉与无障碍发布验收：截图、语义和人工操作三证合一

前端 PR 的截图完全一致，按钮仍可能没有可访问名称；axe 扫描零违规，弹窗仍可能把键盘焦点困在页面背后。视觉回归与无障碍自动化观察的是不同信号，任何一个都不能单独证明用户能完成任务。Vibe Coding 提高界面变更频率后，更需要一套不会被“更新 baseline”或“扫描通过”轻易绕开的组合门禁。

视觉回归测试介绍截图对比和噪声控制，Web 无障碍测试工具说明自动工具边界。本文将它们组织成一次发布验收，而不是两条互不相干的 CI 任务。

先冻结可重现的场景集合

以用户任务而非 URL 数量建立场景，如登录失败后修正、筛选空结果、打开并关闭对话框、提交中取消、权限不足。每个场景固定路由、合成数据、身份、语言、主题、视口、浏览器、字体、动画策略和准备完成断言。网络空闲不总表示界面稳定，应用应暴露可观察的状态元素，测试等待它而不是 sleep 固定毫秒。

场景矩阵覆盖 default、loading、empty、error、success、disabled 和 focus-visible 中的高风险组合。动态时间、头像或实时图表只有在不属于验证目标时才能 mask，并登记原因；把整个主内容 mask 掉会让截图绿色失去意义。第三方 iframe 通过受控替身或局部排除处理，不直接信任其在线内容。

Baseline 绑定测试文件、提交、浏览器镜像、字体和 viewport。Playwright screenshot 断言可以生成与比较快照，但 baseline 必须在同一受控环境更新。普通 PR 不自动执行 --update-snapshots；作者提交候选差异，reviewer 判断是预期设计变化还是回归，并在审查记录中关联需求。

第一证：视觉差异必须可解释

截图重点捕获布局、裁切、层级、排版、主题和焦点样式。对比阈值由页面噪声基线预先设定，失败后不能为当前 PR 临时整体放宽。动画、光标、字体和数据先固定；确需容忍的区域使用最小 mask。宽度矩阵遵循响应式布局验收的方法，包括最窄、中间失效点和宽屏，而不是只截一个桌面视口。

差异审查保留 baseline、actual 与 diff 三张图，并说明对应组件和 token。如果一次 token 修改影响了计划外区域，应沿依赖关系调查，不能因为整体更“统一”就批量接受。图片本身不含交互信息，因此截图通过后仍继续后两证。

第二证：语义与规则自动检查

在场景稳定后运行 axe-core 等规则引擎，并补充应用特定断言：页面只有符合结构的主标题顺序，表单 label 与错误正确关联，按钮有稳定名称，状态消息可被感知，Dialog 打开时具备正确语义。自动规则只能检测可编码的部分，WCAG 2.2 的符合性不能由一条工具报告自动宣布。

DOM 断言应面向角色、名称与状态，不依赖易变 class。禁止为消除违规随意加入 ARIA；错误 ARIA 会覆盖原生语义。优先选原生 HTML，确需复杂组件时对照 WAI-ARIA APG 的键盘模式，并确认该模式与实际组件类型匹配。React 组件可访问性可以作为实现基线。

对扫描结果维护最小例外登记，包含规则、元素、风险解释、owner、到期时间和替代检查。按 selector 永久忽略整个组件会让后续新增问题消失在白名单中。工具或规则版本升级单独评审，先看新增发现，不把旧 baseline 当永恒真相。

第三证：人工完成关键任务

审核者只用键盘完成场景：从浏览器顶部进入页面，顺序导航，操作菜单、弹层和表单，确认焦点始终可见，弹层关闭后返回合理位置，错误后能继续。焦点顺序应跟语义和任务一致，不能只跟截图中的视觉排列一致。自定义网格、树和组合框按其交互模式额外测试方向键、Escape 与选择行为。

随后在支持浏览器中放大文本和页面，检查内容重排、sticky 区域、提示与弹层是否遮挡；切换高对比或系统配色偏好；用至少一种读屏方式抽查名称、角色、状态与错误播报。人工检查按短脚本记录实际结果，不写一句“手测通过”。高风险流程由非作者复核，降低实现者顺着自己预期操作的偏差。

颜色对比和触控目标可以部分自动测量，但背景叠加、图像文字和真实触控仍需判断。Web 无障碍 WCAG提供更完整的成功准则入口；项目根据目标等级和适用范围建立追踪表，不选择性忽略困难页面。

失败分类与发布裁决

失败分为真实视觉回归、测试环境噪声、语义违规、键盘或辅助技术阻断、规格有意变化和工具未知。噪声必须修复环境或缩小 mask；有意变化需要设计与无障碍 owner 同时确认；未知保持失败或人工升级，不能自动转成通过。修复后重跑三类证据，因为 DOM 调整可能改变截图，样式修复也可能影响焦点。

发布报告绑定提交、场景版本、baseline generation、工具与浏览器、自动结果、人工检查人和例外到期日。硬门包括关键任务键盘可完成、严重规则违规为零、未审截图差异为零、焦点不可见为零、未知阻断项为零。具体风险分级由团队预先定义，不在看到当前结果后更改。

最终报告进入编程 Agent 的改动验证门，与功能、类型和契约测试共同决定合并。回滚视觉版本时也回滚匹配的组件、token 和 baseline；baseline 本身不是产品制品，不能通过只还原图片掩盖代码回归。

三证合一的意义，是让截图回答“外观是否意外变化”，自动规则回答“可编码语义是否违反”，人工操作回答“真实任务是否可完成”。只有三者指向同一提交，Vibe Coding 生成的前端才拥有足够可信的发布证据。