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 chế độ 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ẽ trở nên không hoạt động, ví dụ: bạn không thể nhấp hoặc nhấn phím tab vào 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.

Tĩnh có nghĩa là không có khả năng di chuyển, vì vậy, khi đánh dấu một phần tử là tĩnh, bạn sẽ 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>

Tại đây, inert đã được khai báo trên phần tử <div> thứ hai chứa button2, vì vậy, tất cả 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 được nhấp vào.

Thuộc tính inert đặc biệt hữu ích cho khả năng hỗ trợ tiếp cận, đặc biệt là để ngăn chặn việc giữ tiêu điểm.

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

Nguyên tắc về khả năng tiếp cận đối với nội dung web yêu cầu việc quản lý tiêu điểm và thứ tự tiêu điểm hợp lý, hữu dụng. Chỉ số 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, bạn có thể ngăn khả năng khám phá bằng aria-hidden="true", nhưng tương tác thì khó hơn.

inert cho phép nhà phát triển xoá một phần tử khỏi thứ tự thẻ và 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 khám phá và tương tác, đồng thời cho phép tạo các mẫu hữu ích và dễ tiếp cận hơn.

Có hai trường hợp sử dụng chính để áp dụng inert cho một phần tử nhằm hỗ trợ tiếp cận tốt hơ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 được 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à với các phần tử như ngăn, thêm các phần tử vào DOM mà người dùng không phải lúc nào cũng nhìn thấy. Với inert, bạn có thể đảm bảo rằng trong 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ử đó.

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 thiết kế giao diện người dùng hiển thị hoặc hiển thị một phần nhưng rõ ràng là không tương tác. Ví dụ: trong quá trình tải trang, trong khi gửi biểu mẫu hoặc nếu một 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" tiêu điểm 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 độc hại truy cập vào lớp phủ trang hoặc vô tình gửi biểu mẫu trong khi lần gửi đầu tiên vẫn đang 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. Thông tin 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 thu hút 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.

Chỉ báo trực quan các phần tử inert

Theo mặc định, không có chỉ báo trực quan nào cho biết một cây con đang ở trạng thái rảnh. Bạn nên đánh dấu rõ ràng những phần của DOM đang hoạt động và những phần không hoạt động.

[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 có kính lúp, và thậm chí cả người dùng chỉ sử dụng cửa sổ đặc biệt nhỏ có thể không nhìn 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 không hoạt động không rõ ràng là không hoạt động. Đối với các chế độ điều khiển riêng lẻ, thuộc tính disabled (tắt) có thể phù hợp hơn.

Những thao tác và chuyển động nào bị chặn?

Theo mặc định, inert chặn sự kiện nhấp và sự kiện lấy tiêu điểm. Đối với các công nghệ hỗ trợ, việc này cũng chặn tính năng nhấn phím 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.