【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴（有展开／折叠功能的模块）

手风琴是个垂直罗列的元素组合，例如标签或缩略图，这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。手风琴一般被用来减少页面滚动，当在单个页面中呈现很多内容模块时。

通过以下术语来理解手风琴：

手风琴标题：

呈现内容模块的标签或缩略图，同时也用来展开内容，在某些实现中，也用来隐藏内容模块。

手风琴面板：

与手风琴标题相关联的内容

在某些手风琴中，总会有其他元素与手风琴标题视觉临近。例如，每个手风琴标题都伴随一个菜单按钮来提供每个模块的访问操作。而且，在某些案例中，隐藏内容的标识可能具有一样的视觉特性。

示例： 手风琴示例：演示把一个表单分成三部分，并使用手风琴导航一次展开其中一部分

键盘交互：

• Enter 或 Space:
  • 当焦点在折叠状态的手风琴标题上，使用 Enter 或 Space 键可以展开相关联面板。如果实现只允许一个面板被展开，如果另一个面板被展开，折叠这个面板。
  • 当焦点在展开状态的手风琴标题上，如果实现支持折叠，折叠该面板。某些实现总是只有一个面板展开，并且只允许一个面板展开，这样，他们不需要支持折叠功能。
• Down Arrow (可选地): 如果焦点在一个手风琴标题上，使用下光标可将焦点移动到下一个手风琴标题上。如果焦点在最后一个手风琴标题上，不响应下光标的操作或将焦点移动到手风琴的第一个标题。
• Up Arrow (可选地): 如果焦点在一个手风琴标题上，使用上光标键可将焦点移动到下一个手风琴标题上，不响应下光标的操作或将焦点移动到手风琴的最后一个标题。
• Home (可选地): 当焦点在手风琴的标题，将焦点移到手风琴的第一个标题
• End (可选地): 当焦点在手风琴的标题，将焦点移动到手风琴最后一个标题
• Control + Page Down (可选地): 如果焦点在手风琴面板内，将焦点移动到面板标题上。如果焦点在手风琴标题上，将焦点移动到前一个手风琴标题。如果焦点在第一个手风琴标题上，不响应 Control + Page Up 或将焦点移动到手风琴的最后一个标题。
• Control + Page Up (可选地): 如果焦点在手风琴面板内，将焦点移动到该面板的标题。如果焦点在手风琴标题，将焦点移动到手风琴前一个标题。如果焦点在第一个手风琴标题，允许不响应操作或将焦点移动到手风琴的最后一个标题

键盘交互：

• 每个手风琴标题包含在一个角色为 button 的元素内。
• 每个手风琴标题 button 都被具有 heading 角色的元素包裹，且该元素设置了合适的 aria-level 值，适配页面的信息架构。
  • 如果原生语言具有默认 heading 和 aria-level 元素，例如HTML标题标签，可以使用原生语言元素。
  • button 元素是 heading 元素内的唯一元素。也就是说，如果有其他视觉一致性元素，他们不能被包含在 heading 元素中。
• 如果与手风琴标题关联的手风琴面板是展开的，标题的 button 元素的 aria-expanded 属性设置为 true。如果面板折叠的，aria-expanded属性设置为 false。
• 手风琴标题的 button 元素 aria-controls 设置为包含手风琴面板的内容元素的ID。
• 如果与手风琴标题关联的手风琴面板是展开的，如果不允许该面板折叠，那标题的 button 元素的 aria-disabled 设置为 true。
• 可选地，每个面板容器的元素，都有 region 角色，且使用 aria-labelledby值索引控制面板呈现的按钮。
  • 避免在创建路标 region 扩展的情况下，使用 region 角色，例如在一个包含超过6个面板的手风琴中，可能会同时展开。
  • 当面板包含标题元素或嵌套手风琴时，region 角色对屏幕阅读器用户对于结构的感知特别有帮助。

警告框

alert 是一个呈现简短、重要信息的元素，以一种引起用户注意而不打断用户任务的方式。动态渲染的警告，会被大多数屏幕阅读器自动朗读，在某些操作系统中，警告会触发警告提示音。与此同时，需要注意的是屏幕阅读器不会告知用户在加载完成前已经存在的警告。

因为警告是用来提供重要和潜在的时间敏感信息，而不会打扰用户继续工作，重要的一点是它不会影响键盘焦点。alert dialog 为那些必须打断工作流的情况设计的。

同样重要的是，避免设计自动消失的警告。一个消失太快的警告，可能导致不符合 WCAG 2.0 success criterion 2.2.3。另一个重要的设计考虑是警告引起的终端频率。频繁打断会降低视障和认知障碍用户的可用性，这让满足 WCAG 2.0 success criterion 2.2.4 的需求更加困难。

示例

警告框示例

键盘交互

一个警告框（WAI-ARIA 活动区域）不需要任何键盘交互。

WAI-ARIA 角色，状态和属性

该组件的角色为 alert。

警告和消息对话框

一个警告对话框是一个模态对话框，可中断用户的工作流程，以传达一个重要的信息，并获得响应。包含操作确认提示和错误消息确认。alertdialog 角色能够让辅助技术和浏览器从其他对话框中区分出警告对话框，这样就能给予警告对话框特殊对待，例如播放一个系统警告提示音。

示例

issue 101 是这个模式的一个正在开发的实现案例。

键盘交互

请参阅 modal dialog pattern 键盘交互部分。

WAI-ARIA 角色，状态和属性

• 包含对话框所有元素的元素，包括警告信息和任何对话框按钮，具有 alertdialog 角色。
• 角色设置为 alertdialog 的元素拥有以下情况中的一种：
  • 如果对话框具有一个可见标题，具有一个 aria-labelledby 索引包含具有对话框标题的元素。
  • aria-label 的值，如果对话框没有可见的标题。
• 角色为 alertdialog 的元素，具有 aria-describedby 属性来索引包含警告信息的元素。

对话框（模态）

对话框 是叠加在主窗口或另一个对话框上的窗口。Window下的模态对话框是惰性的。也就是说，用户不能与对话框之外的内容进行交互。当前活跃窗口之外的非活跃内容，一般是模糊不清或灰暗的，这样就让这些内容很难被辨别，并且在某些实现中，如果试图与非活跃内容进行交互将导致对话框被关闭。

与非模态对话框类型类似，模态对话框限制了TAB顺序。也就是说，Tab 和 Shift + Tab 不会把焦点移出对话框。但是，与非模态对话框不同的是，模态对话框没有提供在不关闭当前对话框的情况下，将键盘焦点移出对话框窗口的方法。

alertdialog 角色是特殊情况的对话框角色，被专门设计用来将用户的注意力转移到简短、重要的信息上。其用法被描述在 警告对话框设置模块。

示例

模态对话框例子

键盘交互

在以下的描述中，术语 tabbable element 是指 tabindex 值大于等于0的元素。注意：强烈不建议使用大于0的值。

• 当对话框被打开时，焦点移动到对话框内的元素。请参阅下面关于初始焦点处理的注释。
• Tab:
  • 将焦点移到对话框内的下一个可聚焦元素。
  • 如果焦点是最后一个元素，将焦点移动到对话框内的第一个可聚焦元素。
• Shift + Tab:
  • 将焦点移到对话框内的上一个可聚焦元素。
  • 如果焦点是在第一个元素，将焦点移动到对话框内的最后一个可聚焦元素。
• Escape: 关闭对话框。

NOTE

1. 当对话框被打开时，根据内容的性质和大小放置焦点。
   • 在任何情况下，焦点都应该移动到对话框中的一个元素上。
   • 除非建议某个操作的情况，焦点应该被初始设置在第一个可聚焦的元素上。
   • 如果对话框里面的内容非常多，聚焦第一个交互元素会导致起始内容滚出视窗，建议给对话框顶部的静态元素添加 tabindex="-1"
   • 如果对话框内容是一个不容易逆转的流程的最后一步，例如删除数据或者完成资金交易，建议将焦点设置在最小的破坏性操作上，特别是撤销比较困难或不可撤销的操作。通常这种情况下使用 警告对话框。
   • 如果对话框内容仅包含提供额外信息或是继续处理的交互，则建议将焦点设置为最有可能使用的元素上，例如 "OK" 或 "Continue" 按钮。
2. 当一个对话框关闭时，焦点返回到唤起该对话框的元素上，除了：
   • 唤起元素不复存在，此时，焦点被设置在逻辑工作流程中的另一个元素上。
   • 包含以下场景的工作流程设计，可以聚焦到一个更加符合逻辑的、不同的元素。
     1. 用户不太可能需要立即重新唤起对话框。
     2. 对话框中完成的任务与工作流程中的后续步骤直接相关。

     例如，网格包含一个具有用于添加行的按钮的相关工具条。 Add Row按钮打开一个提示输入行数的对话框。对话框关闭以后，焦点应该放在新增行的第一个单元格中。

3. 强烈建议在所有对话框中的Tab序列中，包含一个具有 button 角色的可见元素来关闭对话框，例如一个关闭图标，或者取消按钮。

WAI-ARIA 角色，状态和属性

• 作为对话框容器的元素具有 dialog 角色。
• 需要操作对话框的所有元素都是 dialog 角色元素的后代。
• 对话框容器元素的 aria-modal 被设置为 true。
• 该对话框包括：
  • aria-labelledby 属性的值指向可见的对话框标题。
  • 标签由 aria-label 属性指定。
• 可选的，aria-describedby 属性被设置在具有 dialog 角色的元素上，指明对话框中的哪些元素包含描述对话框的主要目的或信息的内容。指定描述元素，当对话框打开时，能够让屏幕阅读器在朗读对话框标题和初始聚焦元素的同时，朗读该描述。

NOTE

• 通过将 aria-modal 设置为 true，将对话框标记为模态对话框，可以防止某些辅助技术用户感知到对话框外的内容，如果一个对话框被标记为模态对话框，但对其他用户来说又不表现为模态对话框，这些辅助技术的用户将会得到不好的体验。所以， 以下两点同时出现时，标记为模态对话框：
  1. 应用程序代码防止所有用户以任何方式和对话框外的元素进行交互。
  2. 视觉样式模糊了对话框外的内容。
• ARIA1.1中引入的 aria-modal 属性替代了 aria-hidden，为了告知辅助技术对话框的内容是不可交互的。然而，但传统对话框的实现中，aria-hidden被用来让对话框外的内容变得让辅助技术用户不可访问，更重要的是：
  1. 在每个包含无效内容的元素上都将 aria-hidden 设置为 true。
  2. 对话框元素不是任何 aria-hidden 为 true 的元素的后代。

选项列表

listbox 控件呈现了一个选项列表，并允许用户选择一个或多个。允许选择一个选项的列表框是一个单选列表框;允许选择多个选项的列表框是一个多选列表框。

当屏幕阅读器呈现一个列表框，可能会渲染出其名称、状态和每个选项在列表中的位置。选项的名称是一个由浏览器计算得到的字符串，一般来自选项元素的内容。作为一个平面字符串（flat string），名称不包含任何语义信息。因此，如果选项包含一个语义元素，例如一个标题，屏幕阅读器用户不会访问到该语义。另外，listbox角色传递给辅助技术的交互模型，不支持选项内元素的交互。因为listbox组件的这些特性，它并没有提供可访问方式来呈现交互元素的列表，例如链接、按钮或复选框。为了呈现这些交互元素的列表，参见 grid。

为了让屏幕阅读器用户容易感知和理解，避免使用长选项名称。当选项被朗读时，选项的整体名称作为一个独立语音单元被朗读。当一次按键操作就朗读太多的信息，将会很难理解。长的名称会增加朗读中断的发生，而抑制信息的感知，因为用户一般不得不重新朗读整个选项。而且，如果用户不理解说了什么，在listbox组件中，屏幕阅读器用户很难实现按字、词、短语朗读。

选项集中每个选项名称使用相同的单词或短语开头也可以显著降低键盘和屏幕阅读器用户的可用性。滚动列表来找到特定选项，对屏幕阅读器用户来说非常费时，因为他们在听到每个选项的不同之前，都必须听到重复的单词或短语。例如，如果一个选择城市的列表框，其选项的每个城市名称前面都有国家名称，如果每个国家都列出了很多城市，屏幕阅读器用户将要不得不在听到城市名称之前听到国家名称。在这种情况下，最好有2个列表框，一个用于国家，一个用于城市。

键盘交互

对于一个垂直向的列表框：

• 当一个单选列表框接收到焦点：
  • 如果在列表框接收焦点前，没有选择任何选项，第一个选项获得焦点。可选的，第一个选项可以自动选择。
  • 如果列表框获得焦点之前选择了一个选项，焦点设置在所选择的选项上。
• 当一个多选列表框接收到焦点：
  • 如果列表框接收焦点之前没有选择任何选项，焦点设置在第一个选项并且选择状态不会自动改变。
  • 如果列表框接收焦点之前选择一个或多个选项，焦点设置在已选择选项的第一个。
• Down Arrow: 移动焦点到上一个选项。可选地，在一个单选列表框中，选择也可以跟随焦点移动。
• Up Arrow: 将焦点移到前一个选项。通常，一个单选列表框，选择也可以跟随焦点移动。
• Home (可选地): 将焦点移到第一个选项。通常，一个单选列表框，选择也可以跟随焦点移动。对于超过5个选项的列表，强烈建议支持此键。
• End (可选地): 将焦点移到最后一个选项。通常，一个单选列表框，选择也可以跟随焦点移动。对于超过5个选项的列表，强烈建议支持此键。
• 建议所有列表框都支持键入提示。尤其是那些拥有超过七个选项的列表：
  • 键入字符：焦点移动到名称以键入字符开头的下一个项目上。
  • 快速键入多个字符：焦点移动到名称以键入字符串开头的下一个项目上。
• 多选：开发者可以实现以下两种交互模型中的一种来支持多项选择：一个是推荐模型，当导航列表时不需要用户按住修饰键，例如 Shift 或Control ，或一种替代模型，当导航时需要用户按住修饰键，防止丢失选择状态。
  • 推荐的选择模型 - 没有必要按住辅助键：
    • Space: 改变焦点选项的选择状态。
    • Shift + Down Arrow (可选地): 将焦点移动到下一个选中项并且切换选项的选中状态。
    • Shift + Up Arrow (可选地): 将焦点移到前一选中项并且切换选项的选中状态。
    • Shift + Space (可选地): 从最近选中的项目中选择相邻的元素聚焦。
    • Control + Shift + Home (可选地): 选择从聚焦的选项到第一个选项的所有的选项。
    • Control + Shift + End (可选地): 选择从聚焦的选项到最后一个选项的所有选项。
    • Control + A (可选地): 选择列表中的所有选项。或者，如果选择了所有选项，它也可能取消选择所有选项。
  • 替代选择模型 —— 在不按住 Shift 或 Control 修饰键移动焦点不会取消选择所有已选择节点，除非当前聚焦节点：
    • Shift + Down Arrow: 将焦点移到下一个选项并切换选项的选择状态。
    • Shift + Up Arrow: 将焦点移到上一个选项并切换选项的选择状态。
    • Control + Down Arrow: 将焦点移到下一个选项但不改变选项的选择状态。
    • Control + Up Arrow: 将焦点移到上一个选项但不改变选项的选择状态。
    • Control + Space: 改变焦点选项的选择状态。
    • Shift + Space (可选地): 从最近选中的项目中选择相邻的元素聚焦。
    • Control + Shift + Home (可选地): 选择从聚焦的选项到第一个选项的所有的选项。
    • Control + Shift + End (可选地): 选择从聚焦的选项到最后一个选项的所有选项。
    • Control + A (可选地): 选择列表中的所有选项。或者，如果选择了所有选项，它也可能取消选择所有选项。

NOTE

1. DOM焦点（活跃元素）与选择状态有功能上的区别。更多细节，请参阅 this description of differences between focus and selection。
2. listbox 角色支持 aria-activedescendant 属性，当通过键盘导航（keybord navigation）时，它提供一种非传统方式在 treeitem 元素间移动DOM焦点。有关详细信息，请参阅 Managing Focus in Composites Using aria-activedescendant
3. 在单选列表框中，移动焦点可以选择性的取消先前选择选项的选择，并选择新聚焦的选项。这样的选择模型被称之为 "选择跟随焦点"。具有选择跟随焦点在某些情况下非常有用，但会严重降低其他情况中的可访问性。有关指南，请参阅 Deciding When to Make Selection Automatically Follow Focus。
4. 如果全选或取消全选是个重要功能，使用不同控件实现这些操作，例如 "全选" 和 "取消全选按钮"，会显著提升可用性。
5. 如果在一个列表框的选项水平排列：
   1. Down Arrow 行为和上面描述的 Right Arrow 一样，反之亦然。
   2. Up Arrow 行为和上面描述的 Left Arrow 一样，反之亦然。

WAI-ARIA 角色，状态和属性

• 包含或拥有所有列表框选项的元素拥有角色 listbox。
• 列表框中的每个选项都有 option 角色，并且是 listbox 角色元素的DOM后代，或者在列表框元素上使用 aria-owns 属性索引。
• 如果列表框不是另一个部件的一部分，那么它有一个可见的label通过 aria-labelledby 与有 listbox 角色的元素相关联。
• 单选列表框中，选中的选项 aria-selected 设置为 true。
• 如果列表框支持多选：
  • 角色 listbox 的元素将 aria-multiselectable 设置为 true。
  • 所有被选中的选项都将 aria-selected 设置为 true。
  • 所有未选择的选项都将 aria-selected 设置为 false。
• 如果可用选项的集合没有完整地显示在DOM中，而是根据用户滚动动态加载，它们的 aria-setsize 和 aria-posinset 适当设定。
• 如果选项是水平排列的， listbox 角色元素的 aria-orientation 设置为 horizontal。

选项卡

选项卡是一个内容分层模块的集合，被称为选项卡面板，一次只能显示内容的一个面板。每个选项卡面板都有相关联选项卡元素，当被激活，显示其相关联面板。选项卡元素列表被排列在当前显示面板的边缘，大多数情况在顶部边缘。

用于描述选项卡的术语包含：

选项卡或选项卡界面

选项卡元素组合和它们相关联的内容面板。

选项卡列表 被包含在 tablist 元素中的选项卡元素组合。

选项卡 选项卡列表中的一个元素，作为其中一个内容面板的标签，可以激活以显示对应的内容面板。

内容面板 包含与选项卡元素相关联内容的元素。

当初始化一个选项卡界面，一个选项卡面板默认显示，其相关联选项卡元素使用样式来标识其当前活跃。当用户激活一个别的选项卡元素，先前显示的内容面板被隐藏，与被激活选项卡元素相关联的内容面板变为可见，且选项卡元素被认为当前“活跃”。

示例

• 自动激活的选项卡: 一个选项卡小组件，当接收到焦点时选项卡标签会自动激活并显示对应的面板。
• 手动激活的选项卡: 一个选项卡小组件，用户通过点击 Space 或者 Enter来激活一个选项卡标签并显示它的面板。

键盘交互

对于选项卡列表：

• Tab: 当焦点进入选项卡列表，将焦点放置在当前活跃 选项卡 元素上。当选项卡列表包含焦点，移动焦点到当前页面 tab 序列中的选项卡列表外的下一个元素，一般情况是内容面板的第一个可聚焦元素，或内容面板本身。
• 当焦点在水平选项卡列表中的一个选项卡元素上时：
  • Left Arrow: 移动焦点到上一个选项卡元素；如果焦点在第一个选项卡元素上，移动焦点到最后一个选项卡元素。
  • Right Arrow: 移动焦点到下一个选项卡元素。如果焦点在最后一个选项卡元素上，移动焦点到第一个选项卡元素。
• 当焦点在水平或垂直选项卡列表中的一个选项卡元素上时：
  • Space or Enter: 如果获取焦点的选项卡不会自动激活，则激活该选项卡元素。
  • Home (可选地): 移动焦点到第一个选项卡元素上。
  • End (可选地): 移动焦点到最后一个选项卡元素上。
  • Shift + F10: 如果选项卡有关联的弹出菜单，则打开菜单。
  • Delete (可选地): 如果允许删除操作，删除（关闭）当前选项卡元素和其相关联选项卡面板。如果还有任何选项卡元素，将焦点设置在已关闭选项卡元素的下一个元素上，并且激活新聚焦的选项卡元素。

NOTE

1. 建议当选项卡元素接收到焦点时自动激活，只要它们相关的选项卡面板显示时没有明显的延迟。这种做法需要提前加载选项卡内容面板的内容。否则，自动激活标签会延缓焦点移动，这也会降低用户有效浏览选项卡列表的效率。更多相关指导，可以阅读 Deciding When to Make Selection Automatically Follow Focus
2. 如果选项卡列表中的选项卡元素垂直排列：
   1. Down Arrow 与 Right Arrow 执行一样的操作。
   2. Up Arrow 与 Left Arrow 执行一样的操作。
3. 如果选项卡列表是水平的，它不会监听 Down Arrow 或 Up Arrow 光标键，即使焦点在选项卡列表内，使用这些键仍会提供浏览器的常规滚动功能。

WAI-ARIA 角色，状态和属性

• 选项卡组合的容器元素具有角色 tablist。
• 每个选项卡元素都有 tab 角色，并且被包含在具有 tablistl 角色的元素里。
• 每个 选项卡 拥有角色 tabpanel。
• 每个具有 tab 角色的元素，具有 aria-controls 属性来索引其相关联 tabpanel 元素。
• 当前活跃 tab 元素具有 aria-selected 状态且设置为 true ，所有其他 tab 元素为 false。
• 每个具有角色 tabpanel 的元素有 aria-labelledby 属性，来索引其相关联 tab 元素。
• 如果一个 tab 元素有弹出菜单 ，则它的属性 aria-haspopup 设置为 true。
• 如果 tablist 元素是垂直排布，那么它应该设置 aria-orientation 属性值为 vertical。tablist 元素的 aria-orientation 默认值为horizontall。

工具提示

NOTE: 有关此设计模式的工作正在进行中，并记录于 issue 128。 如有问题，请在该问题中提供反馈。

Tooltip是元素获得键盘焦点或鼠标悬停在其上时，显示的与元素相关的信息弹窗。它通常在一小段延迟后出现，并在 Escape 按下或鼠标移出时消失。

Tooltip组件不会获得焦点。包含可聚焦元素的悬停可以使用非模态对话框模式实现。

示例

在 issue 127. 记录着工具提示示例的进展。

键盘交互

Escape: 关闭工具提示框。

NOTE

1. 当工具提示组件显示时，焦点停留在触发元素上。
2. 如果当触发元素获得焦点时唤起工具提示组件，当元素失去焦点时（onBlur），工具提示组件消失。如果鼠标移入唤起工具提示组件，则鼠标移出时消失。

WAI-ARIA 角色，状态和属性

• 作为工具提示组件容器的元素具有角色 tooltip。
• 触发工具提示组件的元素使用 aria-describedby 索引工具提示组件元素。

树视图

一个树视图呈现为一个分层列表。层次结构中的任何项目都可能有子项，并且有子项的元素，可以展开或折叠来显示或隐藏子项。例如，在使用树视图显示文件夹和文件的文件系统导航器中，代表文件夹的项目能够被展开文件夹中的内容，这些内容可能是文件、文件夹，或两者都有。

理解的树视图的一些术语包括：

节点 在树结构中的项目。 根结点

在树结构根部的节点;它可以具有一个或多个子节点，但不具有父节点。

子节点

有一个父节点的节点;任意节点如果不是根节点，那它就是一个子节点。

终端节点

不具有任何子节点的节点;一个终端节点要么是根节点要么是子节点。

父节点

有一个或多个子节点的节点。它可以是打开的（扩展）或关闭的（折叠）。

开节点

被展开以使其子节点可见的父节点。

闭节点

被折叠以使其子节点不可见的父节点。

当使用键盘来导航一个树结构，一个可见的键盘指示器告诉用户哪个节点被聚焦。如果树结构允许用户一个动作只选择一个项目，那么它被称为单选择树（single-select tree），而且被聚焦的项目还有一个被选中的状态。但是，在多选择树（multi-select trees）中，允许用户一次性选择多个项目，其选择状态与焦点无关。例如，在一个典型文件系统导航器中，用户可以一次性地移动焦点来选择任意数量的文件，例如复制或移动。为已选定和具有焦点的项目提供视觉上的设计区分，这非常重要。有关详细信息，请参阅 this description of differences between focus and selection。

示例

• 使用计算属性的文件目录树视图示例：一个文件选择树，示范浏览器支持基于DOM 结构自动计算的 aria-level, aria-posinset 和aria-setsize 属性。
• 使用声明属性的文件目录树视图示例: 文件选择树，示范如何明确地定义 aria-level, aria-posinset 和 aria-setsize 的值。
• 使用计算属性的导航树视图示例: 一个树结构，提供一组网页的导航并示范浏览器支持基于DOM 结构自动计算的 aria-level, aria-posinset和 aria-setsize 属性。
• 使用声明属性的导航树视图示例: 一个树结构，提供一组网页的导航并示范如何明确地定义 aria-level, aria-posinset 和 aria-setsize 的值。

键盘交互

对于垂直方向的树结构：

• 当单选树接收到焦点：
  • 如果树结构接收焦点之前没有任何节点被选择，则焦点设置在第一个节点上。
  • 如果树结构获得焦点之前有一个节点被选择，则焦点设置在被选择的节点上。
• 当多选树接收到焦点：
  • 如果树结构接收焦点之前没有任何一个节点被选择，则焦点设置在第一个节点上。
  • 如果树结构接收焦点之前有一个或多个节点被选择，则焦点设置在第一个被选择的节点上。
• Right arrow:
  • 当焦点在展开节点上，收起节点，焦点不移动。
  • 当焦点在展开节点上，将焦点移动第一个可聚焦节点上。
  • 当焦点在最后一个节点上，不响应事件。
• Left arrow:
  • 当焦点是在一个闭节点上，打开这个节点; 焦点不会移动。
  • 当焦点在一个同时也是终端节点或闭节点的子节点上，将焦点移动到它的父节点。
  • 当焦点一个是同时也是终端节点或闭节点的根节点上，什么也不做。
• Down Arrow: 不打开或关闭节点，将焦点移到下一个可聚焦的节点。
• Up Arrow: 不打开或关闭节点，将焦点移到上一个可聚焦的节点。
• Home: 不打开或关闭节点，将焦点移到树结构中的第一个可聚焦的节点。
• End: 不打开或关闭节点，将焦点移到树结构的最后一个可聚焦的节点。
• Enter: 激活一个节点，即执行其默认操作。对于父节点，一个可能的默认动作是打开或关闭节点。在一个选项不跟随焦点（见下面的注释）的单选树，默认的操作通常是选择焦点节点。 +建议所有的树结构支持提前键入，特别是对于包含超过7个根节点的树结构：
  • 键入一个字符：焦点移动到下一个名称以输入的字符开头的节点。
  • 快速连续键入多个字符：焦点移动到下一个名称以输入的字符串开头的节点。
• (可选地): 展开与当前节点在同一层级的所有兄弟节点。
• 在多选树中选择：作者可使用以下两种交互模式以支持多选：推荐的模式，用户正在浏览列表时不要求用户按住辅助键，如 Shift 或 Control ，或另一种模式，当浏览时要求按住辅助键，以避免丢失选择状态。
  • 推荐选择模型 - 当移动焦点时按住辅助键是没有必要的：
    • Space: 切换聚焦节点的选择状态。
    • Shift + Down Arrow (可选地): 将焦点移到下一个节点，并且切换下一个节点的选择状态。
    • Shift + Up Arrow (可选地): 将焦点移到上一个节点，并且切换上一个节点的选择状态。
    • Shift + Space (可选地): 选择从最后选择的节点到当前节点的相邻节点。
    • Control + Shift + Home (可选地): 选择具有焦点的节点以及它到第一个节点的所有节点。
    • Control + Shift + End (可选地): 选择具有焦点的节点以及它到最后一个节点的所有节点。
    • Control + A (可选地): 选择在树结构中的所有节点。根据需要，如果选择了所有的节点，它也可以取消选择所有节点。
  • 备选选择模型 - 移动焦点时不按住 Shift 或 Control 辅助键，会取消选中节点，聚焦的节点除外：
    • Shift + Down Arrow: 将焦点移到下一个节点，并且切换下一个节点的选择状态。
    • Shift + Up Arrow: 将焦点移到上一个节点，并且切换上一个节点的选择状态。
    • Control + Down Arrow: 不改变选择状态，将焦点移动到下一个节点。
    • Control + Up Arrow: 不改变选择状态，将焦点移动到前一个节点。
    • Control + Space: 切换聚焦节点的选择状态。
    • Shift + Space (可选地): 选择从最近选择的节点到当前节点的相邻节点。
    • Control + Shift + Home (可选地): 选择从焦点节点到第一个节点的所有节点。
    • Control + Shift + End (可选地): 选择焦点节点到最后一个节点的所有节点。
    • Control + A (可选地): 选择在树结构中的所有节点。根据需要，如果所有的节点都被选择了，它也可以取消选择所有节点。

NOTE

1. DOM焦点（激活的元素）与选择的状态在功能上是有区别的。有关详细信息，请参阅 this description of differences between focus and selection.。
2. tree 角色支持 aria-activedescendant 属性，它提供了另一种使用键盘导航在 treeitem 元素间移动DOM焦点的方式。有关详细信息，请参阅 Managing Focus in Composites Using aria-activedescendant。
3. 在单选树中，移动焦点可以取消选择之前选择的节点，并选择新聚焦的节点。这种选择模式被称为 "选择跟随焦点（selection follows focus）"。选择跟随焦点在某些情况下非常有用，在其他情况下则会严重降低可访问性。有关更多的指南，请参阅 Deciding When to Make Selection Automatically Follow Focus。
4. 如果选择或取消选择所有节点是一个重要的功能，实现单独控制这些行为，如 "全选" 和 "取消全选" 按钮，可显著提高可用性。
5. 如果在一个树结构中的节点被水平地布置：
   1. Down Arrow 的表现如上面描述的 Right Arrow 一样，反之亦然。
   2. Up Arrow 的表现如上面描述的 Left Arrow 一样，反之亦然。

WAI-ARIA 角色，状态和属性

• 所有树节点都包含在或被角色为 tree 的元素所包含。
• 作为树节点的每个元素都有 treeitem 角色。
• 每一个根节点包含在角色为 tree 的元素或被设置了 aria-owns 的属性的 tree元素引用。
• 每个父节点包含或拥有 group 角色的元素。
• 每个子节点都包含在一个角色为 group 的元素中，或者被其拥有，该元素包含在节点中，或者由作为该子节点的父节点的节点拥有。
• 每个作为父节点拥有 treeitem 的元素 aria-expanded 设置为 false，当节点处于关闭状态，并设置为 true 时，该节点是在打开状态。终端节点没有 aria-expanded 属性，因为，如果他们有，他们会被辅助技术错误地描述为父节点。
• 如果树支持多个节点的选择，拥有角色 tree 的元素拥有设置为 true 值的 aria-multiselectable 属性。否则，aria-multiselectable 要么是设置为 false 或使用默认值 false。
• 如果树不支持多选， 选中节点的 aria-selected 被设置为 true 并且该属性不存在于树中的任何其它节点。
• 如果树支持多种选择：
  • 所有选定的节点的 aria-selected 设置为 true。
  • 所有未选择的节点的 aria-selected 设置为 false。
• 拥有角色 tree 的元素拥有被 aria-labelledby 引用的可见标签或拥有指定值的 aria-label 属性 。
• 如果由于用户移动焦点或滚动树结构引起的动态加载，DOM中不存在完整的可用节点集合，每个节点拥有指定值的 aria-level， aria-setsize和 aria-posinset。
• 如果 tree 元素是水平方向的，它的 aria-orientation 设置为 horizontal。一个树结构的 aria-orientation 默认值是 vertical。

NOTE 如果 aria-owns 设置在树容器上，以包含不是该容器DOM子元素的元素，这些元素会按它们被引用的顺序出现在读取序列中，并且在所有属于该容器的DOM子元素之后。用于管理焦点的脚本需要确保视觉焦点与这个辅助技术读取顺序相匹配。

译者：李文举（jace li）、 练小习（jiraa）、秧歌（yang）、蒸包（zhengbao）、考拉（cola）

校对：信息无障碍研究会