如何防止屏幕阅读器在‘显示更多’场景中重复播报信息？

我完全懂你这个痛点——你们通过各类连接器拉取外部信息，只能在自有界面加品牌标识却没法控制源内容，需要从长摘要里提取生成短摘要，之前用「... 查看更多」和「... 接上文」的衔接方式，结果屏幕阅读器会重复播报这些冗余内容，确实很头疼。

这里给你几个实用的解决方案，核心思路是分离视觉展示和屏幕阅读器的播报逻辑，兼顾产品视觉需求和无障碍体验：

• 用ARIA标签精准控制播报内容
  给短摘要的「查看更多」按钮设置aria-label，替换掉视觉上的「... 查看更多」作为屏幕阅读器的播报文本；同时长摘要直接去掉「... 接上文」，改用aria-label明确说明这是完整摘要。示例代码：

  <!-- 短摘要区域 -->
  <div class="short-summary">
    这里是提取生成的短摘要内容
    <button aria-label="查看完整摘要" class="view-more">... 查看更多</button>
  </div>
  
  <!-- 长摘要区域 -->
  <div class="long-summary" aria-label="完整内容摘要">
    这里是完整的长摘要原文内容
  </div>
  

  这样屏幕阅读器读短摘要时只会播报内容+「查看完整摘要」，长摘要直接播报完整内容，不会出现重复的衔接文本。

• 视觉保留衔接，屏幕阅读器跳过冗余
  如果产品视觉上必须保留「... 查看更多」和「... 接上文」，可以用视觉隐藏类让屏幕阅读器读取专属的简洁文本，不重复播报衔接符号。示例：

  <!-- 短摘要按钮 -->
  <button class="view-more">
    <span class="visually-hidden">查看完整摘要</span>
    ... 查看更多
  </button>
  
  <!-- 长摘要开头 -->
  <div class="long-summary">
    <span class="visually-hidden">完整摘要：</span>
    ... 接上文<span class="visually-hidden">（接续短摘要内容）</span>
    这里是长摘要剩余的完整内容
  </div>
  

  其中.visually-hidden类的CSS可以这么写：

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

  这个类会让文本在视觉上消失，但屏幕阅读器仍能读取，完美兼顾两种需求。

• 动态加载时用ARIA Live区域控制播报
  如果长摘要是点击后动态加载的，可以用aria-live区域告知用户内容已加载，同时让焦点直接跳到长摘要，避免屏幕阅读器重新读取短摘要。示例代码：

  <!-- 提前准备ARIA Live区域 -->
  <div class="aria-live" aria-live="polite" aria-atomic="true" style="position: absolute; left: -9999px; top: auto;"></div>
  
  <!-- 短摘要和按钮 -->
  <div class="short-summary">
    短摘要内容
    <button class="view-more">... 查看更多</button>
  </div>
  
  <!-- 长摘要容器 -->
  <div class="long-summary" style="display: none;" tabindex="-1">
    完整长摘要内容
  </div>
  

  对应的JavaScript逻辑：

  const viewMoreBtn = document.querySelector('.view-more');
  const longSummary = document.querySelector('.long-summary');
  const liveRegion = document.querySelector('.aria-live');
  
  viewMoreBtn.addEventListener('click', () => {
    longSummary.style.display = 'block';
    liveRegion.textContent = '已加载完整摘要';
    longSummary.focus(); // 让焦点直接跳到长摘要，屏幕阅读器会读取这里的内容
  });
  

  这样用户点击后，屏幕阅读器只会播报「已加载完整摘要」，然后读取长摘要内容，不会重复处理短摘要。

这些方案都不需要修改你接收的源内容，只需要在前端界面层面做优化，完全适配你们的场景。

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