ElementInternals: ariaInvalid property

Baseline 2023
Newly available

Since October 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Thuộc tính ariaInvalid của giao diện ElementInternals phản ánh giá trị của thuộc tính aria-invalid. Liên quan đến các vai trò application, checkbox, combobox, gridcell, listbox, radiogroup, slider, spinbutton, textboxtree, nó thông báo cho API truy cập liệu giá trị đã nhập có phù hợp với định dạng mà ứng dụng mong đợi hay không.

Note: Việc đặt thuộc tính ARIA trên ElementInternals cho phép xác định ngữ nghĩa mặc định trên một phần tử tùy chỉnh. Chúng có thể bị ghi đè bởi các thuộc tính do tác giả định nghĩa, nhưng đảm bảo rằng ngữ nghĩa mặc định được duy trì trong trường hợp tác giả xóa các thuộc tính đó, hoặc không thêm chúng vào. Để biết thêm thông tin, xem giải thích về Mô hình Đối tượng Truy cập.

Giá trị

Một chuỗi với một trong các giá trị sau:

"true"

Phần tử không hợp lệ.

"false" (mặc định)

Phần tử không ở trạng thái không hợp lệ.

"grammar"

Phần tử ở trạng thái không hợp lệ do phát hiện lỗi ngữ pháp.

"spelling"

Phần tử ở trạng thái không hợp lệ do phát hiện lỗi chính tả.

Ví dụ

Trong ví dụ này, chúng ta định nghĩa và tạo một phần tử <custom-text>, sau đó lấy giá trị của ariaInvalid từ phần tử <custom-text> đầu tiên trong tài liệu.

js
class CustomControl extends HTMLElement {
  constructor() {
    super();
    this._internals = this.attachInternals();
    this._internals.ariaInvalid = "false";
  }
  // …
}

window.customElements.define("custom-text", CustomControl);

const element = document.querySelector("custom-text");
console.log(element._internals.ariaInvalid);

Thông số kỹ thuật

Thông số kỹ thuật
Accessible Rich Internet Applications (WAI-ARIA)
# dom-ariamixin-ariainvalid

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

Xem thêm