Thuộc tính inert

Emma Twersky

Thuộc tính inert là một thuộc tính HTML chung giúp đơn giản hoá cách xoá và khôi phục các sự kiện do người dùng nhập cho một phần tử, bao gồm cả sự kiện lấy tiêu điểm và sự kiện từ công nghệ hỗ trợ.

Trơn là một hành vi mặc định trong các phần tử hộp thoại, chẳng hạn như khi bạn sử dụng showModal để mở một hộp thoại để người dùng lựa chọn rồi loại bỏ hộp thoại đó khỏi màn hình. Sau khi mở <dialog>, phần còn lại của trang sẽ chuyển sang trạng thái trơ, Ví dụ: bạn không thể nhấp hoặc nhấn phím tab để chuyển đến các đường liên kết nữa.

Bạn có thể sử dụng thuộc tính inert để đạt được hành vi tương tự trên các phần tử khác.

Inert nghĩa là không có khả năng cử động, vì vậy, khi bạn đánh dấu thứ gì đó là trơ, bạn xoá chuyển động hoặc tương tác khỏi các phần tử DOM đó.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Ở đây, inert đã được khai báo trên phần tử <div> thứ hai chứa button2, vì vậy, mọi nội dung có trong <div> này, bao gồm cả nút và nhãn, đều không thể nhận tiêu điểm hoặc không thể nhấp vào.

Thuộc tính inert đặc biệt hữu ích cho việc hỗ trợ tiếp cận, đặc biệt là để ngăn tình trạng bẫy lấy nét.

Hỗ trợ tiếp cận tốt hơn

Nguyên tắc hỗ trợ tiếp cận nội dung web yêu cầu quản lý tiêu điểm và một thứ tự tiêu điểm hợp lý và hữu dụng. Điều này bao gồm cả khả năng được phát hiện và khả năng tương tác. Trước đây, khả năng được phát hiện bằng aria-hidden="true" có thể bị hạn chế nhưng khả năng tương tác sẽ khó hơn.

inert cho phép nhà phát triển xoá một phần tử khỏi thứ tự thẻ cũng như khỏi cây hỗ trợ tiếp cận. Điều này cho phép bạn kiểm soát cả khả năng phát hiện và tương tác, đồng thời giúp xây dựng các mẫu dễ sử dụng và dễ tiếp cận hơn.

Có hai trường hợp sử dụng chính khi áp dụng inert cho một phần tử nhằm tăng khả năng hỗ trợ tiếp cận:

• Khi một phần tử là một phần của cây DOM, nhưng ngoài màn hình hoặc bị ẩn.
• Khi một phần tử là một phần của cây DOM, nhưng không tương tác.

Các phần tử DOM ẩn hoặc ngoài màn hình

Một vấn đề thường gặp về hỗ trợ tiếp cận là các phần tử như ngăn, để thêm các phần tử vào DOM mà không phải lúc nào người dùng cũng nhìn thấy. Với inert, bạn có thể đảm bảo rằng khi các phần tử phụ của ngăn nằm ngoài màn hình, người dùng bàn phím không thể vô tình tương tác với phần tử đó.

Các phần tử DOM không tương tác

Một vấn đề phổ biến khác về khả năng hỗ trợ tiếp cận là khi một thiết kế giao diện người dùng có thể nhìn thấy hoặc nhìn thấy một phần, nhưng rõ ràng là không có tính tương tác. Điều này có thể xảy ra trong khi tải trang, trong khi biểu mẫu đang được gửi hoặc nếu lớp phủ hộp thoại đang mở.

Để mang lại trải nghiệm tốt nhất cho người dùng, hãy cho biết trạng thái của giao diện người dùng và "bẫy" tập trung vào phần tương tác của trang.

Giữ lấy tiêu điểm

Bẫy tiêu điểm là khái niệm chính để hỗ trợ tiếp cận giao diện người dùng hiệu quả. Bạn phải đảm bảo rằng tiêu điểm của trình đọc màn hình nằm trên các thành phần tương tác trên giao diện người dùng và nhận biết được khi nào một thành phần đang chặn hoạt động tương tác. Điều này cũng giúp hạn chế trình đọc màn hình giả mạo truy cập phía sau lớp phủ trang hoặc vô tình gửi biểu mẫu khi lần gửi đầu tiên vẫn đang được xử lý.

Khi sử dụng inert, bạn có thể đảm bảo rằng nội dung duy nhất có thể tìm thấy đều truy cập được. Điều này hữu ích cho:

• Các phần tử chặn như hộp thoại phương thức, trình đơn giữ tiêu điểm hoặc điều hướng bên.
• Một băng chuyền chứa các mặt hàng không hoạt động.
• Nội dung không áp dụng trong biểu mẫu (ví dụ: mờ dần và tắt các trường "Địa chỉ giao hàng" khi hộp đánh dấu "Giống như địa chỉ thanh toán" đã được đánh dấu).
• Vô hiệu hoá toàn bộ giao diện người dùng khi ở trạng thái không nhất quán.

Biểu thị trực quan các phần tử inert

Theo mặc định, không có dấu hiệu trực quan nào cho biết cây con đang trơ. Bạn nên đánh dấu rõ ràng phần nào của DOM đang hoạt động và phần nào là trơ.

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

Không phải người dùng nào cũng có thể xem tất cả các phần của trang cùng một lúc. Ví dụ: người dùng trình đọc màn hình, thiết bị nhỏ hoặc kính lúp và thậm chí người dùng chỉ sử dụng cửa sổ đặc biệt nhỏ có thể không thấy phần đang hoạt động của trang và có thể cảm thấy khó chịu nếu các phần trơ không rõ ràng là trơ. Đối với các chế độ điều khiển riêng lẻ, thuộc tính bị tắt có thể phù hợp hơn.

Những hoạt động tương tác và chuyển động nào bị chặn?

Theo mặc định, inert sẽ chặn các sự kiện nhấp chuột và sự kiện tiêu điểm. Đối với các công nghệ hỗ trợ, chính sách này cũng chặn việc hiển thị thẻ và khả năng phát hiện. Trình duyệt cũng có thể bỏ qua tính năng tìm kiếm trang và chọn văn bản trong phần tử.

Giá trị mặc định của inert là false.