ARIA: link 角色 - ARIA | MDN

描述

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

当不使用语义化 HTML 实现其预期用途时，必须重新实现交互功能。例如，当 role="link" 添加到元素时，tab 键应该能够使链接获得焦点，并且 enter 键在获得焦点时应该执行链接。

使用值为 0 的 tabindex 属性，以确保链接处于正确的制表符焦点顺序中。

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

示例

要使用 link 角色在非 <a> 元素上创建可访问的链接，你需要确保链接在正确的制表符顺序中获得焦点，该元素看起来像一个链接，并且“链接”的行为像一个链接。

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

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

for (const link of fakeLinks) {
  link.addEventListener("click", navigateLink);
  link.addEventListener("keydown", navigateLink);
}

// handles click and keydown events 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 会为链接打开一个上下文菜单。