如何让文章列表中的重复链接符合WCAG无障碍标准？

针对你遇到的文章卡片链接无障碍问题，以下是两种场景的具体实现方案：

场景1：文本相同但指向不同URL的链接（如多个「Learn more」指向不同文章） #

核心思路是给每个重复文本的链接补充屏幕阅读器可识别的唯一语义描述，视觉上保持原有文本不变：

方案A：使用aria-label属性 #

直接给CTA链接添加aria-label，把文章标题整合进去，让屏幕阅读器读出完整的目标信息：

<div>
  <a href="xyz"><h3>XYZ tile heading</h3></a>
  <p>Summary text</p>
  <a href="xyz" aria-label="Learn more about XYZ tile heading">
    <span>Learn more button</span>
  </a>
</div>

对于特殊CTA（如「Download PDF」「Access hub」），同样补充关键信息：

<a href="xyz-pdf" aria-label="Download PDF: XYZ tile heading">
  <span>Download PDF</span>
</a>

方案B：使用视觉隐藏文本 #

如果需要让复制链接文本时也包含完整描述，可以添加视觉隐藏的补充文本（需配合对应的CSS样式）：

<!-- CSS样式（需全局引入） -->
<style>
.visually-hidden {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
</style>

<!-- 卡片代码 -->
<div>
  <a href="xyz"><h3>XYZ tile heading</h3></a>
  <p>Summary text</p>
  <a href="xyz">
    <span>Learn more button</span>
    <span class="visually-hidden"> about XYZ tile heading</span>
  </a>
</div>

场景2：文本不同但指向同一URL的链接（如卡片标题和CTA指向同一文章） #

核心是让屏幕阅读器识别两个链接指向同一资源，避免重复提示：

方案A：使用aria-labelledby关联标题 #

给标题元素设置唯一ID，让CTA链接通过aria-labelledby引用该ID，语义上关联两者：

<div>
  <a href="xyz">
    <h3 id="tile-heading-1">XYZ tile heading</h3>
  </a>
  <p>Summary text</p>
  <a href="xyz" aria-labelledby="tile-heading-1">
    <span>Learn more button</span>
  </a>
</div>

这种方式下，屏幕阅读器读取CTA时会直接读出标题文本，同时保留视觉上的「Learn more」按钮。

方案B：统一aria-label描述 #

给两个链接设置相同的aria-label，明确它们指向同一目标：

<div>
  <a href="xyz" aria-label="XYZ tile heading">
    <h3>XYZ tile heading</h3>
  </a>
  <p>Summary text</p>
  <a href="xyz" aria-label="XYZ tile heading - Learn more">
    <span>Learn more button</span>
  </a>
</div>

这样既保留了CTA的功能提示，又让屏幕阅读器识别两者的关联性。

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