PAYATHON 2026

如何让导航中重复的 Overview、API 等链接名称更易于无障碍访问？

数据小许

结论：分组可以提供上下文，但不会自动补全链接名称

HTML 和 ARIA 没有通用的分组属性，能让所有子链接自动获得“分组名称 + 链接文字”的无障碍名称。

嵌套列表有助于表达导航的层级关系。屏幕阅读器用户按文档顺序阅读时，可以借助前面的分组文字理解链接。通过 Tab 在链接间移动或打开屏幕阅读器的链接列表时，分组文字不一定会随每个链接一起播报。

如果希望链接脱离周围内容后仍然容易辨认，需要把必要的上下文纳入链接本身的无障碍名称。可以使用完整的可见文字、视觉隐藏文字或 aria-labelledby。原示例中的 aria-label 也可以达到这一目的。

用 aria-labelledby 复用分组名称

aria-labelledby 可以引用多个元素，并按属性中 ID 的排列顺序组合名称。每个链接可以先引用自己的可见文字，再引用共享的分组文字，避免重复编写整段标签。

下面只展示原导航中的部分链接；示例 URL 需要替换为实际地址：

<nav aria-label="Documentation">
  <ul>
    <li>
      <span id="control-label">Control system</span>
      <ul>
        <li>
          <a href="/control-system/overview/"
             aria-labelledby="control-overview-label control-label">
            <span id="control-overview-label">Overview</span>
          </a>
        </li>
        <li>
          <a href="/control-system/api/"
             aria-labelledby="control-api-label control-label">
            <span id="control-api-label">API</span>
          </a>
        </li>
      </ul>
    </li>
    <li>
      <span id="unattended-label">Unattended operation</span>
      <ul>
        <li>
          <a href="/unattended-operation/overview/"
             aria-labelledby="unattended-overview-label unattended-label">
            <span id="unattended-overview-label">Overview</span>
          </a>
        </li>
        <li>
          <a href="/unattended-operation/reference/"
             aria-labelledby="unattended-reference-label unattended-label">
            <span id="unattended-reference-label">Reference</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

这些链接的无障碍名称依次为：

  • Overview Control system
  • API Control system
  • Overview Unattended operation
  • Reference Unattended operation

每个链接都需要明确引用分组文字。父元素的 aria-label 或 aria-labelledby 只为该元素命名，不会自动把名称添加到子链接上。

如果导航由模板或组件生成，可以让组件统一生成这些 ID 和引用关系，减少手工维护。页面中的 ID 必须唯一，引用的元素必须存在。

aria-label 和隐藏文字也可以使用

原示例中的写法有效：

<a href="/control-system/overview/"
   aria-label="Control system overview">Overview</a>

aria-label 会替代链接内容提供的默认名称，因此标签应保留可见文字所表达的名称，以免视觉用户看到“Overview”，辅助技术却只得到“Control system”。维护和翻译时，也要同步更新可见文字和标签。

另一种做法是在链接内加入视觉隐藏的上下文：

<a href="/control-system/overview/">
  Overview<span class="visually-hidden">, Control system</span>
</a>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

这样可以保持视觉导航简短，同时让链接名称包含上下文。隐藏这段文字时，不要使用 display: none、visibility: hidden 或 aria-hidden=“true”，否则它通常不会参与这种基于链接内容的名称计算。

如果页面布局允许，直接显示“Control system overview”这样的完整链接文字，维护起来会更简单，也能让所有用户看到相同的信息。

名称顺序取决于用户如何查找链接

不能假定所有屏幕阅读器用户都偏好同一种顺序。可以根据导航的主要使用方式选择：

顺序更适合的查找方式需要考虑的影响
Overview, Unattended operation先找页面类型，例如 Overview 或 API同名页面需要继续听后面的分组名称
Unattended operation overview先找功能或系统分组同组链接会反复以相同文字开头

对于这种按功能分组、可见文字又是 Overview、API 的导航，可以优先尝试“链接文字在前、分组名称在后”。这样名称开头与可见文字一致，用户能先听到当前链接的区别，再听到所属分组。

如果需要将分组名称放在前面，只需调整 aria-labelledby 中两个 ID 的顺序。实际播报的停顿和附加信息会受屏幕阅读器、浏览器及用户设置影响，不宜依赖逗号等标点产生固定效果。

检查链接独立出现时是否仍然清楚

验证时应覆盖三种使用方式：按文档顺序阅读导航、用 Tab 在链接之间移动，以及通过屏幕阅读器的链接列表查找页面。重点确认同名链接能否区分、标签是否过长，以及分组信息是否产生了明显的重复负担。

为 nav 命名有助于识别导航区域，保留列表层级有助于识别结构。要让独立出现的“Overview”或“API”有明确含义，仍需在链接名称中提供足够的上下文。

备注：内容仅供参考。