UX Accessibility Skill 是一套面向 Web 组件的无障碍设计模式,目标是帮助实现符合 WCAG 2.2 AA 的交互组件,让所有用户都能使用。它属于实践指导型技能,资料来自项目 matthewharwood/fantasy-phonics,地址为 https://www.skills.sh/matthewharwood/fantasy-phonics/ux-accessibility。
用途:为组件开发提供无障碍实现规范,覆盖焦点、键盘、屏幕阅读器、动效与对比度等常见要求。主要能力包括:焦点管理(使用焦点令牌 focus-visible 描边、模态框焦点陷阱、关闭后恢复焦点)、键盘导航(按钮 Enter/Space、菜单方向键、对话框 Escape、标签页与列表框方向键及 Home/End)、屏幕阅读器支持(ARIA 角色与标签、role=status 的 live region 宣告、.sr-only 隐藏内容)、减弱动效(prefers-reduced-motion 媒体查询与 JS 检查)、高对比度模式(forced-colors 支持)、触控目标(最小 44x44px 并可扩展点击区域)、颜色对比度(正文 4.5:1、大字与 UI 组件 3:1)以及跳转链接(Skip Link)。
使用方式:技能提供项目 CSS 无障碍令牌(如 --focus-ring-width、--min-touch-target 等)与组件代码模式;示例采用 Web Component 与 Shadow DOM,强调在构造时保存直接元素引用,不依赖 querySelector。
适用场景:需要在 Web 项目中实现可访问的模态框、菜单、标签页、按钮等交互组件时参考。限制:资料未提供安装命令、收费方式、平台或效果数据;具体实现需结合项目既有令牌与语义颜色,实际合规仍应自行测试验证。