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 會為連結開啟一個上下文選單。