Accessibility
@cloudflare/kumo

无障碍是 Kumo 的头等大事。Kumo 基于 Base UI 构建,其组件处理了许多复杂的无障碍细节,包括 ARIA 属性、role 属性、指针交互、键盘导航和焦点管理。目标是开箱即用地提供无障碍的用户体验,并提供直观的 API 供配置。

本页重点介绍 Kumo 的一些关键无障碍特性,以及你需要对库进行补充的一些方面,以确保你的应用对每个人都是无障碍的。

键盘导航

Kumo 组件遵循 WAI-ARIA 创作实践,开箱即用地提供基本的键盘无障碍支持。这对难以使用指针设备的用户至关重要,同时对偏好使用键盘或其他输入方式导航的用户同样重要。

许多组件支持方向键、字母数字键、HomeEndEnterEsc

焦点管理

Kumo 组件在用户交互后会自动管理焦点。此外,一些组件提供 initialFocusfinalFocus 等 props 来配置焦点管理。

Kumo 组件负责管理焦点,但视觉上显示焦点位置是开发者的职责。这通常通过样式化 :focus:focus-visible CSS 伪类来实现。WCAG 提供了关于焦点外观的指南

颜色对比度

在给元素设置样式时,必须满足每个前景元素与其对应背景元素之间的最低颜色对比度要求。除非你的应用对符合现行标准有严格要求,否则建议遵循 APCA,它有望成为 WCAG 3 中的新标准。

无障碍标签

Kumo 提供了 FieldInputCheckbox 等组件,自动关联表单控件。此外,你可以使用原生 HTML <label> 元素为对应的输入提供上下文。

大多数应用会提供需要无障碍名称的自定义控件,这些名称通过 altaria-labelaria-labelledby 等标记特性提供。WAI-ARIA 提供了为自定义控件提供无障碍名称的指南

测试

Kumo 组件基于 Base UI 构建,在广泛的浏览器、设备、平台、屏幕阅读器和环境中经过测试,以确保在不同用户场景下的无障碍性。


有关 Base UI 提供的无障碍功能的更详细信息,请访问官方无障碍文档