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)
# 連結

另請參閱