ARIA: vai trò link

Một widget link cung cấp một tham chiếu tương tác tới một tài nguyên. Tài nguyên đích có thể là bên ngoài hoặc cục bộ; tức là nằm ngoài hoặc trong trang hay ứng dụng hiện tại.

Note: Khi có thể, bạn nên dùng phần tử <a> gốc thay vì vai trò link, vì các phần tử gốc được user agent và công nghệ hỗ trợ hỗ trợ rộng rãi hơn. Các phần tử <a> gốc cũng hỗ trợ yêu cầu về bàn phím và tiêu điểm theo mặc định, không cần tùy biến thêm.

Mô tả

Vai trò link được dùng để xác định một phần tử tạo ra một siêu liên kết tới tài nguyên nằm trong ứng dụng hoặc bên ngoài.

Khi không dùng HTML ngữ nghĩa đúng mục đích, các tính năng tương tác phải được triển khai lại. Ví dụ, khi thêm role="link" vào một phần tử, phím tab nên cho phép đưa tiêu điểm vào liên kết và phím enter nên thực thi liên kết khi được focus.

Dùng thuộc tính tabindex với giá trị 0 để bảo đảm liên kết nằm đúng thứ tự tab focus.

Warning: Việc áp dụng vai trò link lên một phần tử sẽ không khiến trình duyệt tăng cường phần tử đó với kiểu hiển thị hay hành vi liên kết chuẩn, như gạch chân, vòng focus, điều hướng tới đích liên kết hay các hành động menu ngữ cảnh. Đó là trách nhiệm của nhà phát triển.

Ví dụ

Để tạo lại một liên kết có trợ năng bằng cách dùng vai trò link trên một phần tử không phải <a>, bạn cần bảo đảm liên kết nhận tiêu điểm theo đúng thứ tự tab, phần tử trông giống một liên kết, và "liên kết" hoạt động như một liên kết.

html

<span data-href="https://mozilla.org" tabindex="0" role="link">
  Liên kết trợ năng giả được tạo bằng 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);
}

// xử lý các sự kiện click và keydown trên liên kết
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");
    }
  }
}

Nếu phần tử có role="link" nhận sự kiện phím Enter, nó sẽ thực thi liên kết, đi tới trang được liên kết hoặc chuyển tiêu điểm tới đích trong trang.

Tùy chọn, Shift + F10 sẽ mở menu ngữ cảnh cho liên kết.