Hướng dẫn WCAG 2.2 ‘2.5.5 Kích thước mục tiêu (Tăng cường)’ Mức AAA
Mở đầu
Tiêu chuẩn ‘2.5.5 Kích thước mục tiêu (Tăng cường)’ trong WCAG 2.2 yêu cầu kích thước của mục tiêu điều khiển bằng con trỏ (ví dụ: chuột hoặc ngón tay) phải ít nhất là 44×44 pixel CSS. Tiêu chuẩn này nhằm cải thiện tình huống khi các mục tiêu quá nhỏ khó thao tác, đặc biệt là để cải thiện khả năng sử dụng trên các thiết bị di động hoặc màn hình cảm ứng.
1. Khái quát tiêu chí
Yêu cầu
Các mục tiêu cần thao tác bằng con trỏ (ví dụ: nút bấm, liên kết, v.v.) phải có kích thước ít nhất là 44×44 pixel CSS.
Ngoại lệ
Ngoại lệ được công nhận trong các trường hợp sau:
- Khi liên kết được đặt ở dạng inline
（Ví dụ: Liên kết trong đoạn văn） - Khi mục tiêu cung cấp phương án thay thế tương đương
（Ví dụ: Có thể thực hiện cùng một thao tác bằng phương pháp khác） - Khi mục tiêu có kích thước nhỏ do những hạn chế không thể thiếu
（Ví dụ: Bố cục cụ thể có kích thước pixel bị hạn chế） - Khi mục tiêu phụ thuộc vào trình duyệt của người dùng
（Ví dụ: Điều khiển của trình duyệt）
2. Phương pháp triển khai
a. Tăng kích thước mục tiêu lên ít nhất 44×44 pixel CSS
Xác định rõ kích thước mục tiêu và làm cho nó dễ dàng thao tác bằng ngón tay hoặc con trỏ
Ví dụ: Đảm bảo kích thước của nút bấm
HTML
<button>Gửi</button>
CSS
button {
width: 44px;
height: 44px;
padding: 10px;
font-size: 16px;
}
b. Cải thiện khả năng thao tác với liên kết inline
Liên kết inline trong đoạn văn thường có kích thước nhỏ, nhưng việc thêm khoảng trắng xung quanh sẽ giúp thao tác dễ dàng hơn.
Ví dụ: Đảm bảo khoảng trắng xung quanh liên kết inline.
HTML
<p>Vui lòng xem chi tiết <a href="#">tại đây</a></p>
CSS
a {
padding: 10px;
}
c. Điều chỉnh khoảng cách để ngăn chặn sự trùng lặp của các mục tiêu
Khi có nhiều mục tiêu gần nhau, đảm bảo khoảng cách phù hợp.
Ví dụ: Đảm bảo không gian giữa các mục tiêu
HTML
<div>
<button>Quay lại</button>
<button>Tiếp theo</button>
</div>
CSS
button {
margin: 10px;
}
d. Áp dụng kích thước mục tiêu trong thiết kế đáp ứng (responsive design)
Điều chỉnh kích thước mục tiêu tùy theo kích thước màn hình
Ví dụ: Sử dụng media query
CSS
@media (max-width: 600px) {
button {
width: 60px;
height: 60px;
}
}
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 style="width: 30px; height: 30px;">Click</button>
Vấn đề
- Kích thước nhỏ hơn 44×44 pixel CSS, đặc biệt là khó thao tác trên màn hình cảm ứng.
Biện pháp cải thiện
<button style="width: 44px; height: 44px;">Click</button>
b. Nhiều mục tiêu tập trung gần nhau
Ví dụ thất bại
- Các nút bấm hoặc liên kết quá gần nhau, làm tăng nguy cơ thao tác sai.
Biện pháp cải thiện
- Đảm bảo khoảng cách đủ giữa các mục tiêu.
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện khả năng thao tác trên thiết bị cảm ứng
- Giảm thiểu sai sót khi thao tác trên màn hình cảm ứng.
b. Cải thiện trải nghiệm người dùng
- Người dùng có khiếm thị hoặc khuyết tật vận động cũng sẽ dễ dàng thao tác hơn.
c. Tính nhất quán trong thiết kế
- Có thể cung cấp giao diện rõ ràng và nhất quán.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Đo kích thước của từng mục tiêu và đảm bảo chúng có kích thước tối thiểu là 44×44 pixel CSS.
- Kiểm tra khoảng cách giữa các mục tiêu và xác nhận xem có ít khả năng 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 kích thước mục tiêu.
Tóm tắt
Tiêu chuẩn ‘2.5.5 Kích thước mục tiêu (Tăng cường)’ trong WCAG 2.2 nhằm mục đích cải thiện khả năng thao tác bằng cách đảm bảo rằng các mục tiêu điều khiển bằng con trỏ có kích thước tối thiểu là 44×44 pixel CSS.
Điểm cần lưu ý khi triển khai
- Đặt kích thước mục tiêu tối thiểu là 44×44 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.
- Tận dụng thiết kế đáp ứng (responsive design) để cung cấp kích thước tối ưu cho từng 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.