[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fw7KtAAM8OddZw2nUXkGsMzaTSlii6GN-3w2YWAw9gZk":3},{"item":4,"related":51},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":39,"sourceName":40,"sourceUrl":41,"status":42,"seoTitle":43,"seoDescription":44,"canonicalUrl":45,"isFeatured":46,"sno":47,"sortOrder":48,"publishedAt":49,"updatedAt":50,"createdAt":50},"4a146663-bcce-4740-93af-61524b825ed2","article","AI 生成的网页为什么经常“能看不能用”","ai-generated-web-ui-accessibility","AI 能迅速生成漂亮页面，却可能遗漏键盘操作、屏幕阅读器、焦点管理、错误反馈和移动端边界。本文用 WCAG 的可感知、可操作、可理解、健壮四个原则检查 AI 网页。","AI 生成网页的第一眼往往很讨喜：渐变背景、圆角卡片、动效按钮和一套完整的响应式布局都能很快出现。可“能看”不等于“能用”。真实用户可能用键盘而不是鼠标，用屏幕阅读器而不是视觉浏览，也可能在手机小屏、低网速或高对比度模式下访问页面。\n\n## 为什么模型容易生成“展示用界面”\n\n模型从大量网页示例中学习到的是可见模式：标题放在哪里、卡片怎样排列、按钮用什么颜色。它不一定知道这个按钮是否有清晰的键盘焦点、表单错误是否被读屏器感知、动画是否会让人不适。若提示只强调“现代、精致、像某某产品”，模型自然会优先优化截图，而不是完整的交互路径。\n\n另一个原因是需求常常只描述正常流程。设计稿展示的是桌面宽屏和成功状态，实际产品还要处理空状态、错误状态、加载状态、超长文本、放大字体和触摸目标。缺少这些约束，AI 会生成一条漂亮但脆弱的样板路径。\n\n## 四个最容易被忽略的可用性问题\n\n第一，颜色承担了全部含义。红色表示错误、绿色表示成功，但没有文字或图标辅助，色觉差异用户就难以判断。\n\n第二，结构没有语义。所有内容都用通用容器和点击事件拼成，屏幕阅读器无法理解标题、导航、按钮和表单之间的关系。\n\n第三，键盘路径断裂。弹窗打开后焦点没有进入，按 Tab 会跑到背景；自定义下拉框可以鼠标点击，却不能用方向键选择。\n\n第四，状态没有反馈。提交按钮被禁用却没有说明，加载时间长时没有进度提示，错误信息显示在视觉上却没有和输入框关联。\n\n## 让 AI 从“做图”转向“做界面”\n\n给任务写出可验证的约束，例如：\n\n> 使用语义化 HTML；所有交互都可用键盘完成；焦点状态清晰；表单错误与对应输入关联；颜色不能是唯一信息来源；在 320 像素宽度和放大字体时仍可阅读；减少非必要动画，并考虑用户的减少动态效果设置。\n\n这些要求并不等于让页面变丑。相反，清晰的层级、可预测的焦点、稳定的布局和可理解的错误提示通常会让所有人更容易使用。\n\n## 用标准和真实操作验收\n\nWCAG 将可访问性原则概括为可感知、可操作、可理解和健壮。它不是一张“通过扫描器就结束”的清单，而是帮助团队从不同用户的感受检查界面。自动化工具可以发现缺少替代文本、对比度不足和重复 ID；但它很难判断一个错误提示是否真的有帮助，也无法完全替代键盘和读屏器测试。\n\n一个轻量的验收顺序是：先只用键盘完成主要任务，再放大页面检查内容是否被遮挡；关掉图片或改变颜色模式，确认信息仍然存在；最后使用屏幕阅读器走一遍标题、表单、弹窗和结果区域。把失败步骤告诉 AI，让它修改具体结构，而不是继续要求“更有设计感”。\n\n## 精品网页的标准不是截图\n\nAI 很擅长把空白画布填满，但产品价值来自用户能否稳定完成任务。封面、首页和演示图可以追求风格差异，核心交互却要追求可理解、可恢复和可访问。好的 Vibe Coding 提示，会同时描述视觉目标和使用边界。\n\n一句话总结：网页不是一张海报。只有当键盘用户、移动端用户、低视力用户和网络异常中的用户都能完成核心任务时，AI 生成的界面才算真正“能用”。\n\n## 来源\n\n- [W3C：Web Content Accessibility Guidelines](https:\u002F\u002Fwww.w3.org\u002FWAI\u002Fstandards-guidelines\u002Fwcag\u002F)\n- [GitHub Copilot 负责任使用说明](https:\u002F\u002Fdocs.github.com\u002Fen\u002Fcopilot\u002Fresponsible-use)","\u002Fuploads\u002F2026-09-13\u002F8cb2bfc1-e355-4d20-b7e5-113113d705be.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","foundit-ai-editorial",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23,27,31,35],{"id":24,"name":25,"slug":26},"0848beb4-db26-4fb8-b391-f852a11be192","AI编程","ai-coding",{"id":28,"name":29,"slug":30},"4ab4d31d-2daf-4bd3-9d99-c7210c4943bf","网页制作","web-making",{"id":32,"name":33,"slug":34},"82f427f8-6275-4cbb-bcac-cf1948488006","网页应用","web-app",{"id":36,"name":37,"slug":38},"7da20200-5815-42a5-851a-bc8c1db554cb","应用","app","W3C 官方标准","W3C：Web Content Accessibility Guidelines","https:\u002F\u002Fwww.w3.org\u002FWAI\u002Fstandards-guidelines\u002Fwcag\u002F","published","AI 生成网页为何能看不能用：从 WCAG 看可访问性","解释 AI 网页常见的键盘、读屏器、焦点、颜色和移动端问题，并用 WCAG 原则给出面向大众的验收方法。",null,false,50,0,"2026-09-13T00:00:00.000Z","2026-09-13T11:55:57.077Z",[52,61,71],{"id":53,"type":6,"title":54,"slug":55,"summary":56,"coverUrl":57,"authorName":14,"sno":58,"publishedAt":59,"createdAt":60},"4f99fd43-59a9-4dab-bdeb-92671d1e5445","AI 做网页的视觉还原靠谱吗？像截图不等于像产品","ai-web-visual-fidelity-vs-function","AI 生成的网页可能很像参考图，却没有真正的交互、数据和错误状态。本文区分视觉还原、结构正确和行为完整，并介绍用真实浏览器验收 AI 网页的方法。","\u002Fuploads\u002F2026-09-14\u002F315a51d5-68a8-4d16-87d3-14363dd24156.jpg",47,"2026-09-14T00:00:00.000Z","2026-09-14T11:00:09.087Z",{"id":62,"type":6,"title":63,"slug":64,"summary":65,"coverUrl":66,"authorName":67,"sno":68,"publishedAt":69,"createdAt":70},"b53e8d96-5ee6-448e-b249-5573d6adf6d4","氛围编程入门","vibe-coding-intro","以网页制作为例，介绍氛围编程涉及到的核心概念，帮助新手入门","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-17\u002F538e5262-96da-46df-8e42-8f5156fe675e.jpg","龙家轩",53,"2026-07-17T00:00:00.000Z","2026-07-17T05:12:58.995Z",{"id":72,"type":6,"title":73,"slug":74,"summary":75,"coverUrl":76,"authorName":14,"sno":77,"publishedAt":78,"createdAt":79},"4d5ad0ab-081e-433f-8aad-a951df4188f9","为什么同一张图片换个格式就小很多","webp-image-compression-explained","图片压缩并不是简单删除像素，而是利用相邻区域的规律减少需要保存的数据。本文解释 WebP 的有损与无损压缩，以及不同图片格式的适用场景。","\u002Fuploads\u002F2026-09-12\u002Fa39cdc32-db5e-4659-805f-74df02adcbeb.jpg",55,"2026-09-12T00:00:00.000Z","2026-09-12T04:45:46.282Z"]