Mac系统下如何让VoiceOver焦点切换至退出模态框？

我明白你遇到的尴尬情况——明明已经用JavaScript把键盘焦点设到了模态框上，但VoiceOver的光标却还停留在触发链接上，这是因为VoiceOver对tabindex="-1"元素的处理逻辑和普通可交互元素不一样。下面给你几个实用的解决方案：

方案1：将焦点设置到模态框内的可交互元素（推荐） #

正如你猜想的，把焦点直接移到模态框里的可交互元素（比如关闭按钮）是最直接有效的方法，这类元素是VoiceOver默认会优先识别的。具体实现步骤：

1. 修正模态框的无障碍属性：打开模态框时，必须把外层的aria-hidden="true"改成false——否则VoiceOver会完全忽略整个模态框，哪怕设置了焦点也没用。
2. 获取关闭按钮并设置焦点：在打开模态框的JS逻辑里，选中关闭按钮，调用focus()方法。

示例代码：

// 假设这是你打开模态框的函数
function openModal() {
  // 获取模态框和关闭按钮元素
  const modal = document.getElementById('modal-1');
  const closeBtn = modal.querySelector('button[data-dismiss="x-close"]');

  // 更新模态框的无障碍状态，让VoiceOver能识别它
  modal.setAttribute('aria-hidden', 'false');
  // 把焦点设置到关闭按钮，VoiceOver会自动跟随这个焦点
  closeBtn.focus();
}

补充无障碍最佳实践 #

为了让模态框的VoiceOver体验更完善，还可以做这些优化：

• 给对话框添加标题关联：给模态框标题加上唯一ID，让role="dialog"的元素通过aria-labelledby关联它，这样VoiceOver会先读取模态框标题，再展示内容。修改后的代码片段：

<div class="modal-icons-enabled" role="dialog" tabindex="-1" aria-labelledby="modal-title" aria-modal="true"> 
  <!-- 关闭按钮 -->
  <div class="modal-header"> 
    <p class="modal-title" id="modal-title">Modal</p> 
  </div>
  <!-- 其他内容 -->
</div>

（另外建议加上aria-modal="true"，明确告诉辅助技术这是模态框，阻止用户与背景内容交互）

• 实现焦点陷阱：模态框打开后，要确保键盘焦点无法跳出模态框（比如按Tab键时在模态框内的可交互元素间循环），这是无障碍模态框的标准要求。

• 关闭后返回焦点：模态框关闭时，把焦点返回到触发它的链接上，提升用户操作连贯性。

方案2：若必须聚焦到模态框容器（不推荐） #

如果你一定要把焦点设到role="dialog"的容器上，可以在设置焦点后，通过aria-live区域触发VoiceOver的关注，不过这个方法不如方案1直观：

<!-- 在页面底部添加隐藏的live区域 -->
<div aria-live="polite" class="sr-only"></div>

function openModal() {
  const modal = document.getElementById('modal-1');
  const liveRegion = document.querySelector('[aria-live="polite"]');

  modal.setAttribute('aria-hidden', 'false');
  modal.focus();
  // 更新live区域内容，触发VoiceOver关注模态框
  liveRegion.textContent = '模态框已打开';
}

还是优先推荐方案1，因为它更符合VoiceOver的交互逻辑，用户体验更自然。

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