ARIA：链接角色

link 小部件提供对资源的交互式引用。目标资源可以是外部的，也可以是本地的；即可以是在当前页面或应用程序之外，也可以是在当前页面或应用程序之内。

注意：尽可能使用原生 <a> 元素而不是 link 角色，因为原生元素得到更广泛的用户代理和辅助技术的支持。原生 <a> 元素还默认支持键盘和焦点要求，无需进行额外的自定义。

描述

link 角色用于标识创建一个超链接到应用程序或外部资源的元素。

当不按预期使用语义 HTML 时，必须重新实现交互式功能。例如，当将 role="link" 添加到元素时，tab 键应启用将焦点赋予链接，而 enter 键应在链接获得焦点时执行链接。

使用 tabindex 属性并将其值设置为 0，以确保链接位于正确的选项卡焦点顺序中。

警告：将 link 角色应用于元素不会导致浏览器使用标准链接外观或行为增强元素，例如下划线、焦点环、导航到链接目标或上下文菜单操作。这是开发人员的责任。

示例

要在不是 <a> 的元素上使用 link 角色重新创建可访问链接，您需要确保链接在正确的选项卡顺序中接收焦点，该元素看起来像链接，并且“链接”的行为像链接。

html
<span data-href="https://mozilla.org" tabindex="0" role="link">
  Fake accessible link created using a span
</span>

CSS

css
span[role="link"] {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
span[role="link"]:hover,
span[role="link"]:active,
span[role="link"]:focus {
  color: purple;
}

span[role="link"]:focus {
  background-color: palegoldenrod;
  outline: 1px dotted;
}

JavaScript

js
const fakeLinks = document.querySelectorAll('[role="link"]');

for (let i = 0; i < fakeLinks.length; i++) {
  fakeLinks[i].addEventListener("click", navigateLink);
  fakeLinks[i].addEventListener("keydown", navigateLink);
}

//handles clicks and keydowns on the link
function navigateLink(e) {
  if (e.type === "click" || e.key === "Enter") {
    const ref = e.target ?? e.srcElement;
    if (ref) {
      window.open(ref.getAttribute("data-href"), "_blank");
    }
  }
}

如果具有 role="link" 的元素接收 Enter 键事件，则会执行链接，转到链接页面或将焦点移动到页面内目标。

可选地，Shift + F10 会为链接打开上下文菜单。

最佳实践

各种小部件角色用于定义常见的交互式模式。类似于文档结构角色，这些角色中的一些，包括 link 角色，复制了得到良好支持的原生 HTML 元素的语义，不应该使用。

避免使用 link，我们出于完整性考虑将其包含在内。具有可访问交互性的 <a> 语义等效项可用且受支持。

优先使用 HTML

使用 <a> 代替。

注意：无需在 HTML 链接上包含 role="link"，因为 <a> 默认情况下已具有该角色。

规范

规范
可访问富互联网应用 (WAI-ARIA)
# 链接

另请参阅