模态对话框内嵌<nav>：首选键盘焦点模式是什么？

核心原则 #

无障碍设计的核心是让键盘/屏幕阅读器用户能清晰感知当前上下文，操作逻辑连贯可预测，所有交互行为需符合直观预期。

方案一：选中次级导航项后直接聚焦到关联tabpanel #

• 优势：操作路径更短，匹配用户“点击导航即查看对应内容”的自然预期，无需额外跳转步骤。
• 关键实现细节：
  • 为tabpanel设置aria-labelledby属性，关联对应次级导航项的ID，确保屏幕阅读器能播报“[导航项名称] 面板”，明确当前聚焦位置的语义。
  • 次级导航项需维护aria-selected状态：选中时设为true，未选中设为false，同步视觉样式与语义状态。
  • 保持模态框的焦点陷阱（focus trap），操作次级导航后焦点仍锁定在模态框内，避免意外跳转到主页面。

方案二：在模态框顶部设置次级跳转链接 #

• 适用场景：当次级导航对应的内容冗长复杂，或用户需要频繁在导航与内容间切换时，该方案可提供快速跳转入口。
• 关键实现细节：
  • 跳转链接使用明确文本，比如“跳转到次级导航”“跳转到当前内容面板”，避免模糊描述。
  • 将跳转链接放在模态框焦点顺序的最前端，模态框打开后焦点直接落在此处，让用户知晓有快速跳转选项。
  • 同样需维护导航项与tabpanel的语义关联，以及模态框的焦点陷阱机制。

优先级建议 #

如果次级导航对应的内容是轻量化模块（如短表单、小型信息块），优先选择方案一，降低用户操作成本；若内容复杂冗长，或存在频繁切换导航与内容的需求，再考虑方案二作为补充优化。

无论采用哪种方案，需额外遵循：

• 模态框打开时，焦点必须落在模态内的可交互元素上（次级导航项或跳转链接）。
• 关闭模态框后，焦点需返回到触发模态框的原元素，保持操作连贯性。

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