---

name: ui-a11y description: "审计基于StyleSeed的组件或页面的WCAG 2.2 AA问题，并在代码安全的情况下应用实用的无障碍修复。" category: design risk: safe source: community source_repo: bitjaru/styleseed date_added: "2026-04-08" author: bitjaru tags: [ui, accessibility, wcag, audit, styleseed] tools: [claude, cursor, codex, gemini]

UI 无障碍审计

概述

作为 StyleSeed 的一部分，此技能审计组件和页面的无障碍问题，重点关注Toss种子的移动端UI模式。它结合WCAG 2.2 AA检查与触摸目标、焦点状态、对比度、标签和减少动效的实用代码修复。

何时使用

• 审查页面或组件的无障碍回归时
• StyleSeed UI看起来精致但键盘或对比度行为不确定时
• 向移动优先屏幕添加新交互控件时
• 需要优先级排序的问题列表和可修复项时

审计领域

可感知

• 文本对比度
• 控件和图形的非文本对比度
• 图片的alt文本
• 有意义图标的标签
• 不仅通过颜色传达信息

可操作

• 触摸目标至少44x44px
• 所有交互控件的键盘可达性
• 逻辑Tab顺序
• 可见的焦点指示器
• 非必要动画的减少动效支持

可理解

• 输入框的可见标签或 aria-label
• 错误文本与正确字段关联
• 错误和验证的清晰措辞
• 适当设置文档语言

健壮

• 尽可能使用语义HTML
• 仅在语义不足时正确使用ARIA
• 没有缺少正确角色和行为的伪按钮或链接

输出

返回：

1. 按严重程度分组的发现问题
2. 可直接应用的安全自动修复
3. 需要手动审查或产品判断的项目
4. 无障碍风险级别的简短摘要

最佳实践

• 在叠加ARIA之前先修复语义
• 仅在设计系统token仍满足对比度要求时使用
• 将触摸目标失败视为真正的可用性缺陷，而非打磨问题
• 优先选择部分已验证的修复，而非推测性的无障碍更改

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。