Touch target & WCAG 2.5.5 — checklist cho FE dev và designer cùng tuân

WCAG 2.5.5 yêu cầu vùng chạm (touch target) tối thiểu cho mọi phần tử tương tác là 44x44 CSS pixels. Hãy cùng audit xem các ứng dụng tại Việt Nam đang làm như thế nào.

1. Kết quả audit thực tế

Trong số 20 ứng dụng di động phổ biến tại Việt Nam (bao gồm cả app ngân hàng và TMĐT), có đến 17 ứng dụng có các nút bấm quan trọng nhỏ hơn 36px. Điều này làm tăng tỷ lệ chạm nhầm (fat-finger error) lên gấp 3 lần.

2. Cách khắc phục bằng CSS

Với FE developer, bạn có thể tăng vùng chạm mà không làm thay đổi layout thị giác bằng cách sử dụng pseudo-element:

.btn-icon {
  position: relative;
}
.btn-icon::after {
  content: '';
  position: absolute;
  top: -10px; left: -10px; right: -10px; bottom: -10px;
}