---
url: /zh/typescript/view-engine/accessibility.md
description: 视图引擎的界面怎样满足 WCAG 2.2 AA：怎样评估的、键盘和读屏用户怎样使用每个界面、宿主要负责什么，以及已知的缺口。
---

# 可访问性

本页是视图引擎界面（记录与分析工作台、仪表盘和两种嵌入，即 `/ui` 入口）对照 [WCAG 2.2](https://www.w3.org/TR/WCAG22/) A 级和 AA 级的可访问性符合性声明：

| 支持 | 部分支持 | 不支持 | 不适用 |
| ---: | ---: | ---: | ---: |
| 41 | 0 | 0 | 14 |

这是一次自我评估，不是第三方审计，读屏软件也只做过抽查：见[怎样评估的](#how-it-was-evaluated)和[已知缺口](#known-gaps)。

## 宿主负责什么 {#what-the-host-owns}

引擎总是位于宿主的页面里，有些准则归宿主负责：

* 页面标题（2.4.2）、页面语言（3.1.1）、跳到内容的链接、站点导航（2.4.5）、登录（3.3.8），以及任何帮助机制（3.2.6）；
* 宿主覆盖的每种颜色的对比度（[主题](./theming#对比度由覆盖的人负责)）；
* 一个 `main` 地标：自己有 `main` 的页面给工作台传 `landmark="region"`。

下文大多数“不适用”都是因为这个原因。

## 怎样评估的 {#how-it-was-evaluated}

* **只用键盘**：每个核心任务都用真实的按键走了一遍，包括 Tab、Shift+Tab、方向键、Enter、空格、Esc 和组合键，在 Chromium 和 WebKit 中，从桌面宽度一直到 320 像素。每次按键之后，记录焦点在哪个元素上、是否画出了焦点指示且完全可见，以及实时区域播报了什么。
* **读屏**：名称、角色、状态和结构从浏览器自己的可访问性树和 ARIA 快照中读取，每次按键之后还读取实时区域。它们说明的是应当播报什么，而不是读屏软件实际怎样播报。一位维护者用 VoiceOver 手动抽查了两个场景，都通过了。
* **自动检查**：每个 Storybook 用例在交互之后运行 axe，有违规就失败；单元测试有自己的 axe 断言；内置主题的对比度由对比度矩阵测试守住，覆盖两种明暗和每个预设。
* **强制颜色、减少动态效果和文本间距**：在强制颜色下走查了菜单、选中、当前视图和焦点；减少动态效果会停住动画；WCAG 的文本间距不会截断任何文本。

## 逐个界面使用 {#working-through-each-surface}

**记录工作台。** 视图列表每个视图一个 Tab 停靠点。表头行是一个 Tab 停靠点：←/→ 在列之间移动，Enter 排序，Shift+Enter 增加一个排序键，Alt+←/→ 调整列宽，列设置里也可以用数字设置列宽。数据行是一个 Tab 停靠点：↑/↓ 在行之间移动，Enter 打开记录。分页是一个有名字的导航，每次查询之后都会播报结果总数。

**分析。** 打开分析会把焦点移进去；维度和指标从菜单中添加，每次变化都会播报分组的数量。图表类型是一组单选按钮。图表的图形只能用指针操作，所以表格布局是键盘完成同样后续操作的途径：一行上的 Enter 对应它的分组，Shift+Enter 对应一个区间。每个图表都是一张有名字的图像，带一句话的摘要和一个只供读屏的数据表。

**仪表盘。** 在面板的拖动柄上按 Enter 拿起面板；方向键移动它，Shift+方向键调整大小，Enter 放下，Esc 放回原处。面板的菜单也可以每点一次移动或调整一步，供不能拖动的指针使用。筛选变化后，仪表盘会说明更新了多少个面板、失败了多少个。

**操作。** 禁用的操作仍可获得焦点，获得焦点时说明原因。表单的必填字段会被播报，留空提交时焦点移到那个字段上。选择栏是一个 Tab 停靠点，用方向键在它的操作之间移动。一次执行的开始和结果用一句话播报，并带上刷新后的数量。

**嵌入。** 静态嵌入只提供阅读的控件；交互式嵌入的名称和播报与工作台相同。两个嵌入的地标按它们各自的视图命名。

**整体而言。**

* 焦点始终可见：控件有一种指示，菜单中键盘所在的项内有一个标记，与周围的对比度都在 3:1 以上。
* 没有陷阱：模态对话框保持焦点，Esc 关闭它们并把焦点交还给打开它们的元素。
* 没有单字符快捷键；拖动柄、行和手柄的按键写在它们的名称或描述里。
* 界面把措辞的语言写成 `lang`，写在它自己和每个弹层上，所以英文页面上的中文措辞会按中文朗读。
* 减少动态效果时动画停止；图表也遵循这个设置。

## 已知缺口 {#known-gaps}

* **完整的人工读屏走查**，即用 VoiceOver 配 Safari、NVDA 配 Firefox 或 Chrome 走完核心任务，除了抽查之外还没有做过。它的分步检查清单在包的设计文档中：[读屏走查](https://github.com/Ahoo-Wang/Wow/blob/main/typescript/wow-view-engine/docs/design/screen-reader-walkthrough.md)。
* **被截断的文本**在鼠标悬停时会在提示中完整显示，但键盘获得焦点时不会；读屏会从可访问名称中读出完整文本。

## 逐条准则 {#criterion-by-criterion}

“支持”：满足。“不适用”：引擎没有这类内容，或者这件事归宿主负责。WCAG 2.2 删除了 4.1.1 解析。

### 1. 可感知 {#\_1-perceivable}

| 准则 | 级别 | 结果 | 说明 |
|---|---|---|---|
| 1.1.1 非文本内容 | A | 支持 | 只有图标的按钮都有名字（名字和提示用同一个字符串）；图表是有名字的 `role=img`，带一句摘要和一个数据表；面板中没有 `alt` 的图片使用面板的标题 |
| 1.2.1 仅音频和仅视频（预录制） | A | 不适用 | 没有音频或视频 |
| 1.2.2 字幕（预录制） | A | 不适用 | 同上 |
| 1.2.3 音频描述或媒体替代（预录制） | A | 不适用 | 同上 |
| 1.2.4 字幕（直播） | AA | 不适用 | 同上 |
| 1.2.5 音频描述（预录制） | AA | 不适用 | 同上 |
| 1.3.1 信息和关系 | A | 支持 | 表格使用 `th` 和 `rowheader`，表头按它的列命名，图表数据表有 `caption`；表单控件都有标签；有地标和两级标题；分组是有名字的 `group`；声明式操作表单的必填字段带 `aria-required`，描述为“必填” |
| 1.3.2 有意义的顺序 | A | 支持 | DOM 顺序就是阅读顺序 |
| 1.3.3 感官特征 | A | 支持 | 说明不依赖形状、位置或颜色 |
| 1.3.4 方向 | AA | 支持 | 不锁定方向 |
| 1.3.5 识别输入目的 | AA | 不适用 | 没有收集用户信息的输入 |
| 1.4.1 颜色的使用 | A | 支持 | 状态徽标带文字；涨跌带符号；序列有图例文字和数据表，还可以钉住图案 |
| 1.4.2 音频控制 | A | 不适用 | 没有音频 |
| 1.4.3 对比度（最低） | AA | 支持 | 每个内置预设在两种明暗下都通过对比度矩阵测试；宿主覆盖的颜色归宿主负责 |
| 1.4.4 调整文本大小 | AA | 支持 | 320px 宽（1280px 下 400% 缩放）时没有页面级的横向滚动 |
| 1.4.5 文本图像 | AA | 支持 | 图表中的文本是 SVG 文本；导出的图片是下载的文件 |
| 1.4.10 重排 | AA | 支持 | 320px 时没有页面横向滚动；数据表和图表在自己的框内滚动（二维内容的例外） |
| 1.4.11 非文本对比度 | AA | 支持 | 内置预设下，焦点环、行和卡片的焦点、菜单中键盘所在项的标记、边框和分隔线都 ≥3:1（由对比度矩阵和浏览器用例守住） |
| 1.4.12 文本间距 | AA | 支持 | 注入 WCAG 规定的行、字母、单词和段落间距后，没有文本被截断；20px 徽标中的字形保持完整 |
| 1.4.13 悬停或聚焦时的内容 | AA | 支持 | 提示在获得焦点时也会打开，Esc 关闭，可以悬停其上，不会自行消失；截断文本的完整文本提示也一样 |

### 2. 可操作 {#\_2-operable}

| 准则 | 级别 | 结果 | 说明 |
|---|---|---|---|
| 2.1.1 键盘 | A | 支持 | 每个核心任务都能只用键盘完成；图表的图形只能用指针操作，同样的操作在表格布局和筛选栏上可以用键盘完成 |
| 2.1.2 无键盘陷阱 | A | 支持 | 只有模态对话框保持焦点，Esc 可以离开 |
| 2.1.4 字符键快捷键 | A | 支持 | 没有单字符快捷键；每个按键只作用于获得焦点的控件 |
| 2.2.1 可调整的时间限制 | A | 不适用 | 没有时间限制 |
| 2.2.2 暂停、停止、隐藏 | A | 支持 | 自动刷新由用户打开，随时可以关闭 |
| 2.3.1 三次闪烁或低于阈值 | A | 支持 | 没有闪烁 |
| 2.4.1 跳过区块 | A | 支持 | 有名字的地标和标题；跳到内容的链接归宿主 |
| 2.4.2 页面标题 | A | 不适用 | 页面标题归宿主 |
| 2.4.3 焦点顺序 | A | 支持 | 控件消失时焦点从不掉到页面顶部；交接的视图、新增的面板和单日日期都把焦点放在合理的位置；添加筛选条件后按 Esc 落到它的值输入框 |
| 2.4.4 链接目的（上下文中） | A | 支持 | 面板中的链接按它们的文本命名，并说明会在新标签页中打开 |
| 2.4.5 多种方式 | AA | 不适用 | 视图引擎不是一组页面；站点导航归宿主 |
| 2.4.6 标题和标签 | AA | 支持 | 视图、面板和区域的名称说明它们是什么；列标题按它的列命名；管理行的按钮组按它的视图命名 |
| 2.4.7 焦点可见 | AA | 支持 | 控件有一种焦点指示，菜单项内有一个 `--ring` 标记，两种主题下都 ≥3:1；强制颜色下焦点、菜单项和选中都有框 |
| 2.4.11 焦点不被遮挡（最低） | AA | 支持 | 粘性的表头和表尾不会遮住焦点；比内容窄的列会裁切内容，复制按钮在它自己的单元格里保持完整 |
| 2.5.1 指针手势 | A | 支持 | 没有哪个多点或路径手势是唯一的方式：区间可以用两次点击或键盘选择 |
| 2.5.2 指针取消 | A | 支持 | 按钮在松开时生效；拖动后在原处放下即取消 |
| 2.5.3 名称中包含标签 | A | 支持 | 可访问名称包含可见文字（“订单”→“按订单升序排序”） |
| 2.5.4 动作驱动 | A | 不适用 | 没有由设备动作触发的东西 |
| 2.5.7 拖动动作 | AA | 支持 | 每个有序列表的手柄点击后打开一个位置菜单；面板的 ⋯ 每点一次移动或调整一步；列宽可以在列设置里输入 |
| 2.5.8 目标尺寸（最低） | AA | 支持 | 控件 ≥24px，或满足间距例外；8px 的列宽拖动区域满足等效功能例外，列设置中的宽度输入框提供同样的功能 |

### 3. 可理解 {#\_3-understandable}

| 准则 | 级别 | 结果 | 说明 |
|---|---|---|---|
| 3.1.1 页面语言 | A | 不适用 | 页面的 `lang` 归宿主 |
| 3.1.2 部分内容的语言 | AA | 支持 | 界面及其弹层把措辞目录的语言写成 `lang`（宿主可以设置自己的）；第三方部件的措辞也来自目录；声明式操作的开始和结果用界面的措辞播报，包括通过属性传入的 |
| 3.2.1 获得焦点时 | A | 支持 | 获得焦点只会打开提示 |
| 3.2.2 输入时 | A | 支持 | 记录视图的筛选等待“应用”；分析托盘的自动运行是一个可见的开关；改变一个值会更新结果，但不改变上下文 |
| 3.2.3 一致的导航 | AA | 支持 | 三个工作台共用一个框架 |
| 3.2.4 一致的标识 | AA | 支持 | 一个功能一个名字（所有名字来自同一个措辞目录）；每个拖动柄都是同一个组件 |
| 3.2.6 一致的帮助 | A | 不适用 | 视图引擎不提供帮助机制；宿主添加的帮助由宿主负责一致地放置 |
| 3.3.1 错误识别 | A | 支持 | 不成立的条件在原处标出（`aria-invalid` 加文字）；查询失败是 `role=alert` |
| 3.3.2 标签或说明 | A | 支持 | 每个输入都有标签，规则写在控件旁边；声明式操作表单说明哪些字段必填，留空一个时按下提交按钮，会说明是哪个并跳到那里 |
| 3.3.3 错误建议 | AA | 支持 | 错误说明怎样修正（“1 到 100 之间的整数”） |
| 3.3.4 错误预防（法律、财务、数据） | AA | 支持 | 删除视图前先询问，删除系统视图时说明所有人都会失去它；更新共享视图前先询问；移除面板可以撤销；离开未保存的编辑时会询问 |
| 3.3.7 冗余输入 | A | 支持 | 另存为从当前名称开始，后续操作带上选中的分组；没有什么要求输入同样的内容两次 |
| 3.3.8 无障碍认证（最低） | AA | 不适用 | 视图引擎没有登录 |

### 4. 健壮 {#\_4-robust}

| 准则 | 级别 | 结果 | 说明 |
|---|---|---|---|
| 4.1.2 名称、角色、值 | A | 支持 | Chromium 的可访问性树中没有未命名的交互控件；状态通过 `aria-pressed`、`aria-expanded`、`aria-sort`、`aria-checked` 等暴露 |
| 4.1.3 状态消息 | AA | 支持 | 结果、错误、区间选择、排布、移动和列宽都会播报；仪表盘会说明一次筛选变化的结果，包括失败的面板；撤销提示说明一次编辑做了什么，撤销之后说明已恢复；声明式操作的开始和结果会播报，结果在前、刷新后的数量在后，合为一句 |