JAWS屏幕阅读器键盘选文本未生成DOM Range对象，求解决方案

问题根源 #

JAWS等屏幕阅读器通过快捷键选文本时，不会触发常规鼠标/键盘操作的默认事件，或其生成的选区未被浏览器window.getSelection()正确捕获——这类工具往往在自身上下文内管理选区，而非直接操作浏览器原生选区。

稳定获取Range对象的可行方案 #

1. 监听selectionchange事件 #

浏览器原生的selectionchange事件会在任何选区变化时触发，包括屏幕阅读器操作。直接在回调中捕获选区：

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    // 校验Range有效性后执行标注逻辑
    if (range.startContainer && range.endContainer) {
      // 处理标注操作
    }
  }
});

注：部分JAWS版本可能延迟触发该事件，可将核心逻辑包裹在setTimeout中（延迟100ms左右）确保兼容性。

2. 适配JAWS专属API #

JAWS提供了全局JAWS对象，可监听其选区变化事件：

if (typeof JAWS !== 'undefined') {
  JAWS.onTextSelectionChanged = (start, end, selectedText) => {
    // 根据JAWS返回的节点标识定位DOM元素
    const startNode = document.getElementById(start.id);
    const endNode = document.getElementById(end.id);
    if (startNode && endNode) {
      const range = document.createRange();
      range.setStart(startNode, start.offset);
      range.setEnd(endNode, end.offset);
      // 应用Range到标注逻辑
    }
  };
}

注意：JAWS返回的选区参数格式可能随版本变化，需针对目标版本测试调整。

3. 手动同步选区 #

在标注触发快捷键（如Ctrl+Shift+M）的回调中，主动获取JAWS选区并同步到浏览器原生Range：

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === 'M') {
    e.preventDefault();
    let range = null;

    if (typeof JAWS !== 'undefined') {
      const selectedText = JAWS.getSelectedText();
      if (selectedText) {
        // 用TreeWalker遍历文本节点匹配选区内容
        const treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
        let currentNode;
        while (currentNode = treeWalker.nextNode()) {
          const text = currentNode.textContent;
          const startIdx = text.indexOf(selectedText);
          if (startIdx !== -1) {
            range = document.createRange();
            range.setStart(currentNode, startIdx);
            range.setEnd(currentNode, startIdx + selectedText.length);
            break;
          }
        }
      }
    } else {
      // 非JAWS环境使用原生选区
      const selection = window.getSelection();
      range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
    }

    if (range) {
      // 执行标注操作
    }
  }
});

该方法适合JAWS未提供直接节点信息的场景，核心是通过文本匹配定位DOM节点。

4. 测试与兼容注意事项 #

• 必须在真实JAWS环境测试，模拟器无法还原其选区行为。
• 覆盖主流JAWS版本（2022-2024），API可能存在版本差异。
• 确保页面语义化：优先使用<p>、<span>等语义标签，避免用无意义的<div>嵌套文本，提升JAWS选区识别稳定性。

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