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ông nghệ hỗ trợ.
Inert 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ở hộp thoại cho người dùng đưa ra lựa chọn rồi loại bỏ lựa chọn đó khỏi màn hình.
Sau khi bạn mở một <dialog>, phần còn lại của trang sẽ không hoạt động, 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 được nữa.
Bạn có thể dùng thuộc tính inert để đạt được hành vi tương tự trên các phần tử khác.
Trơ có nghĩa là thiếu khả năng di chuyển, vì vậy, khi đánh dấu một thứ gì đó ở trạng thái trơ, 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>
Ở đây, inert đã được khai báo trên phần tử <div> thứ hai chứa button2. Do đó, tất cả nội dung 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 nhấp vào được.
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 bẫy tâm điểm.
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ý tâm điểm và 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 phát hiện và tương tác. Trước đây, bạn có thể dùng aria-hidden="true" để chặn khả năng phát hiện, nhưng việc 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ẻ 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 phát hiện và khả năng tương tác, đồng thời cho phép bạn xây dựng các mẫu hữu ích và dễ tiếp cận hơn.
Có 2 trường hợp sử dụng chính để áp dụng inert cho một phần tử nhằm cải thiện 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 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.
Phần tử DOM ẩn hoặc ngoài màn hình
Một mối lo ngại thường gặp về khả năng hỗ trợ tiếp cận là với các phần tử như ngăn, trong đó thêm các phần tử vào DOM 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, thì 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 mối lo ngại thường gặp khác về khả năng hỗ trợ tiếp cận là khi thiết kế giao diện người dùng chỉ xuất hiện hoặc chỉ xuất hiện một phần, nhưng rõ ràng không mang tính tương tác. Ví dụ: việc này có thể xảy ra trong khi tải trang, trong khi biểu mẫu đang 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 chỉ rõ trạng thái của giao diện người dùng và "buộc" tiêu điểm vào phần tương tác trên trang.
Chặn lấy nét
Bẫy lấy nét là một khái niệm chính để đảm bảo khả năng tiếp cận tốt trên giao diện người dùng. Bạn nên đả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à 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 sau lớp phủ trang hoặc vô tình gửi biểu mẫu khi nội dung 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 Google chỉ truy cập được vào nội dung mở được. Điều này rất hữu ích đối với:
- Chặn các phần tử 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.
- Băng chuyền chứa 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à tắt các trường "Địa chỉ giao hàng" khi đánh dấu vào hộp "Giống như địa chỉ thanh toán").
- Tắt 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ạng thái tĩ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 nào 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ể nhìn thấy 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 trình phóng to và thậm chí 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 hoạt động của trang và có thể cảm thấy khó chịu nếu các phần trơ thể hiện rõ ràng là không hoạt động. Đối với từng chế độ điều khiển, thuộc tính bị vô hiệu hoá có thể phù hợp hơn.
Những lượt 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 và tiêu điểm. Đối với công nghệ hỗ trợ, thao tác này cũng sẽ chặn các thẻ và khả năng được 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.