无障碍功能

了解树形视图如何实现无障碍功能和指南，包括遵循国际标准的键盘导航。

指南

通用的无障碍一致性指南包括

• 全球公认标准：WCAG
• 美国
  • ADA - 美国司法部
  • Section 508 - 美国联邦机构
• 欧洲：EAA (欧洲无障碍法案)

WCAG 2.1 有三个一致性级别：A、AA 和 AAA。AA 级别超出了无障碍的基本标准，是大多数组织的常见目标，因此这是我们旨在支持的级别。

WAI-ARIA 创作实践提供了关于如何优化树形视图的无障碍功能的宝贵信息。

键盘交互

按键	描述
Enter	激活聚焦的项目。 如果项目有子项，则展开或折叠 如果项目没有子项，则选中它
向上箭头	将焦点移动到上一个可聚焦项目，而不展开或折叠它
向下箭头	将焦点移动到下一个可聚焦项目，而不展开或折叠它
向右箭头 + RTL 关闭 向左箭头 + RTL 开启	如果焦点在折叠的项目上，则展开项目而不移动焦点 如果焦点在展开的项目上，则将焦点移动到第一个子项 如果焦点在末尾项目上，则不执行任何操作
向左箭头 + RTL 关闭 向右箭头 RTL 开启	如果焦点在展开的项目上，则折叠该项目 如果焦点在具有父项的折叠项目上，则将焦点移动到其父项 如果焦点在根项目上，则不执行任何操作
Home	聚焦树中的第一个项目
End	聚焦树中的最后一个项目
*	展开与聚焦项目处于同一级别的所有兄弟项目，而不移动焦点

支持单字符的预输入。当键入字符时，焦点会移动到标签以键入字符开头的下一个项目。

选择

树形视图支持单选和多选。要了解有关选择 API 的更多信息，请访问 简单树形视图 或 丰富树形视图 的专用页面。

要了解更多关于选择和焦点之间区别的信息，您可以参考 WAI-ARIA 创作实践指南。

在单选树上

当单选树接收焦点时

• 如果在树接收焦点时未选择任何项目，则焦点设置在第一个项目上。
• 如果在树接收焦点之前已选择项目，则焦点设置在选定的项目上。

按键	描述
空格键	选择聚焦的项目。
Enter	如果项目没有子项，则选择聚焦的项目。

在多选树上

当多选树接收焦点时

• 如果在树接收焦点时未选择任何项目，则焦点设置在第一个项目上。
• 如果在树接收焦点之前已选择一个或多个项目，则焦点设置在
  • 如果是首次渲染，则设置在第一个选定的项目上
  • 否则设置在最后选择的项目上

按键	描述
空格键	切换聚焦项目的选择状态。
Shift+向上箭头	移动焦点并切换上一个项目的选择状态。
Shift+向下箭头	移动焦点并切换下一个项目的选择状态。
Ctrl+Shift+Home	选择聚焦的项目以及直到第一个项目的所有项目。
Ctrl+Shift+End	选择聚焦的项目以及直到最后一个项目的所有项目。
Ctrl+A	选择所有项目。