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 nhập của người dùng 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ác công nghệ hỗ trợ.

Trạng thái không hoạt động là 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 cho phép người dùng chọn rồi đóng 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.

Inert 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.

Cải thiện khả năng hỗ trợ tiếp cậ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 giúp bạn có thể 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 nằm 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ằm ngoài màn hình hoặc bị ẩn

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.

Lấy nét

Làm mất tiêu điểm là một khái niệm trung tâm của khả năng hỗ trợ tiếp cận tốt trên giao diện người dùng. Bạn nên đảm bảo tiêu điểm của trình đọc màn hình nằm trên các thành phần giao diện người dùng có thể tương tác và nhận biết được khi một thành phần đang chặn khả nă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 chỉ có thể truy cập vào nội dung có thể được tìm thấy. 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.
• Băng chuyền có các mục không hoạt động.
• Nội dung biểu mẫu không áp dụng (ví dụ: làm mờ và vô hiệu hoá các trường "Địa chỉ giao hàng" khi hộp đánh dấu "Giống với địa chỉ thanh toán" được đánh dấu).
• Tắt 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 một 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à 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à lựa chọn văn bản trong phần tử.

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