如何避免屏幕阅读器重复读取轮播卡片内容？

这是预期行为吗？ #

这不是屏幕阅读器的预期行为，属于可访问性问题——重复播报会打断用户的内容获取流程，违反WCAG 2.0「可感知」的核心原则。

原因分析 #

VoiceOver在自动浏览模式（如用Ctrl+Option+方向键遍历页面）时，会扫描所有语义化元素、文本节点和可聚焦元素。你的父div通过tabindex="0"成为可聚焦项，但子元素里的文本、图标等依然会被单独识别并播报，导致重复读取；而手动Tab时，焦点只会落在设了tabindex="0"的父元素上，所以不会出现重复问题。

符合WCAG 2.0的修正方案 #

1. 优先使用语义化交互元素 #

把父容器从div改成<button>——按钮本身自带可聚焦属性和交互语义，不需要额外的tabindex="0"，更符合可访问性规范。

2. 聚合子元素语义，避免重复播报 #

给所有视觉子元素添加aria-hidden="true"，同时通过一个视觉隐藏但屏幕阅读器可见的元素，把需要播报的内容聚合起来，让父元素（按钮）作为一个整体被读取。

3. 完整修改后的代码示例 #

<button class="Parent__item">
  <!-- 视觉内容全部隐藏语义，只保留视觉展示 -->
  <div class="media" aria-hidden="true">
    <div class="media__container">
      <div class="media__fallback"></div>
      <!-- 优化图片alt文本，更具描述性 -->
      <img src="https://filepath" alt="Instagram帖子商品图片">
    </div>  
    <div class="media__overlay">
      <div class="overlay__content">
        <div>
          <i class="instagram-icon"></i>
        </div>
        <div></div>
        <div class="content-element">Shop Now</div>
        <div>
          <div class="content-element">user</div>
        </div>
        <div class="content-element">3 years ago</div>
      </div>
    </div>
  </div>
  <!-- 屏幕阅读器专属的聚合内容，视觉隐藏 -->
  <span class="sr-only">Instagram帖子：用户user发布于3年前，点击查看商品详情</span>
</button>

添加视觉隐藏样式（.sr-only）：

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

4. 替代方案（如果必须用div作为父容器） #

如果因为样式或框架限制不能用button，可以保留div但补充语义属性：

<div class="Parent__item" tabindex="0" role="button" aria-label="Instagram帖子：用户user发布于3年前，点击查看商品详情">
  <div class="media" aria-hidden="true">
    <!-- 子元素结构不变 -->
  </div>
</div>

同时要给这个div添加键盘交互支持（监听Enter和Space键触发点击事件），确保键盘用户能操作，这也是WCAG的要求。

为什么之前的尝试无效？ #

• tabindex="-1"：仅阻止元素被Tab键聚焦，但自动浏览时屏幕阅读器依然会扫描并播报这些元素，所以无效。
• 直接给子元素加aria-hidden="true"：会完全隐藏子元素的语义，导致父元素聚焦时无法读取任何内容，因为没有保留聚合的语义描述。

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