无障碍基础：AI 生成 UI 时必须守住的五条

AI 会做出「看起来能点」的界面

视觉完整不等于可访问。模型常省略 aria-label、用 div 冒充按钮、标题层级混乱，或对比度不足。这些在演示录屏里不易暴露，却会挡住真实用户与部分 SEO/质量信号。

五条底线

1. 交互元素用正确语义

按钮用 button，链接用 a。不要用可点击 div 除非补全角色与键盘事件。

2. 图标按钮必须有名字

仅有图标时提供 aria-label 或可见文本。主题切换、菜单开关是重灾区。

3. 标题层级连续

页面一个 h1，章节用 h2/h3 递进。AI 喜欢全用粗体段落冒充标题，不利于屏幕阅读器与结构理解。

4. 键盘可完成主流程

Tab 可达、Enter/Space 可激活，焦点可见。弹层打开后焦点管理要有基本交代。

5. 对比与状态不只靠颜色

错误态除了变红，还要有文字说明；浅色主题下检查主色对比。

写进 Skill 的方式

在前端脚手架 Skill 的完成定义中加入无障碍勾选项，反模式写明「禁止无名称图标按钮」。模板参考 组件 Skill。

快速验收

• 键盘走一遍主导航与主 CTA
• 放大字体看布局是否崩
• 抽查表单 label 是否与控件关联

小结

无障碍不是「有空再做的优化」，而是 AI 高速出 UI 时最容易丢的质量层。五条底线写进 Rules/Skill，能以很低成本挡住大量返工。

下一步：打开站点顶栏与移动菜单，用键盘确认可开关、可导航。