使用aria-description时如何让屏幕阅读器仅读描述？或调整朗读顺序？

一、仅播报aria-description内容，忽略内部文本 #

要让屏幕阅读器（如Narrator）只朗读aria-description的"abc"、跳过内部的"def"，核心是让内部文本对屏幕阅读器不可见，同时保留aria-description的可访问性，具体有两种实现方式：

方法1：用aria-hidden="true"隐藏内部文本 #

将内部文本包裹在子元素中并设置aria-hidden="true"，屏幕阅读器会忽略该子元素内容，仅读取父元素的aria-description：

<span aria-description="abc">
  <span aria-hidden="true">"def"</span>
</span>

方法2：用视觉隐藏类隐藏内部文本（保留视觉显示） #

如果需要在页面上显示"def"但不让屏幕阅读器读取，可通过CSS视觉隐藏类将其移出视口：

.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;
}

<span aria-description="abc">
  <span class="sr-only">"def"</span>
</span>

注：若无需显示"def"，直接删除内部文本、仅保留aria-description即可。

二、先朗读内部文本，再播报aria-description #

多数屏幕阅读器（包括Narrator）默认会优先读取元素可见文本，随后读取aria-description的补充信息，若需确保顺序稳定，可参考两种方式：

方法1：保持原有结构 #

直接使用原HTML结构即可，Narrator会按"def" → "abc"的顺序播报：

<span aria-description="abc">"def"</span>

方法2：用aria-describedby关联描述（兼容性更强） #

通过aria-describedby绑定隐藏的描述元素，能更稳定地实现"主文本+补充描述"的播报顺序：

<span aria-describedby="desc-id">"def"</span>
<span id="desc-id" class="sr-only">abc</span>

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