无障碍场景下如何配置锚元素标签，使屏幕阅读器读出完整内容？

阿华AIGC实验室

2026-5-29

解决屏幕阅读器同时播报链接文本和补充内容的问题

我明白你的困扰——想用符合无障碍标准的方式让JAWS同时播报"Link 3"和"Login Page"，又不想依赖问题多多的title属性。咱们一步步来解决：

首先得搞清楚为什么之前的aria-label只播报"Login Page"：aria-label会完全替换链接的原生可访问名称，它不会自动把原生文本和标签内容合并，所以原来的"3"被覆盖了，自然只读到补充内容。

下面是两个符合WCAG无障碍指南的可行方案：

方案1：直接在`aria-label`中包含完整内容

把你需要播报的所有内容都放进aria-label里，包括原来的"3"：

<a href="login.html" aria-label="3 Login Page">3</a>

这样JAWS会把aria-label的内容作为链接的完整可访问名称，播报为"Link 3 Login Page"，视觉上依然只显示"3"，完全满足需求。这个方案简单直接，适合内容比较短的场景。

方案2：用`aria-labelledby`关联可见文本和辅助文本

如果你希望保留原生文本的语义，或者需要更灵活的内容组合，可以用这个方法：

给链接添加一个id，再添加一个视觉隐藏的<span>存放补充内容
用aria-labelledby把链接本身和隐藏的辅助文本关联起来

代码示例：

<a href="login.html" id="login-link" aria-labelledby="login-link login-description">3</a>
<span id="login-description" class="sr-only">Login Page</span>

搭配视觉隐藏的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: 0;
}

这个方案的优势是更符合无障碍设计的语义化原则，它把可见内容和辅助内容分开管理，同时让屏幕阅读器组合两者播报，最终效果也是"Link 3 Login Page"。