# 数据网格与布局网格的键盘导航策略差异
在界面设计服务中，当使用 Grid 角色构建包含可编辑内容或内部组件的单元格时，平衡“单元格焦点”与“内部元素焦点”的核心在于区分**数据网格（Data Grid）**与**布局网格（Layout Grid）**的不同用途。根据 W3C ARIA 作者实践指南（APG），两者虽共享相同的 ARIA 角色和属性，但在键盘交互策略上存在显著差异。
## 一、核心设计原则：焦点落点的选择
对于辅助技术用户而言，体验质量高度依赖于单元格内容及其焦点设置方式。APG 提出了两种最优的单元格设计与焦点行为组合模式：
1. **单一组件模式**：若单元格包含一个操作不需要方向键（如箭头键）的组件（例如链接、按钮、单选框、开关或复选框），网格导航键应将焦点直接设置在该组件上。
2. **文本/图形模式**：若单元格仅包含文本或单个图形，网格导航键应将焦点设置在单元格本身。
遵循这两种模式可最大程度降低作者和用户的认知负担。若单元格内混合了多种组件、文本和图形，且未遵循上述任一模式，则会增加复杂性。
## 二、数据网格（Data Grid）的交互策略
数据网格主要用于呈现表格信息，尤其适用于可编辑或交互式的数据（如电子表格）。其特点包括列标题、行标题以及单元格内的可编辑内容。
### 1. 焦点切换逻辑
在数据网格中，每个单元格都包含一个可聚焦元素或自身即为可聚焦对象（除非是提供排序或过滤功能的行列头单元格）。当用户通过 Tab 键进入网格后，方向键用于在单元格间移动焦点。
- **内部组件操作**：如果单元格内包含可编辑内容或多个组件，用户需按下 `Enter`、`F2` 或任意字母数字键来禁用网格导航功能，将焦点移至输入框或第一个组件上。此时，方向键可用于在单元格内的多个组件间移动（如从文本切换到按钮），或通过 `Tab`/`Shift+Tab` 切换至相邻单元格的组件。
- **恢复导航**：按下 `Escape` 可恢复网格导航功能；若正在编辑内容，可能还会撤销编辑操作。
### 2. 避免遗漏关键入口
由于屏幕阅读器在应用模式下仅朗读可聚焦元素及其标签，若单元格内的非焦点元素未被正确标记或无法通过焦点访问，用户可能会无意中忽略这些内容。因此，确保每个单元格要么自身可聚焦，要么包含一个明确的可聚焦组件至关重要。
## 三、布局网格（Layout Grid）的交互策略
布局网格主要用于分组交互式元素（如导航链接、消息收件人列表等），其特点是不一定有行列标题，且可能仅含单行或单列。
### 1. 焦点切换逻辑
在布局网格中，整个网格通常只有一个元素参与页面的 Tab 序列。方向键用于在单元格间移动焦点，且支持跨行/列的环绕行为（例如右箭头到达行末时自动跳转至下一行首）。
- **内部组件操作**：如果单元格内包含需要方向键操作的组件（如列表框、滑块或单选组），则需要额外的键盘命令来聚焦并激活这些组件。此时，网格导航键与组件内部导航键需协调工作。
- **恢复导航**：同样可通过 `Enter`、`F2` 或字母数字键进入单元格内操作，按下 `Escape` 恢复网格导航。
### 2. 避免混淆
布局网格中允许方向键在单元格间环绕移动，这有助于用户连续浏览列表。但在数据网格中使用此类环绕行为会导致方向感混乱，因此需严格区分两者的导航逻辑。
## 四、通用键盘约定与注意事项
无论哪种网格类型，以下键盘约定均适用：
- **选择功能**：`Ctrl+Space` 选择列，`Shift+Space` 选择行，`Ctrl+A` 全选，配合 Shift 键可扩展选择范围。
- **动态内容加载**：若网格支持动态添加行列（如滚动加载数据），`Ctrl+Home`/`Ctrl+End` 可能指向 DOM 中的首尾行而非后端数据的逻辑首尾行，需特别注意。
- **ARIA 属性设置**：根据功能需求设置 `aria-sort`、`aria-selected`、`aria-readonly` 等属性，确保辅助技术能正确传达状态。
## 五、总结
制定差异化的键盘导航策略关键在于明确网格用途：
- **数据网格**应优先保证单元格内可编辑内容或组件的可访问性，通过 `Enter`/`F2` 切换焦点，避免用户遗漏操作入口。
- **布局网格**可利用方向键环绕特性提升浏览效率，但需确保内部组件（如列表框）有独立的聚焦机制。
遵循 W3C APG 指南，结合具体场景设计焦点行为，可有效提升界面设计的无障碍体验。