# 单选与多选树视图中无障碍属性的配置策略
在界面设计中，树视图（Tree View）是一种展示层级列表的常用组件。根据用户交互模型的不同，特别是“选择是否跟随焦点”这一机制，开发者需要正确配置 `aria-selected`、`aria-checked` 及 `aria-activedescendant` 属性，以保障无障碍访问体验。
## 单选树视图的属性配置
对于单选树视图（single-select tree），其核心在于明确区分“当前获得键盘焦点的元素”与“被选中的元素”。
* **状态独立性**：在大多数实现中，单选树的选中状态独立于焦点。这意味着用户可以将焦点移动到某个节点上，但该节点不一定处于选中状态。
* **属性选择**：通常使用 `aria-selected` 来表示选中状态。如果界面指示语言为“选择”且视觉反馈为高亮或勾选标记，也可考虑使用 `aria-checked`，但需保持全站一致。
* **跟随焦点模型**：若设计采用“选择跟随焦点”（selection follows focus）模式，即聚焦到某节点时自动选中该节点，此时焦点位置与选中状态始终同步。在这种特殊情况下，开发者仍需确保 DOM 焦点与视觉/辅助技术感知的选中状态逻辑一致。
* **属性互斥**：在同一棵树的同一层级或不同层级中，不应同时使用 `aria-selected` 和 `aria-checked` 来表示同一种选择语义。除非极少数情况（如两种状态含义完全不同且有独立控制方式），否则应避免混用。
## 多选树视图的属性配置
多选树视图（multi-select tree）允许用户同时选中多个节点，其交互模型更为复杂。
* **属性选择**：对于多选场景，业界推荐惯例是使用 `aria-checked` 来表示选中状态。这有助于区分单选与多选的语义差异，尽管 `aria-selected` 在技术上也可用于多选，但为了清晰度和一致性，通常建议单选用 `aria-selected`，多选用 `aria-checked`。
* **焦点管理**：在多选树中，选中状态始终独立于焦点。用户可以在不改变选中状态的情况下移动焦点（例如使用 Control + Arrow 键），也可以在不改变焦点的情况下切换选中状态（例如使用 Space 键）。
* **属性互斥原则**：即使是在多选树中，也不应在同一节点上同时设置 `aria-selected` 和 `aria-checked`。每个可选择的节点只能拥有一个表示其选择状态的属性。
## aria-activedescendant 的应用
无论单选还是多选，当使用键盘导航时，为了在不移动 DOM 焦点的情况下指示当前活动项（特别是在复杂的复合组件中），可以使用 `aria-activedescendant` 属性。
* **作用**：该属性允许父容器（role="tree"）通过引用子元素（role="treeitem"）的 ID 来告知辅助技术当前哪个节点处于焦点状态。
* **优势**：这种方式避免了频繁移动 DOM 焦点可能带来的性能问题或布局抖动，同时保持了视觉焦点与逻辑焦点的一致性。
## 总结与建议
在实现树视图时，开发者应首先明确交互模型（是否跟随焦点）及选择模式（单选或多选）。
1. **单选树**：推荐使用 `aria-selected`，若采用跟随焦点模型，需确保状态同步更新。
2. **多选树**：推荐使用 `aria-checked`，并确保选中状态与焦点解耦。
3. **属性一致性**：全站应保持统一的属性使用规范，避免混用导致用户困惑。
4. **键盘操作**：合理配置箭头键、空格键及组合键（如 Shift+Space, Ctrl+A）以支持高效的多选操作。
通过遵循 WAI-ARIA 作者指南（APG）中的模式定义，可以构建出既美观又具备良好无障碍访问性的树视图组件。