Element: thuộc tính ariaLabelledByElements

Giá trị

Một mảng các phần tử. Văn bản bên trong của các phần tử này có thể được nối với nhau bằng dấu cách để lấy tên dễ tiếp cận.

Khi đọc, mảng được trả về là tĩnh và chỉ đọc. Khi ghi, mảng được gán sẽ được sao chép: các thay đổi tiếp theo đối với mảng không ảnh hưởng đến giá trị của property.

Mô tả

Property này là một giải pháp thay thế linh hoạt cho việc sử dụng thuộc tính aria-labelledby để thiết lập tên dễ tiếp cận. Không giống như aria-labelledby, các phần tử được gán cho property này không cần có thuộc tính id.

Property này phản chiếu thuộc tính aria-labelledby của phần tử khi nó được định nghĩa, nhưng chỉ cho các giá trị id tham chiếu được liệt kê khớp với các phần tử hợp lệ trong phạm vi. Nếu property được thiết lập, thì thuộc tính tương ứng sẽ bị xóa. Để biết thêm thông tin về tham chiếu phần tử được phản chiếu và phạm vi, xem Tham chiếu phần tử phản chiếu trong hướng dẫn Thuộc tính phản chiếu.

Ví dụ

Lấy tên dễ tiếp cận

Ví dụ này cho thấy cách ariaLabelledByElements có thể được sử dụng để lấy nhãn ARIA được định nghĩa bằng cách sử dụng aria-labelledby.

HTML

HTML định nghĩa hai phần tử <span> và tham chiếu id của chúng trong thuộc tính aria-labelledby của một <input>. Tên dễ tiếp cận của <input> là sự nối liền của văn bản bên trong của hai phần tử được tham chiếu, phân tách bằng dấu cách.

<span id="label_1">Street name</span>
<input aria-labelledby="label_1 label_2" />
<span id="label_2">(just the name, no "Street" or "Road" or "Place")</span>

<pre id="log"></pre>

#log {
  height: 70px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

Đoạn mã dưới đây trước tiên ghi lại giá trị của thuộc tính aria-labelledby từ Element.getAttribute() (một chuỗi liệt kê các giá trị id của các phần tử được tham chiếu). Sau đó kiểm tra xem ariaLabelledByElements có được hỗ trợ không, và nếu có, ghi lại giá trị của nó. Cuối cùng trả về chuỗi dễ tiếp cận, được tính bằng cách lặp qua các phần tử và nối văn bản bên trong của chúng.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const inputElement = document.querySelector("input");
log(`aria-labelledby: ${inputElement.getAttribute("aria-labelledby")}`);
// Feature test for ariaLabelledByElements
if ("ariaLabelledByElements" in Element.prototype) {
  // Get ariaLabelledByElements
  const labelElements = inputElement.ariaLabelledByElements;
  log(`ariaLabelledByElements: ${labelElements}`);

  // Log inner text of elements to get accessible name
  const text = labelElements.map((e) => e.textContent.trim()).join(" ");
  log(`Accessible name: ${text.trim()}`);
} else {
  log("element.ariaLabelledByElements: not supported by browser");
}

Kết quả

Nhật ký dưới đây cho thấy các tham chiếu phần tử ban đầu, các phần tử liên kết/được trả về và tên dễ tiếp cận. Lưu ý rằng ví dụ không làm gì với văn bản được nhập vào <input> tên đường phố.

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Thuộc tính aria-labelledby
• ElementInternals.ariaLabelledByElements
• Tham chiếu phần tử phản chiếu trong hướng dẫn Phản chiếu thuộc tính.