Hướng dẫn WCAG 2.2 ‘2.5.8 Kích thước mục tiêu (tối thiểu)’ Mức AA
Mở đầu
WCAG 2.2 của “2.5.8 Kích thước mục tiêu (tối thiểu)” yêu cầu kích thước của mục tiêu đầu vào bằng con trỏ (ví dụ: nút bấm hoặc liên kết) phải ít nhất là 24×24 pixel CSS. Tiêu chuẩn này nhằm đảm bảo người dùng có thể thao tác chính xác với mục tiêu, đặc biệt là để ngăn ngừa thao tác sai trên màn hình cảm ứng hoặc các thiết bị nhỏ.
1. Khái quát tiêu chí
Yêu cầu
Mục tiêu đầu vào bằng con trỏ cần có kích thước ít nhất 24×24 pixel CSS. Tuy nhiên, có thể có ngoại lệ trong các trường hợp sau:
- Khi liên kết nằm trong văn bản nội tuyến
( Ví dụ: Liên kết trong đoạn văn ) - Khi mục tiêu trùng với mục tiêu khác cung cấp cùng một chức năng
( Ví dụ: Các biểu tượng có thể nhấp chồng lên nhau ) - Khi kích thước mục tiêu nhỏ do các hạn chế
( Ví dụ: Thiết kế không thể đảm bảo không gian cần thiết ) - Khi mục tiêu phụ thuộc vào tác nhân người dùng
( Ví dụ: Các điều khiển mặc định được cung cấp bởi trình duyệt )
2. Phương pháp triển khai
a. Đặt kích thước tối thiểu
Sử dụng min-height và min-width để đảm bảo kích thước của mục tiêu không bị nhỏ quá mức.
Ví dụ: Đặt kích thước tối thiểu cho nút bấm
HTML
<button>Gửi</button>
CSS
button {
min-width: 24px;
min-height: 24px;
padding: 8px;
}
- Cài đặt này sẽ đảm bảo nút có kích thước lớn hơn hoặc bằng 24×24 pixel.
b. Đảm bảo khoảng cách giữa các mục tiêu
Khi các mục tiêu quá gần nhau, nó có thể gây ra thao tác sai. Hãy đảm bảo có khoảng cách đủ giữa chúng.
Ví dụ: Đảm bảo khoảng cách giữa các mục tiêu
HTML
<div>
<button>Prev</button>
<button>Next</button>
</div>
CSS
button {
margin: 12px; /* Đảm bảo khoảng cách giữa các nút bấm */
}
c. Điều chỉnh mục tiêu trong thiết kế đáp ứng (responsive design)
Điều chỉnh kích thước mục tiêu một cách động tùy thuộc vào thiết bị và kích thước màn hình
Ví dụ: Kích thước mục tiêu trên màn hình nhỏ
CSS
@media (max-width: 600px) {
button {
min-width: 30px;
min-height: 30px;
}
}
d. Thiết kế liên kết nội tuyến một cách hợp lý
Thêm khoảng cách xung quanh liên kết nội tuyến để ngăn chặn việc liên kết bị thu nhỏ.
Ví dụ: Cải thiện khả năng thao tác của liên kết nội tuyến
HTML
<p>Vui lòng xem thêm chi tiết <a href="#">tại đây</a></p>
CSS
a {
padding: 5px; /* Mở rộng vùng dễ nhấp chuột */
}
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Mục tiêu quá nhỏ
Ví dụ thất bại
button {
width: 20px;
height: 20px;
}
Vấn đề
- Mục tiêu có kích thước nhỏ hơn 24×24 pixel CSS, làm tăng nguy cơ thao tác sai.
Biện pháp cải thiện
button {
min-width: 24px;
min-height: 24px;
}
b. Mục tiêu quá gần nhau
Ví dụ thất bại
- Nhiều nút bấm hoặc liên kết được bố trí gần nhau.
Biện pháp cải thiện
- Thêm đủ không gian giữa các mục tiêu.
4. Lợi ích của khả năng truy cập (accessibility)
a. Giảm thiểu thao tác sai
- Khi mục tiêu được bố trí với kích thước phù hợp, nó sẽ giúp ngăn ngừa thao tác sai, đặc biệt là trên các thiết bị cảm ứng.
b. Cải thiện tính dễ sử dụng
- Tất cả người dùng, bất kể kích thước tay hay ngón tay, đều có thể thao tác dễ dàng.
c. Cải thiện trải nghiệm người dùng
- Thiết kế rõ ràng và dễ thao tác mang lại cảm giác an tâm cho người dùng.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Xác nhận rằng kích thước của mỗi mục tiêu phải lớn hơn hoặc bằng 24×24 pixel CSS.
- Kiểm tra xem khoảng cách giữa các mục tiêu có đủ lớn và khó xảy ra thao tác sai hay không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra xem kích thước mục tiêu có đáp ứng các tiêu chuẩn hay không.
Tóm tắt
Tiêu chí “2.5.8 Kích thước mục tiêu (tối thiểu)” trong WCAG 2.2 nhằm mục đích đảm bảo tất cả các mục tiêu đầu vào bằng con trỏ có kích thước ít nhất 24×24 pixel CSS, từ đó cải thiện khả năng thao tác.
Điểm cần lưu ý khi triển khai
- Đặt kích thước tối thiểu của mục tiêu là 24×24 pixel CSS
- Điều chỉnh khoảng cách giữa các mục tiêu để ngăn ngừa thao tác sai
- Sử dụng thiết kế đáp ứng (responsive design) để cung cấp các mục tiêu dễ thao tác trên tất cả các thiết bị
Điều này giúp cung cấp nội dung web dễ sử dụng và dễ truy cập cho tất cả người dùng.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.