简诗 AI 网站无障碍实施

无障碍实施的常见痛点

在前端开发中，无障碍（Accessibility）往往被视为事后补救的负担，导致重构成本极高且体验生硬。开发者常陷入几个典型误区：用 <div> 堆砌交互元素导致键盘无法导航；滥用 ARIA 属性破坏原生语义；表单缺乏关联的 <label> 导致屏幕阅读器无法识别；或者仅依赖颜色传达关键状态而忽略色盲用户。此外，在移动端禁用缩放、自动播放带声音的媒体等做法，不仅违背可用性原则，还可能触碰法律合规红线（如德国 BFSG 法案）。

核心能力与关键步骤

本技能将 POUR 原则（可感知、可操作、可理解、健壮）融入具体的代码审查与实施流程，提供明确的 DO 与 DON'T 指导：

• 语义化与结构：优先使用原生 HTML 元素（如 <button>、<nav>），严格维护标题层级与 Landmark 区域，摒弃“Div Soup”反模式。
• 键盘与焦点管理：确保所有交互元素可通过键盘触达，提供清晰的焦点指示器，并在模态框中实现焦点陷阱。
• 视觉与媒体规范：检查文本与 UI 组件的对比度（如正文不低于 4.5:1），为图片添加描述性 alt 文本，尊重 prefers-reduced-motion。
• 表单与响应式适配：通过 for/id 绑定标签，提供内联错误提示，确保触摸目标不小于 44x44px，且不限制 200% 缩放。

通过内置的 Checklist 和常见组件 Pattern（如跳过导航链接、无障碍手风琴），工程师可以逐项排查并修复技术债。

适用边界与安全注意点

本技能侧重于前端代码规范、语义结构与交互逻辑的静态审查与指导，不替代专业的辅助技术测试。它不会自动修改代码、安装依赖或执行任何持久化任务。在涉及发送、发布、删除等外部写入操作时，必须经过用户明确确认。凭据信息仅用于指定的官方服务，绝不回显或转发。