用途:对 CSS 进行无障碍审计,依据 WCAG 2.2 指南识别问题并给出具体修复方案,适用于按钮、表单、导航等组件样式的可访问性检查。
主要能力:检查颜色对比度(文本、UI 组件)、文字尺寸与可读性、焦点指示器、视觉层级、间距与目标尺寸;动效方面检查 prefers-reduced-motion 支持、动画安全(无癫痫触发)、自动播放内容与视差效果;交互方面检查键盘导航、焦点管理、交互元素状态与触摸目标尺寸;屏幕阅读器方面检查视觉隐藏但可访问的内容、display/visibility 用法、内容顺序与跳转链接。
遵循的 WCAG 2.2 条款:A 级包括 1.4.1 颜色非唯一指示、2.1.1 键盘可访问、2.4.1 跳转导航、3.2.1 聚焦时一致;AA 级包括 1.4.3 对比度最低 4.5:1、1.4.11 非文本对比度 3:1、2.4.7 焦点可见、2.5.5 目标尺寸 44x44px;AAA 级包括 1.4.6 增强对比度 7:1、1.4.8 视觉呈现、2.4.8 位置指示。
使用方式:向该技能提交 CSS 代码并请求审计,例如“检查这段 CSS 的无障碍问题”“审计我的按钮样式”“审查焦点指示器”“检查颜色对比度”“验证 WCAG 合规性”。技能会列出问题(按严重程度标注)并给出修正后的代码。
常见问题与修复方向:缺少焦点指示器(使用 :focus-visible 添加可见轮廓);对比度不足(调整颜色至达标比值);触摸目标过小(增大至 44x44px);未支持减少动效(使用 prefers-reduced-motion 媒体查询);对屏幕阅读器隐藏内容(使用 sr-only 技术);文字过小(使用相对单位,最小 12px);行高不足(正文建议 1.5);仅 CSS 交互(补充键盘可访问方式)。
限制:资料未提供该技能的安装命令、运行环境、平台支持、收费方式或自动化集成细节,暂未提供。审计结果依赖所提交的 CSS 代码,无法替代真实浏览器与屏幕阅读器的完整测试。