如何优化屏幕阅读器下Combined links（组合链接）的无障碍体验

当前把teaser组件的图片、标题、描述、CTA全包裹在单个<a>标签里的做法，虽然符合WCAG同一目标多元素链接的规范，但确实会导致屏幕阅读器重复读取内容——先读整个链接的完整内容，后续导航时又逐个读取内部元素，体验很差。可以用这几个方法优化：

1. 用aria-labelledby定义链接的可访问名称，配合aria-hidden隐藏非核心元素 #

给链接指定清晰的可访问名称（比如标题+CTA），同时把不需要作为链接名称一部分的元素（图片、描述）设置aria-hidden="true"，让屏幕阅读器只读取一次完整的链接名称，不会再单独抓取内部元素。

示例代码：

<a href="目标跳转地址" aria-labelledby="teaser-title teaser-cta">
  <img src="图片路径" alt="" aria-hidden="true">
  <span id="teaser-title">产品标题</span>
  <p aria-hidden="true">产品描述文本，介绍产品核心优势...</p>
  <span id="teaser-cta">立即了解</span>
</a>

注意：图片的alt设为空字符串，因为已经通过aria-hidden隐藏，不需要再提供替代文本；如果图片是信息核心，也可以把图片的alt加入aria-labelledby的引用列表里。

2. 给内部元素添加tabindex="-1" #

如果某些元素需要保留视觉效果，但不能被键盘聚焦，也不会被屏幕阅读器单独识别，可以加上tabindex="-1"，配合aria-hidden使用，彻底避免这些元素成为独立的导航目标。

3. 优化可访问名称的简洁性 #

链接的可访问名称要清晰、无冗余，比如不要把“链接”“点击”这类词加进去，屏幕阅读器会自动识别链接类型；直接用「标题 + CTA文本」的组合，用户能快速理解链接的用途。

4. 多工具测试验证 #

用NVDA、VoiceOver、JAWS这些主流屏幕阅读器测试修改后的效果，确保在不同工具下都能正常读取，不会出现重复或遗漏的情况。

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