为什么这一步总被跳过
因为它看不见。
配色不对你一眼能看出来，按钮没有可访问名称你永远看不出来——除非你用读屏软件，或者你的用户里恰好有人需要它。
AI 建站工具优化的目标是"生成出来的东西看起来对"。看起来对和用起来对之间，隔着语义化标签、键盘焦点、对比度、替代文本这几层，而这几层全都不在视觉反馈回路里。
结果是可以量化的：2025 到 2026 年间，全网无障碍合规度下降了约 10%，AI 建站工具批量产出的纯客户端渲染站点被认为是主要原因之一。
四类最常见的问题
1. 全是 div
AI 很喜欢用 <div> 拼一切。读屏软件依赖的是语义——<nav> 告诉它"这是导航，可以跳过"，<button> 告诉它"这个能按"。一堆带 onClick 的 div 对它来说什么都不是。
顺带一提：这个问题和 SEO 的第 4 个坑是同一个根因。修一次，两边都好。
2. 图片没有 alt
或者更糟：alt="image"、alt="图片1"。装饰性图片应该写 alt=""（明确告诉读屏跳过），信息性图片应该描述它传达的信息，而不是描述它长什么样。
3. 图标按钮没有名字
<!-- 读屏读出来是："按钮" -->
<button><XIcon /></button>
<!-- 正确 -->
<button aria-label="关闭对话框"><XIcon /></button>
只有图标没有文字的按钮，是 AI 产出里最普遍的无障碍缺陷。
4. 键盘走不通
自定义下拉、模态框、标签页——AI 生成的版本经常只响应鼠标。Tab 键跳不进去，Esc 关不掉，焦点在模态框打开后跑到页面底部。
怎么自测：把鼠标推开，只用 Tab / Shift+Tab / Enter / Esc 走一遍你的页面。走不通的地方就是 bug。
写进提示词的四条约束
无障碍要求：
- 使用语义化标签（header/nav/main/section/article/footer），
可交互元素必须是 button 或 a，不用带 onClick 的 div
- 所有图片有描述性 alt；纯装饰图用 alt=""
- 仅图标的按钮必须有 aria-label
- 所有交互组件支持键盘：Tab 可达、Enter/Space 可激活、
Esc 关闭浮层、焦点可见且不丢失
- 正文文字与背景对比度不低于 4.5:1
这几行加进去几乎没有成本，但能挡掉绝大多数低级缺陷。
三个 30 秒能做完的检查
- 只用键盘走一遍——最有效的一个检查，不需要任何工具。
- 浏览器开发者工具的 Lighthouse——跑一次 Accessibility 分项，它能抓到对比度和缺失标签。
- 把页面缩放到 200%——文字重叠、按钮被裁切的问题会立刻暴露。
自动化工具只能覆盖大约三分之一的无障碍问题，但那三分之一恰好是 AI 最容易犯的部分，性价比很高。
这不只是道德问题
在很多法域，面向公众的网站的无障碍要求是有法律效力的。用 AI 生成不构成免责事由——你发布它，你就对它负责。
MotionSites 提示词库里的提示词默认带这套无障碍约束。