gluestack-accessibility 是 gluestack-ui 的无障碍(Accessibility)专项技能,目标是在使用 gluestack-ui 构建界面时确保 WCAG 2.1 AA 合规,覆盖 React 与 React Native 平台。
用途 该技能适用于需要确保 gluestack-ui 实现具备无障碍能力的场景。gluestack-ui 组件本身已内置无障碍特性,遵循 WAI-ARIA 指南,并提供对屏幕阅读器、键盘导航和焦点管理的开箱支持。本技能覆盖维护和增强这些无障碍特性的最佳实践。
主要能力 技能讲解通过无障碍属性增强组件,例如 React Native 的 accessibilityLabel、accessibilityHint、accessibilityRole、accessibilityState、accessible;面向 Web 平台时使用 aria-label、aria-describedby、aria-expanded 等 ARIA 属性。
屏幕阅读器支持:为交互元素提供有意义的标签,避免仅有图标而无上下文的按钮;使用 accessibility live regions 播报动态内容,例如通过 AccessibilityInfo.announceForAccessibility 播报搜索结果数量;图片始终提供替代文本(alt),装饰性图片通过 alt=""、accessibilityElementsHidden、importantForAccessibility 对屏幕阅读器隐藏。
键盘导航与焦点管理:确保焦点顺序与可见性,模态框打开时将焦点移到输入框,gluestack-ui 的 Modal 自动实现焦点陷阱,并支持 Escape 键关闭;可通过 useKeyboardShortcut 在 Web 上实现键盘快捷键(如 Cmd/Ctrl+K 聚焦搜索框),并使用 accessibilityKeyShortcuts。
表单无障碍:使用 FormControl、FormControlLabel、FormControlLabelText、FormControlHelper、FormControlError 等组件正确关联标签与控件,通过 accessibilityLabel 和 accessibilityHint 提供说明,使用 AccessibilityInfo 向屏幕阅读器播报表单错误及数量,并清晰标示必填字段。
最佳实践:使用具有语义的组件(如 Heading、Button),避免用通用元素承载交互内容;保证足够的颜色对比度(普通文本 4.5:1,大文本 3:1);通过 useReducedMotion 支持减弱动画偏好;确保触摸目标至少 44x44 点,或用 hitSlop、内边距扩展;使用 accessibilityRole="group" 对相关元素分组。
使用方式 技能以代码示例形式展示各类无障碍实现方式,包括无障碍按钮、模态框、导航菜单、数据表格和 Alert 组件等示例。开发者可参照这些模式在 gluestack-ui 组件上添加无障碍属性与 ARIA 属性。
适用场景 适用于使用 gluestack-ui 构建 React 与 React Native 应用、并希望满足 WCAG 2.1 AA 无障碍要求的开发场景,尤其是涉及表单、模态框、导航、数据表格、动态内容播报与键盘操作的界面。
限制 该技能聚焦于 gluestack-ui 的无障碍实现,资料未提供关于收费、价格、平台、效果或具体使用步骤的更多信息,暂未提供。