怎样在真实网页中验证设计系统？

把规则放进真实内容和浏览器，用操作结果检验部件能否可靠使用。

验证设计系统，是检查它在真实页面里是否帮助用户阅读和完成任务。单个部件看起来正确，不代表组合成页面后也正确。

先记住这几件事

• 用常见任务检查完整过程，包括成功、失败、等待和取消，不只看默认状态。
• 覆盖代表性的浏览器、宽窄视口、缩放和长短内容；优先检查用户实际使用的环境。
• 自动检查 是工具按规则扫描； 人工检查 是人实际阅读、操作与判断。两者各有作用。
• 回归检查 是改动后再检查原来正常的场景，确认没有产生新问题。

基本方法见 W3C 无障碍初步检查 ；设计系统与实际网页验证的关系见 USWDS 无障碍指南 。

验证与修正流程

验证记录的示意

这是教学清单，不是已经执行过的测试结果。

用一个例子走一遍

团队修改按钮内部间距后，先在普通资料页检查，再到有长文字的邀请页和窄屏窗口复查。发现邀请页按钮挤出容器，就修正尺寸关系。随后再次检查三个场景，并记录本次覆盖范围。

边界与常见误解

自动工具通过不是完整无障碍认证；初步检查也不能覆盖所有问题。视觉截图适合发现外观变化，但无法证明交互正确。验证结论应说明检查了哪些环境，不把有限检查说成所有情况都可靠。