无障碍 Accessibility
Kumo 组件中的无障碍标准与最佳实践。
无障碍是 Kumo 的首要任务之一。Kumo 组件构建于 Base UI 之上,处理了许多复杂的无障碍细节,包括 ARIA 属性、role 属性、指针交互、键盘导航以及焦点管理。目标是开箱即用地提供无障碍的用户体验,同时提供直观的 API 供你配置。
本页介绍 Kumo 的一些关键无障碍特性,以及你需要在库之外做哪些补充,以确保你的应用对所有人都可访问。
键盘导航
Kumo 组件遵循 WAI-ARIA Authoring Practices,开箱即用地提供基础的键盘无障碍支持。这对于使用指针设备有困难的用户至关重要,对于偏好使用键盘或其他输入方式导航的用户同样重要。
许多组件支持方向键、字母数字键、Home、End、Enter 和 Esc。
焦点管理
Kumo 组件会在用户交互后自动管理焦点。此外,一些组件提供 initialFocus 和 finalFocus 等属性,用于配置焦点管理。
虽然 Kumo 组件负责管理焦点,但以视觉方式呈现焦点状态是开发者的责任。这通常通过为 :focus 或 :focus-visible CSS 伪类设置样式来实现。WCAG 提供了关于焦点外观的指南。
颜色对比度
为元素设置样式时,确保每个前景元素与其对应背景元素之间的颜色对比度达到最低要求非常重要。除非你的应用对遵循现行标准有严格要求,否则建议采用 APCA,它预计将成为 WCAG 3 的新标准。
无障碍标签
Kumo 提供了 Field、Input 和 Checkbox 等组件来自动关联表单控件。此外,你还可以使用原生 HTML <label> 元素为相应的输入框提供上下文。
大多数应用都会呈现需要无障碍名称的自定义控件,这可以通过 alt、aria-label 或 aria-labelledby 等标记特性来提供。WAI-ARIA 提供了关于为自定义控件提供无障碍名称的指南。
测试
基于 Base UI 构建的 Kumo 组件在广泛的浏览器、设备、平台、屏幕阅读器和环境中进行了测试,以确保在不同用户场景下的无障碍性。
如需了解 Base UI 提供的无障碍特性的详细信息,请访问官方无障碍文档。