SuperAPI AI 工具集

accessibility-mobile

前端与建站

查看项目

更新于 10-16 00:04

技能介绍

该技能用于在 React Native 应用中实现无障碍(a11y)特性,核心原则为“INCLUSIVE BY DEFAULT”,即无障碍不是可选项,应为所有用户构建。适用场景包括:构建可访问组件、实现屏幕阅读器支持、添加无障碍标签、进行无障碍测试。

主要能力涵盖:基础无障碍属性(accessible、accessibilityRole、accessibilityLabel、accessibilityHint),常用角色(button、link、search、switch、image、header、alert、checkbox、radio、tab、tablist、progressbar、slider 等),可访问表单(通过 nativeID 与 accessibilityLabelledBy 关联标签,设置 accessibilityInvalid 与 accessibilityErrorMessage,错误信息使用 alert 与 polite 实时区域),无障碍状态(checked、expanded、selected、busy),无障碍值(进度条与滑块的 min、max、now、text),实时区域(polite 与 assertive),元素分组与取消分组,焦点管理(AccessibilityInfo.setAccessibilityFocus 与 findNodeHandle),屏幕阅读器检测(isScreenReaderEnabled 与 screenReaderChanged 事件),减少动态效果(isReduceMotionEnabled 与 reduceMotionChanged 事件),可访问导航(tablist 与 tab)以及可访问列表。

测试方面使用 @testing-library/react-native,通过 getByRole、getByLabelText 与 toHaveAccessibilityState 断言。检查清单包括:交互元素具备 accessibilityRole、图片有标签或被隐藏、表单输入有标签与错误信息、触控目标至少 44x44 点、不以颜色作为唯一信息载体、文本对比度至少 4.5:1、动画遵循减少动态效果设置、焦点顺序合理、动态内容使用实时区域、在 iOS 与 Android 上进行屏幕阅读器测试。

使用限制:需在 iOS 上用 VoiceOver、Android 上用 TalkBack 实测,可使用 Xcode 的 Accessibility Inspector;需考虑运动障碍用户并为手势提供替代方案。分类上属于设计与创作中的无障碍实践,但因其核心为 React Native 组件实现,归入前端与建站。该技能来源为 majiayu000/claude-skill-registry,具体安装与调用方式在资料中暂未提供。