含屏幕阅读器区块的内容选中文本重复问题及最优方案咨询

这个问题确实挺头疼的——我们既要保证屏幕阅读器能正确识别语义化内容，又要避免Chrome朗读选中内容时重复读取隐藏的可视化文本，同时还得兼顾用户选中/复制的UX体验。我来分享几个经过实践验证的方案，你可以根据自己的场景选择最优解：

方案1：用CSS伪元素承载可视化内容（纯CSS方案） #

核心思路是把可视化的展示内容（比如2^2）从DOM中移除，改用CSS伪元素生成，这样DOM里只保留屏幕阅读器需要的语义文本。选中整个区块时，自然只会选中DOM中的语义文本，Chrome朗读时就不会出现重复。

代码示例： #

<div class="content" data-display="2^2">
  <div class="screen-reader">2 squared</div>
</div>

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

.content {
  /* 这里添加原.content的布局样式 */
  position: relative; /* 确保伪元素定位正确 */
}

.content::after {
  content: attr(data-display); /* 从data属性读取可视化内容 */
  /* 这里添加原.display的样式，比如字体、对齐方式等 */
  display: block;
}

优缺点： #

• ✅ 纯CSS实现，无需JS，性能好，DOM结构更简洁
• ✅ 选中/朗读时只会触发语义文本，完全避免重复问题
• ❌ 如果需要动态修改可视化内容，得通过JS修改data-display属性
• ❌ 复制时会复制语义文本（比如2 squared），如果需要复制可视化文本（2^2）则不适用

方案2：精准控制user-select属性（纯CSS优化方案） #

如果你不想改动DOM结构，可以通过组合user-select属性，让可视化区块无法被选中，同时给容器添加一键全选的能力，保证用户操作的UX。

代码示例： #

<div class="content">
  <div class="screen-reader">2 squared</div>
  <div class="display" aria-hidden="true">2^2</div>
</div>

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

.content {
  user-select: all; /* 点击容器即可全选内部可选中内容 */
}

.display {
  user-select: none; /* 禁止选中可视化区块 */
}

/* 可选：给容器添加选中时的视觉反馈，弥补隐藏区块无高亮的问题 */
.content::selection {
  background-color: #e3f2fd;
}

优缺点： #

• ✅ 纯CSS实现，改动小，快速见效
• ✅ 选中时只会选中语义文本，朗读无重复
• ✅ 点击容器即可全选，用户操作流畅
• ❌ 复制内容仍为语义文本，若需复制可视化内容则不适用

方案3：JavaScript干预选中范围（灵活定制方案） #

如果需要更灵活的控制（比如允许用户复制可视化文本，但朗读时只读语义文本），可以用JS监听选中事件，手动调整选中范围到语义文本区块。

代码示例： #

<div class="content">
  <div class="screen-reader">2 squared</div>
  <div class="display" aria-hidden="true">2^2</div>
</div>

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

/* 添加容器选中的视觉反馈 */
.content::selection {
  background-color: #e3f2fd;
}

// 获取所有目标容器
const contentBlocks = document.querySelectorAll('.content');

// 监听鼠标和键盘选中事件
contentBlocks.forEach(block => {
  block.addEventListener('mouseup', adjustSelection);
  block.addEventListener('keyup', (e) => {
    // 只处理选中相关的键盘事件（比如Ctrl+A）
    if (e.key === 'a' && e.ctrlKey) {
      setTimeout(adjustSelection.bind(null, { target: block }), 0);
    }
  });
});

function adjustSelection(e) {
  const selection = window.getSelection();
  const targetBlock = e.target;
  const screenReaderEl = targetBlock.querySelector('.screen-reader');

  // 检查选中范围是否在当前容器内
  if (selection.rangeCount > 0 && targetBlock.contains(selection.getRangeAt(0).commonAncestorContainer)) {
    // 清除现有选中
    selection.removeAllRanges();
    // 创建新范围，选中屏幕阅读器文本
    const newRange = document.createRange();
    newRange.selectNodeContents(screenReaderEl);
    selection.addRange(newRange);
  }
}

优缺点： #

• ✅ 高度灵活，可自定义选中内容，甚至可根据场景切换选中目标
• ✅ 保留可视化区块的可复制性（如果需要，可额外监听复制事件修改内容）
• ✅ 视觉反馈清晰，用户体验好
• ❌ 需要JS支持，要考虑不同设备的选中场景（鼠标、键盘、触摸）

方案选择建议： #

• 如果只需要解决朗读重复问题，且复制语义文本即可：优先选方案1或方案2
• 如果需要灵活控制选中/复制内容：选择方案3

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