ARIA树形视图模式：如何处理树项嵌套控件的键盘导航？

问题背景 #

现有如下基础HTML树形结构代码：

<ol>
  <li>First item. No descendants <button>Menu</button></li>
  <li>
    Second item with sub-items <button>Menu</button>

    <ol>
      <li>Second item, first sub-item <button>Menu</button></li>
      <li>Second item, second sub-item <button>Menu</button></li>
      <li>Second item, third sub-item <button>Menu</button></li>
    </ol>
  </li>
  <li>Third (no descendants) item <button>Menu</button></li>
</ol>

当前代码缺少无障碍相关属性，但这并非重点。根据W3C ARIA APG树形视图规范，树形列表的键盘交互规则里未说明如何处理树项中包含的额外交互控件（比如每个树项右侧的“Menu”按钮，用于执行复制、删除等操作）。已知树项获焦时，左右箭头用于横向导航树项，上下箭头用于纵向导航，Tab/Shift+Tab用于离开树形组件，现咨询两个问题：

• 是否允许树项包含标签外的内容（尤其是交互控件）？
• 若允许，键盘交互时该如何让这些控件获得焦点？

解答 #

1. 是否允许树项包含额外交互控件？ #

完全允许。ARIA规范并没有禁止树项（需搭配role="treeitem"等无障碍属性）内部包含额外交互元素，只要这些控件的存在不破坏树形组件的核心导航逻辑，同时保证整体无障碍体验即可。

2. 键盘交互的处理方案 #

要让树项内的按钮能被键盘正常访问，需遵循以下逻辑：

• 树项获焦时：默认响应树形导航快捷键（上下箭头切换树项，左右箭头展开/折叠子项）。若用户需要访问内部按钮，按Tab键即可将焦点从树项切换到内部按钮——这里的Tab是在树项内部控件间跳转，而非直接离开树形组件。
• 按钮获焦时：树形导航快捷键（上下左右箭头）暂时失效，用户可按Enter或Space正常触发按钮功能（比如打开操作菜单）。操作完成后，按Shift+Tab可将焦点切回所属树项，继续树形导航；也可按Tab跳转到下一个可聚焦元素（若存在）。
• 额外注意：如果树项内有多个交互控件，需确保焦点顺序与视觉顺序一致；同时在树项获焦时，通过屏幕阅读器提示用户可按Tab访问内部控件，提升无障碍友好度。

另外，需给树项和内部控件设置正确的无障碍属性：树项添加role="treeitem"，有子项的树项还需设置aria-expanded来标识展开/折叠状态；按钮保持原生<button>即可，原生按钮本身具备良好的无障碍特性。

内容的提问来源于stack exchange，提问作者smellyshovel