Stats
Actions
Tags
Designs, implements, and audits accessible digital products using WCAG 2.2 AA. Covers semantic ARIA on web, accessibility APIs on iOS (SwiftUI) and Android (Compose).
How this skill is triggered — by the user, by Claude, or both
Slash command
/everything-claude-code:accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
此技能确保数字界面对所有用户都可感知、可操作、可理解和稳健（POUR），包括使用屏幕阅读器、开关控制或键盘导航的用户。它专注于 WCAG 2.2 成功标准的技术实施。
此技能确保数字界面对所有用户都可感知、可操作、可理解和稳健（POUR），包括使用屏幕阅读器、开关控制或键盘导航的用户。它专注于 WCAG 2.2 成功标准的技术实施。
aria-label、accessibilityLabel 和 contentDescription 提供上下文。确定功能用途（例如，这是按钮、链接还是选项卡？）。在使用自定义角色之前，先使用最语义化的原生元素。
Name, Role, Value 模式。aria-live 或实时区域。flowchart TD
UI["UI 组件"] --> Platform{平台?}
Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
Platform -->|iOS| SwiftUI["辅助功能特征 + 标签"]
Platform -->|Android| Compose["语义 + 内容描述"]
ARIA --> AT["辅助技术（屏幕阅读器、开关）"]
SwiftUI --> AT
Compose --> AT
| 功能 | Web (HTML/ARIA) | iOS (SwiftUI) | Android (Compose) |
|---|---|---|---|
| 主要标签 | aria-label / <label> | .accessibilityLabel() | contentDescription |
| 次要提示 | aria-describedby | .accessibilityHint() | Modifier.semantics { stateDescription = ... } |
| 操作角色 | role="button" | .accessibilityAddTraits(.isButton) | Modifier.semantics { role = Role.Button } |
| 实时更新 | aria-live="polite" | .accessibilityLiveRegion(.polite) | Modifier.semantics { liveRegion = LiveRegionMode.Polite } |
<form role="search">
<label for="search-input" class="sr-only">搜索产品</label>
<input type="search" id="search-input" placeholder="搜索..." />
<button type="submit" aria-label="提交搜索">
<svg aria-hidden="true">...</svg>
</button>
</form>
Button(action: deleteItem) {
Image(systemName: "trash")
}
.accessibilityLabel("删除项目")
.accessibilityHint("从列表中永久删除此项目")
.accessibilityAddTraits(.isButton)
Switch(
checked = isEnabled,
onCheckedChange = { onToggle() },
modifier = Modifier.semantics {
contentDescription = "启用通知"
}
)
<div> 或 <span> 处理点击事件而不添加角色和键盘支持。Escape 键或明确的关闭按钮退出（WCAG SC 2.1.2）。Escape 键或关闭按钮）。frontend-patternsdesign-systemliquid-glass-designswiftui-patternsnpx claudepluginhub aaione/everything-claude-code-zhDesigns, audits, and implements accessible interfaces following WCAG 2.2 Level AA, including semantic ARIA for web and accessibility traits for iOS/Android.
Implements WCAG 2.2 compliant web UIs with ARIA patterns, semantic HTML, keyboard navigation, screen reader support, focus management, and mobile accessibility for VoiceOver/TalkBack.
Ensures WCAG 2.2 AA web accessibility: color contrast ratios (4.5:1 body text), keyboard navigation, ARIA attributes, focus indicators, screen reader support, color independence, and axe-core testing.