# 无障碍功能

> 了解这个无障碍 React 颜色选择器如何处理键盘操作、屏幕阅读器、焦点、强制颜色、减少动态效果和文字对比度。

Source: https://chroma-panel.jscrate.dev/zh/react/overview/accessibility
Last updated: 2026-09-21

凡是浏览器本身已经处理得当的地方，选择器都直接使用原生输入控件，再在外面补上标签、焦点处理和选中状态。下面几节会分清哪些由组件包负责，哪些需要你自己添加标签。

每一条颜色轴都是一个真实的 `<input type="range">`，只是在视觉上隐藏了。因此键盘操作和屏幕阅读器支持都来自浏览器本身，而不是重新实现一遍。

## 你能得到什么

- 方向键逐步调整。和任何原生滑块一样，Page Up 和 Page Down 调整幅度更大，Home 和 End 直接跳到两端。
- 模式切换器是一个使用 roving tab stop 的 tablist，详见 [ModeToolbar](https://chroma-panel.jscrate.dev/zh/react/components/mode-toolbar)。
- 数值以文字形式朗读，例如「色相 210 度」，而不是只报一个数字。
- 弹出层会锁定焦点，按 Escape 关闭，并把焦点交还给触发器。
- 色块都是带可访问名称的按钮。
- `ColorInput` 接受 `id`，让你自己的 `<label htmlFor>` 可以指向它的触发器；没有可见标签时，还可以传 `aria-label`。详见[表单](https://chroma-panel.jscrate.dev/zh/react/handbook/forms)。
- `prefers-reduced-motion` 和强制颜色模式都已处理。

## 用于自定义 UI 的辅助函数

```ts
import { readableTextColor, contrastRatio } from "chroma-panel";

readableTextColor("#001f3f"); // '#ffffff'
contrastRatio("#fff", "#001f3f"); // WCAG 2.1 ratio
```

`readableTextColor` 使用 APCA，而不是简单的亮度计算。遇到中等蓝色时它会选白色，旧方法则会错误地选黑色。

更多内容见[对比度](https://chroma-panel.jscrate.dev/zh/react/utils/contrast)。

## 数据属性

面板通过 `data-cp-*` 属性暴露自身状态，方便你用 CSS 选中它。可以配合[主题](https://chroma-panel.jscrate.dev/zh/react/handbook/theming)中的 CSS 变量一起使用。

| Attribute | Description |
| --- | --- |
| `data-cp-channel` | The channel a slider edits. |
| `data-cp-collapsed` | Present while the panel is collapsed. |
| `data-cp-copy-status` | The copy control state: `idle`, `copied` or `error`. |
| `data-cp-disabled` | Present when the panel is disabled. |
| `data-cp-dragging` | Present while a pointer drag is in progress. |
| `data-cp-fade` | Which edge of a scroll port has more content. |
| `data-cp-large` | Present on the larger pointer target sizes. |
| `data-cp-light` | Present when the current color is light. |
| `data-cp-modes` | How many mode tabs are showing. |
| `data-cp-open` | Present while the popover is open. |
| `data-cp-size` | The panel size: `default` or `expanded`. |
| `data-cp-theme` | The resolved theme: `dark` or `light`. |
| `data-cp-variant` | The swatch variant. |