网页无障碍：分页相邻重复链接（同URL）问题解决方案咨询

这个问题完全可以解决，无需忽略。WAVE触发告警的核心原因是：相同URL的两个链接没有明确的功能区分，会给屏幕阅读器用户造成混淆。以下是几种实用的修复方案：

方案1：给「Next」链接补充明确的ARIA标签 #

通过aria-label为「Next」链接添加功能说明，让屏幕阅读器能区分它和页码链接的不同用途：

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li>
      <a href="/1/"
         aria-label="Page 1"
         aria-current="page">
        1
      </a>
    </li>
    <li><a href="/2/" aria-label="Page 2">2</a></li>
    <li><a href="/3/" aria-label="Page 3">3</a></li>
    <li><a href="/4/" aria-label="Page 4">4</a></li>
    <li><a href="/5/" aria-label="Page 5">5</a></li>
    <li><a href="/2/" aria-label="Next page, Page 2">Next</a></li>
  </ul>
</nav>

此时屏幕阅读器会读出「Next page, Page 2」，和页码链接的「Page 2」形成清晰区分，WAVE将不再判定为冗余链接。

方案2：将「Next」改为按钮元素（JS控制跳转场景） #

如果分页逻辑依赖JavaScript处理跳转，可把「Next」的<a>标签换成<button>，配合JS实现页面跳转，从根源上避免URL重复的问题：

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li>
      <a href="/1/"
         aria-label="Page 1"
         aria-current="page">
        1
      </a>
    </li>
    <li><a href="/2/" aria-label="Page 2">2</a></li>
    <li><a href="/3/" aria-label="Page 3">3</a></li>
    <li><a href="/4/" aria-label="Page 4">4</a></li>
    <li><a href="/5/" aria-label="Page 5">5</a></li>
    <li><button onclick="window.location.href='/2/'" aria-label="Go to next page, Page 2">Next</button></li>
  </ul>
</nav>

注意必须给按钮添加合适的aria-label，确保无障碍体验不受影响。

方案3：添加视觉隐藏的语义补充文本 #

保留链接结构的同时，给「Next」链接添加屏幕阅读器可见但视觉隐藏的补充文本，既不改变视觉效果，又能明确功能差异：

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li>
      <a href="/1/"
         aria-label="Page 1"
         aria-current="page">
        1
      </a>
    </li>
    <li><a href="/2/" aria-label="Page 2">2</a></li>
    <li><a href="/3/" aria-label="Page 3">3</a></li>
    <li><a href="/4/" aria-label="Page 4">4</a></li>
    <li><a href="/5/" aria-label="Page 5">5</a></li>
    <li><a href="/2/">Next <span class="sr-only">(Page 2)</span></a></li>
  </ul>
</nav>

配套的视觉隐藏样式代码：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

以上方案均能有效解决WAVE的冗余链接告警，同时提升页面的无障碍适配能力，没必要忽略这个问题。

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