AI 生成的网页为什么经常“能看不能用”
TL;DR
解释 AI 网页常见的键盘、读屏器、焦点、颜色和移动端问题，并用 WCAG 原则给出面向大众的验收方法。
AI 能迅速生成漂亮页面，却可能遗漏键盘操作、屏幕阅读器、焦点管理、错误反馈和移动端边界。本文用 WCAG 的可感知、可操作、可理解、健壮四个原则检查 AI 网页。
AI 生成网页的第一眼往往很讨喜：渐变背景、圆角卡片、动效按钮和一套完整的响应式布局都能很快出现。可“能看”不等于“能用”。真实用户可能用键盘而不是鼠标，用屏幕阅读器而不是视觉浏览，也可能在手机小屏、低网速或高对比度模式下访问页面。
为什么模型容易生成“展示用界面”
模型从大量网页示例中学习到的是可见模式：标题放在哪里、卡片怎样排列、按钮用什么颜色。它不一定知道这个按钮是否有清晰的键盘焦点、表单错误是否被读屏器感知、动画是否会让人不适。若提示只强调“现代、精致、像某某产品”，模型自然会优先优化截图，而不是完整的交互路径。
另一个原因是需求常常只描述正常流程。设计稿展示的是桌面宽屏和成功状态，实际产品还要处理空状态、错误状态、加载状态、超长文本、放大字体和触摸目标。缺少这些约束，AI 会生成一条漂亮但脆弱的样板路径。
四个最容易被忽略的可用性问题
第一，颜色承担了全部含义。红色表示错误、绿色表示成功，但没有文字或图标辅助，色觉差异用户就难以判断。
第二，结构没有语义。所有内容都用通用容器和点击事件拼成，屏幕阅读器无法理解标题、导航、按钮和表单之间的关系。
第三，键盘路径断裂。弹窗打开后焦点没有进入，按 Tab 会跑到背景；自定义下拉框可以鼠标点击，却不能用方向键选择。
第四，状态没有反馈。提交按钮被禁用却没有说明，加载时间长时没有进度提示，错误信息显示在视觉上却没有和输入框关联。
让 AI 从“做图”转向“做界面”
给任务写出可验证的约束，例如：
使用语义化 HTML；所有交互都可用键盘完成；焦点状态清晰；表单错误与对应输入关联；颜色不能是唯一信息来源；在 320 像素宽度和放大字体时仍可阅读；减少非必要动画，并考虑用户的减少动态效果设置。
这些要求并不等于让页面变丑。相反，清晰的层级、可预测的焦点、稳定的布局和可理解的错误提示通常会让所有人更容易使用。
用标准和真实操作验收
WCAG 将可访问性原则概括为可感知、可操作、可理解和健壮。它不是一张“通过扫描器就结束”的清单，而是帮助团队从不同用户的感受检查界面。自动化工具可以发现缺少替代文本、对比度不足和重复 ID；但它很难判断一个错误提示是否真的有帮助，也无法完全替代键盘和读屏器测试。
一个轻量的验收顺序是：先只用键盘完成主要任务，再放大页面检查内容是否被遮挡；关掉图片或改变颜色模式，确认信息仍然存在；最后使用屏幕阅读器走一遍标题、表单、弹窗和结果区域。把失败步骤告诉 AI，让它修改具体结构，而不是继续要求“更有设计感”。
精品网页的标准不是截图
AI 很擅长把空白画布填满，但产品价值来自用户能否稳定完成任务。封面、首页和演示图可以追求风格差异，核心交互却要追求可理解、可恢复和可访问。好的 Vibe Coding 提示，会同时描述视觉目标和使用边界。
一句话总结：网页不是一张海报。只有当键盘用户、移动端用户、低视力用户和网络异常中的用户都能完成核心任务时，AI 生成的界面才算真正“能用”。
