用途:在使用 Tailwind CSS v4.3 工具类时,按无障碍优先模式实现键盘可访问的交互元素、屏幕阅读器支持、动效偏好尊重、颜色对比度达标以及 WCAG 2.2 AA/AAA 合规,并创建适合移动端的可访问触控目标。
主要能力:focus-visible 提供仅键盘触发的焦点环;sr-only 为视觉内容补充屏幕阅读器文本;motion-safe/motion-reduce 响应 prefers-reduced-motion;工具类组合保证组件间无障碍模式一致;CSS-first 配置可通过 @theme 集中设置无障碍默认值。
关键规则:交互元素始终用 focus-visible 而非 focus;不要用 hidden 对屏幕阅读器隐藏内容,应使用 sr-only;动画需包裹在 motion-safe: 中;最小触控目标 44×44px,使用 min-h-11 min-w-11(2.75rem),对应 WCAG 2.2 AAA(SC 2.5.5),AA 下限为 24×24px(SC 2.5.8);文本对比度 4.5:1,大文本 3:1(WCAG AA);语义化 HTML 优先,Tailwind 只做增强而非替代。
使用方式:技能要求先并行启动三个 Agent 调用(explore-codebase 分析现有无障碍模式、research-expert 核对最新 WCAG 2.2 指南、mcp__context7__query-docs 检查 Tailwind 无障碍工具类),实现后运行 fuse-ai-pilot:sniper 验证。示例:按钮使用 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary rounded-md;屏幕阅读器文本用 span class="sr-only";动效容器用 motion-safe:animate-bounce motion-reduce:animate-none。
最佳实践:所有交互元素加焦点环;添加跳转到内容的 skip link;无可见文本时补充 aria-label;颜色不作为唯一指示,配合图标或文字;仅用键盘遍历整个 UI 流程测试;用 VoiceOver(macOS)或 NVDA(Windows)做屏幕阅读器测试。
限制:资料未提供具体安装命令、收费方式、平台支持范围及实际效果数据,暂未提供。