面向视障用户的无向图键盘无障碍导航最佳实践咨询

针对视障用户通过键盘导航无向图的场景，目前没有完全匹配的标准化ARIA模式，但有几个经过验证的最佳实践可以参考：

1. 自定义应用级导航（基于application角色） #

你提到的方案是可行的，但需要注意以下关键细节：

• 给节点容器添加role="application"后，屏幕阅读器会切换到应用模式，原生键盘逻辑被覆盖，必须在用户进入容器时通过aria-live明确播报自定义导航规则，比如“进入图导航区域，按方向键切换当前节点的邻接节点，Tab键退出区域”
• 维护清晰的焦点状态：Tab进入时聚焦上次选中的节点或默认入口节点；Tab退出时保留节点选中状态，避免用户重新定位
• 方向键导航时，实时通过屏幕阅读器播报当前节点信息，比如“节点A，邻接节点3个：B、C、D”
• 保留Space/Enter触发按钮操作的原生行为，同时支持选中邻接节点后按这两个键切换聚焦节点，操作逻辑保持一致

2. 增强原生Tab导航的辅助方案 #

如果不想完全覆盖原生Tab遍历逻辑，可以采用以下方式：

• 给每个按钮添加aria-describedby，明确标注其邻接节点，比如“节点A，邻接节点：B、C、D”
• 自定义快捷键（如Ctrl+方向键）实现快速跳转到邻接节点，需提前提示用户可用快捷键，且避免与浏览器或屏幕阅读器的默认快捷键冲突
• 这种方式保留了原生Tab遍历所有节点的能力，适合需要兼顾两种导航习惯的场景

3. 适配网格导航模式 #

可以参考无障碍网格的交互逻辑适配无向图：

• 给节点容器添加role="grid"，每个按钮添加role="gridcell"，利用屏幕阅读器对grid角色的原生支持
• 自定义方向键与邻接节点的映射关系，避免默认网格导航的行列逻辑冲突（因为无向图不是严格网格结构）
• 这种方式减少了自定义播报的工作量，但需要额外处理非结构化的邻接关系映射

通用注意事项 #

• 必须测试主流屏幕阅读器（NVDA、VoiceOver、JAWS）和浏览器的兼容性，确保导航逻辑在不同环境下正常工作
• 提供导航帮助入口（如固定的“导航说明”按钮），方便用户随时查看规则

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