web-accessibility

用途：在新建 UI 组件、无障碍审计、表单实现、模态框/下拉菜单、WCAG 合规等场景中，按 WCAG 2.1 实现 Web 无障碍（a11y）。输入需提供框架（React、Vue、Svelte、Vanilla JS 等）、组件类型（按钮、表单、模态框、下拉菜单、导航等）、WCAG 等级（A/AA/AAA，默认 AA）；可选屏幕阅读器（NVDA、JAWS、VoiceOver）、自动化测试工具（axe-core、Pa11y、Lighthouse，默认 axe-core）、浏览器（默认 Chrome）。主要能力与实践方式：1）语义化 HTML：使用 button、nav、main、header、footer 等标签，避免滥用 div/span，正确使用标题层级，用 label 关联 input。2）键盘导航：Tab/Shift+Tab 移动焦点，Enter/Space 激活按钮，方向键导航列表，ESC 关闭模态框/下拉菜单；tabindex="0" 可聚焦，tabindex="-1" 仅程序聚焦，避免 tabindex="1+"。3）ARIA：使用 aria-label、aria-labelledby、aria-describedby、aria-live、aria-hidden，动态内容用 aria-live 播报。4）视觉与对比度：WCAG AA 文本 4.5:1、大字 3:1；AAA 文本 7:1、大字 4.5:1；不以颜色单独传达信息，清晰显示焦点 outline。5）测试：axe DevTools 扫描、Lighthouse Accessibility 评分、纯键盘测试、屏幕阅读器测试，并给出 Jest + axe-core 示例。输出格式为无障碍检查清单，涵盖语义 HTML、键盘导航、ARIA、视觉、测试五类。强制规则：所有功能可无鼠标使用、图片必须有 alt（装饰图 alt=""）、表单输入必须有 label。禁止：使用 outline: none、tabindex 大于 0、仅用颜色传达信息。最佳实践：语义 HTML 优先，ARIA 是最后手段；SPA 页面切换管理焦点，提供跳转链接；错误消息清晰具体。参考资料：WCAG 2.1 指南、MDN ARIA、WebAIM、axe DevTools、A11y Project。版本 1.0.0，更新于 2025-01-01，兼容 Claude、ChatGPT、Gemini。限制：具体功能、收费、价格、平台效果等资料暂未提供。