- Làm cho nút/liên kết/thẻ có kích thước dễ click/chạm/nhấn hơn và giảm việc bấm nhầm
- Tên gọi của “kích thước vùng đích” không thống nhất: Apple gọi là hit target, Google Material gọi là Touch target, WAI gọi là target size, Google Lighthouse gọi là Tap Target, còn trong cộng đồng thiết kế thường dùng Clickable Area
- Theo tiêu chuẩn WCAG, kích thước vùng đích nên ít nhất là 44 x 44 pixel CSS (Android là 48x48)
- Nếu nhỏ hơn, các vòng tròn chạm có thể chồng lấn lên nhau và gây ra click nhầm
- Google Design for Driving khuyến nghị mức tối thiểu là 76dp x 76dp
- Nên cung cấp phản hồi trực quan cho vùng đích (viền cho phần tử hoặc đảo nền)
- Với các vùng đích nhỏ hơn 24x24, cần để khoảng cách đủ lớn (ví dụ:
line-height: 1.4, padding: 1rem)
- Với ProgressBar cũng nên tăng
height để tạo đủ không gian chạm
- Giữa các đối tượng thực hiện cùng một hành động, nên loại bỏ Dead Target Area
- Có thể dùng các phần tử giả như
:before và :after để mở rộng kích thước vùng đích
- Với
label, nhớ gắn for để mở rộng kích thước vùng đích
- Với checkbox, có thể dùng
padding-block để tăng kích thước vùng đích
- Thêm
padding cho cả nút và liên kết văn bản
- Với các mục trong danh sách, dùng
padding và display:flex để mở rộng theo toàn bộ kích thước mục
- Cách kiểm tra kích thước vùng đích: dùng DevTools, áp dụng CSS Outline, hoặc dùng trình duyệt Polypane
1 bình luận
Nội dung quá hay nên tôi xem tác giả là ai thì hóa ra là Ahmad Shadeed. Mỗi khi đọc các bài anh ấy viết, tôi thực sự chỉ biết thán phục.