Mac Voiceover未读取链接aria-describedby描述的问题咨询

VoiceOver对原生<a>标签的aria-describedby处理逻辑和<button>不同，不会默认关联播报描述文本，以下是几个符合WCAG标准的可行解决方案：

方案一：用aria-labelledby关联链接文本与描述文本 #

通过aria-labelledby同时指定链接文本和描述文本的ID，强制VoiceOver按顺序读取两者内容，保留原生<a>标签语义。

<ul> 
  <li id="desc1"> 
    Check out the video report for last year's 
    <a href="festival.htm" aria-labelledby="link-text-1 desc1">
      <span id="link-text-1">National Folk Festival</span>
    </a>. 
  </li> 
  <li id="li2"> 
    <a href="listen.htm">Listen to the instruments</a> 
  </li> 
  <li id="desc3"> 
    Guitar Man: George Golden talks about 
    <a href="mkguitars.htm" aria-labelledby="link-text-3 desc3">
      <span id="link-text-3">making guitars</span>
    </a>. 
  </li> 
</ul>

• aria-labelledby会按ID顺序拼接内容，VoiceOver会先播报链接文本，再播报对应的描述文本
• 无需修改标签类型，保持原生链接的交互行为和语义

方案二：添加视觉隐藏的辅助文本 #

在<a>标签内嵌入视觉隐藏的辅助文本，直接将描述内容整合到链接的可读取文本中，兼容所有主流屏幕阅读器。

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
</style>
<ul> 
  <li id="li1"> 
    Check out the video report for last year's 
    <a href="festival.htm">
      National Folk Festival
      <span class="sr-only">: Check out the video report for last year's National Folk Festival</span>
    </a>. 
  </li> 
  <li id="li2"> 
    <a href="listen.htm">Listen to the instruments</a> 
  </li> 
  <li id="li3"> 
    Guitar Man: George Golden talks about 
    <a href="mkguitars.htm">
      making guitars
      <span class="sr-only">: Guitar Man: George Golden talks about making guitars</span>
    </a>. 
  </li> 
</ul>

• 视觉隐藏类.sr-only遵循WCAG标准，仅对屏幕阅读器可见
• 链接的语义和交互完全原生，VoiceOver会完整读取链接文本+隐藏辅助文本

方案三：配合title属性优化兼容 #

虽然title属性不是无障碍首选（键盘导航时不可见），但VoiceOver对<a>标签的title支持较好，可结合aria-describedby实现多阅读器兼容：

<ul> 
  <li id="li1"> 
    Check out the video report for last year's 
    <a href="festival.htm" aria-describedby="li1" title="Check out the video report for last year's National Folk Festival">National Folk Festival</a>. 
  </li> 
  <li id="li2"> 
    <a href="listen.htm">Listen to the instruments</a> 
  </li> 
  <li id="li3"> 
    Guitar Man: George Golden talks about 
    <a href="mkguitars.htm" aria-describedby="li3" title="Guitar Man: George Golden talks about making guitars">making guitars</a>. 
  </li> 
</ul>

• title内容需与描述文本完全一致，避免信息冲突
• 适合需要快速兼容，且描述文本较短的场景

注意事项 #

• 避免给<button>添加role="link"：原生<a>标签的语义和交互支持更稳定，阅读器对自定义角色的处理容易出现兼容性问题
• 优先选择方案一或方案二，它们完全符合WCAG无障碍标准，且在所有主流阅读器中表现一致

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