如何让屏幕阅读器用户关闭模态框后恢复阅读位置？技术问询

针对依赖屏幕阅读器的视障用户，在关闭AI聊天模态框后无法回到原文档阅读位置的问题，可通过以下几种可靠方案实现顺畅返回：

一、记录并恢复文本选择范围 #

屏幕阅读器的虚拟光标通常与浏览器的文本选择光标关联，可通过捕获用户打开模态框时的文本选择状态来保存位置：

• 捕获位置：在用户触发打开模态框的快捷键时，调用window.getSelection()获取当前选择范围，保存对应的Range对象：

  let savedRange;
  // 监听快捷键打开模态框的事件（示例快捷键为Ctrl+O）
  document.addEventListener('keydown', (e) => {
    if (e.key === 'o' && e.ctrlKey) {
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        savedRange = selection.getRangeAt(0);
      }
      openChatModal(); // 执行打开模态框的逻辑
    }
  });
  

• 恢复位置：关闭模态框时，恢复保存的Range并滚动到对应位置，同时用aria-live区域播报提示：

  function closeChatModal() {
    // 执行关闭模态框的逻辑
    if (savedRange) {
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(savedRange);
      // 滚动到目标位置，确保内容可视
      savedRange.startContainer.parentElement.scrollIntoView({
        block: 'nearest',
        behavior: 'smooth'
      });
      // 通知用户位置已恢复
      document.getElementById('aria-live').textContent = '已回到之前的阅读位置';
    }
  }
  

• 提前在页面中添加aria-live区域（视觉隐藏，仅对屏幕阅读器可见）：

  <div id="aria-live" aria-live="polite" class="sr-only"></div>
  

  对应的视觉隐藏样式：

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  

二、通过辅助聚焦元素定位断点 #

若无法捕获文本选择范围，可通过创建隐藏的辅助元素或标记当前文档元素来定位阅读断点：

• 标记位置：打开模态框时，获取当前阅读位置对应的文档元素（如段落、标题），为其添加tabindex="-1"使其可被聚焦：

  let savedElement;
  document.addEventListener('keydown', (e) => {
    if (e.key === 'o' && e.ctrlKey) {
      // 获取当前视口中的核心阅读元素（示例为居中位置的元素）
      savedElement = document.elementFromPoint(window.innerWidth/2, window.innerHeight/2);
      // 为不可聚焦元素添加可聚焦属性
      if (savedElement && savedElement.tabIndex !== -1) {
        savedElement.tabIndex = -1;
      }
      openChatModal();
    }
  });
  

• 返回焦点：关闭模态框时，将焦点设置到保存的元素并滚动到该位置：

  function closeChatModal() {
    // 执行关闭模态框的逻辑
    if (savedElement) {
      savedElement.focus();
      savedElement.scrollIntoView({block: 'nearest'});
    }
  }
  

三、优化模态框焦点管理规范 #

遵循无障碍模态框的焦点管理标准，将返回焦点与阅读断点绑定：

• 由于触发模态框的是快捷键而非可见按钮，可创建一个隐藏的触发按钮，快捷键触发时模拟点击该按钮；模态框关闭时，自动将焦点返回此按钮，同时将按钮位置与当前阅读位置关联，确保焦点恢复后屏幕阅读器能定位到附近区域。

关键注意事项 #

• 测试主流屏幕阅读器（NVDA、JAWS、VoiceOver），不同阅读器对虚拟光标和焦点的处理存在细微差异；
• 位置记录操作需在打开模态框的瞬间静默完成，避免干扰用户阅读；
• 所有辅助元素需仅对屏幕阅读器可见，不影响视觉用户的体验。

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