使用aria-describedby结合读屏专属元素在多款读屏软件中失效问题排查

问题背景 #

我尝试为屏幕阅读器用户提供链接列表的额外说明信息，因为不建议在<ul>上直接添加aria-label，所以采用了「仅屏幕阅读器可见的元素 + aria-describedby绑定<ul>」的方案，代码如下：

<span id="describer" aria-hidden=true> I'm a screenreader only element hidden with CSS</span>
<ul aria-describedby="describer">...</ul>

但这个方案只在MacOS的VoiceOver中表现正常（导航到<ul>时会读出描述文本），在NVDA、iOS VoiceOver、Android TalkBack中均失效，无法读出描述内容。

问题根源 #

核心问题出在**aria-hidden="true"的错误使用**：

• 这个属性会直接将元素从辅助技术的「可访问树」中移除，导致aria-describedby无法找到对应的描述元素。MacOS VoiceOver可能存在特殊兼容处理，但NVDA、TalkBack、JAWS等主流读屏软件严格遵循ARIA规范，因此无法读取到描述文本。
• 仅屏幕阅读器可见的元素（通过CSS隐藏视觉显示）本身不需要加aria-hidden="true"——这类CSS隐藏方式（比如clip-path、绝对定位移出视口）不会让视觉用户看到，但辅助技术仍能识别元素内容，添加aria-hidden反而会屏蔽它。

适配主流读屏的解决方案 #

以下几种方案均可兼容VO（Mac/iOS）、NVDA、TalkBack、JAWS：

方案1：修正aria-describedby的使用方式 #

去掉描述元素的aria-hidden="true"，保留仅屏幕阅读器可见的CSS样式：

<!-- 定义仅屏幕阅读器可见的CSS类 -->
<style>
.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;
}
</style>

<span id="describer" class="sr-only">这是供屏幕阅读器使用的链接列表说明文本</span>
<ul aria-describedby="describer">
  <li><a href="#">示例链接1</a></li>
  <li><a href="#">示例链接2</a></li>
</ul>

方案2：语义化包裹（推荐） #

用<figure>和<figcaption>组合实现，无需ARIA属性，语义化更清晰，读屏软件会自动关联描述与列表：

<figure>
  <figcaption class="sr-only">这是供屏幕阅读器使用的链接列表说明文本</figcaption>
  <ul>
    <li><a href="#">示例链接1</a></li>
    <li><a href="#">示例链接2</a></li>
  </ul>
</figure>

方案3：直接使用aria-label（简化方案） #

如果描述文本简洁明确，直接给<ul>添加aria-label也是可行的——虽然之前有「不建议」的说法，但主流读屏软件对aria-label在列表元素上的支持度非常好：

<ul aria-label="常用工具链接列表">
  <li><a href="#">示例链接1</a></li>
  <li><a href="#">示例链接2</a></li>
</ul>

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