树状视图：分层数据导航的可访问性

树状视图是显示分层数据的基本 UI 组件。它们允许用户以直观的方式导航复杂结构，例如文件系统、组织结构图或网站菜单。然而，一个实现不佳的树状视图可能会造成严重的可访问性障碍，特别是对于依赖屏幕阅读器和键盘导航等辅助技术的残障用户。本文提供了一个设计和实现无障碍树状视图的综合指南，确保为每个人提供积极的用户体验。

理解树状视图结构

树状视图以分层、可展开/可折叠的格式呈现数据。树中的每个节点都可以有子节点，从而创建分支和子分支。最顶层的节点称为根节点。在深入探讨可访问性考量之前，理解其基本结构至关重要。

以下是常见树状视图元素的分解：

树 (Tree): 包含整个树状结构的整体容器元素。
树项目 (Treeitem): 代表树中的单个节点。它可以是分支（可展开/可折叠）或叶子（无子节点）。
组 (Group): （可选）一个容器，用于在视觉上将子树项目组合在父树项目内。
切换器/展开图标 (Toggler/Disclosure Icon): 一个视觉指示器（例如，加号或减号、箭头），允许用户展开或折叠分支。
标签 (Label): 为每个树项目显示的文本。

ARIA 角色和属性的重要性

无障碍富互联网应用 (ARIA) 是一套为 HTML 元素添加语义的属性，使辅助技术能够理解它们。在构建树状视图时，ARIA 角色和属性对于向屏幕阅读器传达树的结构和行为至关重要。

必要的 ARIA 角色：

role="tree": 应用于代表整个树的容器元素。这会告知辅助技术该元素包含一个分层列表。
role="treeitem": 应用于树中的每个节点。这会将每个节点标识为树中的一个项目。
role="group": 应用于在视觉上组合子树项目的容器元素。虽然不总是必需，但它可以改善语义。

关键的 ARIA 属性：

aria-expanded="true|false": 应用于有子节点的树项目。指示分支当前是展开 (true) 还是折叠 (false)。当用户展开或折叠节点时，使用 JavaScript 动态更新此属性。
aria-selected="true|false": 应用于树项目以指示节点当前是否被选中。一次只应选择一个节点（除非您的应用程序需要多选，此时应在 role="tree" 元素上使用 aria-multiselectable="true"）。
aria-label="[label text]" 或 aria-labelledby="[ID of label element]": 为树或单个树项目提供描述性标签。如果标签在视觉上不存在，请使用 aria-label；否则，使用 aria-labelledby 将树项目与其视觉标签关联起来。
tabindex="0": 应用于初始获得焦点的树项目（通常是第一个）。在所有其他树项目上使用 tabindex="-1"，直到它们获得焦点（例如，通过键盘导航）。这确保了正确的键盘导航流程。

ARIA 实现示例：

以下是一个如何使用 ARIA 属性构建树状视图的基本示例：


<ul role="tree" aria-label="文件系统">
  <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0">
    <span>根文件夹</span>
    <ul role="group">
      <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1">
        <span>文件夹 1</span>
        <ul role="group">
          <li role="treeitem" aria-selected="false" tabindex="-1"><span>文件 1.txt</span></li>
          <li role="treeitem" aria-selected="false" tabindex="-1"><span>文件 2.txt</span></li>
        </ul>
      </li>
      <li role="treeitem" aria-selected="false" tabindex="-1"><span>文件夹 2</span></li>
    </ul>
  </li>
</ul>

键盘导航

对于无法使用鼠标的用户来说，键盘导航至关重要。一个设计良好的树状视图应该可以完全仅使用键盘进行导航。以下是标准的键盘交互：

向上箭头 (Up Arrow): 将焦点移动到树中的上一个节点。
向下箭头 (Down Arrow): 将焦点移动到树中的下一个节点。
向左箭头 (Left Arrow):
- 如果节点是展开的，则折叠该节点。
- 如果节点是折叠的或没有子节点，则将焦点移动到该节点的父节点。
向右箭头 (Right Arrow):
- 如果节点是折叠的，则展开该节点。
- 如果节点是展开的，则将焦点移动到第一个子节点。
Home: 将焦点移动到树中的第一个节点。
End: 将焦点移动到树中最后一个可见的节点。
空格键 (Spacebar) 或回车键 (Enter): 选择获得焦点的节点（如果支持选择功能）。
键入（字母或数字）: 将焦点移动到下一个以所键入字符开头的节点。每次后续按键都会继续搜索。
加号 (+): 展开当前获得焦点的节点（相当于在折叠状态下按向右箭头）。
减号 (-): 折叠当前获得焦点的节点（相当于在展开状态下按向左箭头）。
星号 (*): 展开当前层级的所有节点（并非普遍支持，但通常很有用）。

用于键盘导航的 JavaScript 实现：

您需要使用 JavaScript 来处理键盘事件并相应地更新焦点。以下是一个简化示例：


const tree = document.querySelector('[role="tree"]');
const treeitems = document.querySelectorAll('[role="treeitem"]');

tree.addEventListener('keydown', (event) => {
  const focusedElement = document.activeElement;
  let nextElement;

  switch (event.key) {
    case 'ArrowUp':
      event.preventDefault(); // 防止页面滚动
      // 查找上一个 treeitem 的逻辑（需要遍历 DOM）
      // ...
      nextElement = findPreviousTreeitem(focusedElement);
      break;
    case 'ArrowDown':
      event.preventDefault();
      // 查找下一个 treeitem 的逻辑
      // ...
      nextElement = findNextTreeitem(focusedElement);
      break;
    case 'ArrowLeft':
      event.preventDefault();
      if (focusedElement.getAttribute('aria-expanded') === 'true') {
        // 折叠节点
        focusedElement.setAttribute('aria-expanded', 'false');
      } else {
        // 将焦点移至父节点
        nextElement = findParentTreeitem(focusedElement);
      }
      break;
    case 'ArrowRight':
      event.preventDefault();
      if (focusedElement.getAttribute('aria-expanded') === 'false') {
        // 展开节点
        focusedElement.setAttribute('aria-expanded', 'true');
      } else {
        // 将焦点移至第一个子节点
        nextElement = findFirstChildTreeitem(focusedElement);
      }
      break;
    case 'Home':
      event.preventDefault();
      nextElement = treeitems[0];
      break;
    case 'End':
      event.preventDefault();
      nextElement = treeitems[treeitems.length - 1];
      break;
    case ' ': // 空格键
    case 'Enter':
      event.preventDefault();
      // 选择当前焦点节点的逻辑
      selectNode(focusedElement);
      break;
    default:
      // 处理字符键入以导航到以该字符开头的节点
      break;
  }

  if (nextElement) {
    focusedElement.setAttribute('tabindex', '-1');
    nextElement.setAttribute('tabindex', '0');
    nextElement.focus();
  }
});

键盘导航实现的重要考量：

焦点管理：始终确保一次只有一个树项目具有 tabindex="0"。移动焦点时，相应地更新 tabindex 属性。
DOM 遍历：高效地遍历 DOM 以查找下一个和上一个树项目、父节点和子节点。考虑使用实用函数来简化此过程。
事件阻止：在处理箭头键时，使用 event.preventDefault() 来阻止浏览器执行其默认操作（例如，滚动）。
字符键入：实现处理字符键入的逻辑，允许用户快速导航到以特定字符开头的节点。存储最后一次按键的时间，以决定何时应清除搜索字符串。

视觉设计与可访问性

视觉设计在树状视图的可用性和可访问性中起着至关重要的作用。以下是一些指南：

清晰的视觉层次结构：使用缩进和视觉提示（例如，为文件夹和文件使用不同的图标）来清晰地指示树的层次结构。
足够的颜色对比度：确保文本与背景之间以及树状视图不同元素之间的颜色对比度足够。使用 WebAIM 对比度检查器等工具来验证对比度。
焦点指示：为当前获得焦点的树项目提供清晰可见的焦点指示器。这对键盘用户至关重要。不要仅仅依赖颜色；考虑使用边框、轮廓或背景变化。
展开/折叠指示器：为展开/折叠指示器使用清晰易懂的图标（例如，加/减号、箭头）。确保这些图标具有足够的对比度并且足够大，易于点击。
避免仅使用颜色传达信息：不要仅依赖颜色来指示树项目的状态（例如，已选中、已展开、错误）。提供替代的视觉提示，如文本标签或图标。

屏幕阅读器考量

屏幕阅读器用户依赖 ARIA 属性和键盘导航来理解和与树状视图交互。以下是屏幕阅读器可访问性的一些关键考量：

描述性标签：使用 aria-label 或 aria-labelledby 为树和单个树项目提供描述性标签。这些标签应简洁且信息丰富。
状态播报：确保状态变化（例如，展开/折叠节点、选择节点）能被屏幕阅读器正确播报。这通过正确更新 aria-expanded 和 aria-selected 属性来实现。
层级播报：屏幕阅读器应播报每个节点在层次结构中的级别（例如，“第 2 级，文件夹 1”）。当正确实现 ARIA 角色时，大多数屏幕阅读器会自动处理此问题。
键盘导航一致性：确保键盘导航在不同浏览器和屏幕阅读器之间保持一致和可预测。使用多个屏幕阅读器（例如，NVDA、JAWS、VoiceOver）测试您的树状视图，以识别并解决任何不一致之处。
渐进增强：如果 JavaScript 被禁用，树状视图仍应是可访问的，尽管功能会降级。考虑使用语义化 HTML（例如，嵌套列表）来提供基本的无障碍水平，即使没有 JavaScript。

跨浏览器兼容性

可访问性应在不同浏览器和操作系统之间保持一致。请在以下环境中彻底测试您的树状视图：

桌面浏览器：Chrome、Firefox、Safari、Edge
移动浏览器：Chrome (Android 和 iOS)、Safari (iOS)
操作系统：Windows、macOS、Linux、Android、iOS
屏幕阅读器：NVDA (Windows)、JAWS (Windows)、VoiceOver (macOS 和 iOS)

使用浏览器开发者工具检查 ARIA 属性和键盘行为。注意任何不一致或渲染问题。

测试与验证

定期测试对于确保树状视图的可访问性至关重要。以下是一些测试方法：

手动测试：使用屏幕阅读器和键盘导航树状视图，并验证所有功能是否可访问。
自动化测试：使用可访问性测试工具（例如，axe DevTools、WAVE）来识别潜在的可访问性问题。
用户测试：让残障用户参与测试过程，以获取关于树状视图可访问性的真实反馈。
WCAG 合规性：力求达到 Web 内容可访问性指南 (WCAG) 2.1 AA 级标准。WCAG 提供了一套国际公认的指南，用于使 Web 内容更易于访问。

无障碍树状视图的最佳实践

在设计和实现无障碍树状视图时，请遵循以下最佳实践：

从语义化 HTML 开始：使用语义化 HTML 元素（例如，<ul>、<li>）创建树状视图的基本结构。
应用 ARIA 角色和属性：使用 ARIA 角色和属性添加语义，并向辅助技术提供信息。
实现稳健的键盘导航：确保树状视图可以完全仅使用键盘进行导航。
提供清晰的视觉提示：使用视觉设计清晰地指示树状视图的层次结构、状态和焦点。
使用屏幕阅读器进行测试：使用多个屏幕阅读器测试树状视图，以验证它对屏幕阅读器用户是可访问的。
验证 WCAG 合规性：根据 WCAG 指南验证树状视图，确保其符合可访问性标准。
为您的代码编写文档：清晰地为您的代码编写文档，解释每个 ARIA 属性和键盘事件处理程序的目的。
使用库或框架（谨慎使用）：考虑使用来自信誉良好的 UI 库或框架的预构建树状视图组件。但是，请仔细审查该组件的可访问性功能，并确保其满足您的要求。务必进行彻底测试！

高级考量

延迟加载 (Lazy Loading): 对于非常大的树，实现延迟加载，仅在需要时加载节点。这可以提高性能并减少初始加载时间。确保延迟加载以可访问的方式实现，在加载节点时向用户提供适当的反馈。使用 ARIA live regions 来播报加载状态。
拖放 (Drag and Drop): 如果您的树状视图支持拖放功能，请确保它对键盘用户和屏幕阅读器用户也是可访问的。为拖放节点提供替代的键盘命令。
上下文菜单 (Context Menus): 如果您的树状视图包含上下文菜单，请确保它们对键盘用户和屏幕阅读器用户是可访问的。使用 ARIA 属性来标识上下文菜单及其选项。
全球化与本地化 (Globalization and Localization): 设计您的树状视图，使其易于针对不同语言和文化进行本地化。考虑不同文本方向（例如，从右到左）对视觉布局和键盘导航的影响。

结论

创建无障碍的树状视图需要仔细的规划和实现。通过遵循本文中概述的指南，您可以确保您的树状视图对所有用户（包括残障用户）都是可用和可访问的。请记住，可访问性不仅仅是一项技术要求，它是包容性设计的一个基本原则。

通过优先考虑可访问性，您可以为所有用户（无论其能力如何）创造更好的用户体验。定期测试和验证您的代码非常重要。请随时关注最新的可访问性标准和最佳实践，以创建真正具有包容性的用户界面。