ElementInternals: ariaLabelledByElements property

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 dấu cách để lấy tên truy cập.

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 cho mảng không ảnh hưởng đến giá trị của thuộc tính.

Mô tả

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

Thuộc tính phản ánh thuộc tính aria-labelledby của phần tử khi được xác định, 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 thuộc tính được đặt, 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 ánh và phạm vi, xem Tham chiếu phần tử được phản ánh trong hướng dẫn Thuộc tính được phản ánh.

Ví dụ

Lấy tên truy cập

Ví dụ này cho thấy cách ariaLabelledByElements có thể được sử dụng để lấy nhãn được xác định bằng aria-labelledby trong shadow root theo cách lập trình.

HTML

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

<div id="host">
  <template shadowrootmode="open">
    <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>
  </template>
</div>

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

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

JavaScript

Mã bên dưới trước tiên kiểm tra xem ariaLabelledByElements có được hỗ trợ hay không và nếu không, ghi kết quả và thoát. Nếu thuộc tính được hỗ trợ, trước tiên nó ghi giá trị của thuộc tính. Sau đó nó lặp qua các phần tử được trả về, nối văn bản bên trong của chúng, và ghi tên truy cập kết quả của phần tử.

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

// Get access to the input within shadowRoot
const hostElement = document.getElementById("host");
const shadowRoot = hostElement.shadowRoot;
const inputElement = shadowRoot.querySelector("input");

// Feature test for ariaLabelledByElements
if ("ariaLabelledByElements" in ElementInternals.prototype) {
  // Get and log attribute that provides the accessible name
  log(`aria-labelledby: ${inputElement.getAttribute("aria-labelledby")}`);

  // Get and log elements that provide the accessible name
  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("ariaLabelledByElements not supported by browser");
}

Kết quả

Nhật ký bên dưới hiển thị đầu ra của mã trên. Kết quả này sẽ hiển thị mảng các phần tử HTMLSpanElement được tham chiếu và tên truy cập kết quả từ văn bản bên trong của chúng.

Thông số kỹ thuật

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

Xem thêm

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