Mobile Tap Target Size

Mobile Tap Target Size là gì?

Mobile Tap Target Size (kích thước vùng chạm trên thiết bị di động) là kích thước tối thiểu được khuyến nghị cho các yếu tố tương tác như nút bấm, liên kết, biểu tượng hoặc ô nhập liệu — nhằm đảm bảo người dùng có thể chạm chính xác bằng đầu ngón tay mà không bị nhầm hoặc bỏ sót. Theo hướng dẫn của Google và tiêu chuẩn WCAG, kích thước tối thiểu nên là 48x48 pixel CSS (không tính khoảng cách đệm xung quanh), tương đương khoảng 7–10 mm trên màn hình thực tế.

Giá trị này không phụ thuộc vào độ phân giải màn hình hay mật độ điểm ảnh (DPR), mà được tính dựa trên pixel CSS — đơn vị đo lường độc lập với thiết bị, do trình duyệt quy đổi từ pixel vật lý theo hệ số zoom và DPR.

Tại sao quan trọng trong SEO?

Tap target size không trực tiếp ảnh hưởng đến thứ hạng như từ khóa hay backlink, nhưng lại tác động mạnh đến các tín hiệu trải nghiệm người dùng (UX signals) mà Google dùng để đánh giá chất lượng trang trên thiết bị di động — đặc biệt trong thuật toán Core Web Vitals và Mobile-First Indexing.

Cụ thể:

• Tỷ lệ thoát (bounce rate) tăng khi người dùng khó chạm đúng mục tiêu → Google hiểu trang kém thân thiện với di động.
• Thời gian tương tác giảm do phải phóng to, cuộn lại hoặc nhấn sai nhiều lần.
• Google Search Console báo lỗi “Clickable elements too close together” trong báo cáo Mobile Usability, ảnh hưởng đến xếp hạng di động.
• Trang không đạt yêu cầu tap target có thể bị loại khỏi kết quả tìm kiếm ưu tiên trên điện thoại trong một số trường hợp cạnh tranh cao.

Cách hoạt động

Trình duyệt di động xác định vùng chạm dựa trên bounding box của phần tử HTML (bao gồm padding, border, nhưng không tính margin). Khi người dùng chạm vào bất kỳ điểm nào trong vùng này, trình duyệt coi đó là thao tác hợp lệ.

Google kiểm tra điều kiện sau khi thu thập trang:

1. Xác định tất cả phần tử có khả năng tương tác: <a>, <button>, <input type="submit">, <label> gắn với input, v.v.
2. Đo kích thước hiển thị thực tế (tính theo pixel CSS) của từng phần tử — kể cả khi bị thu nhỏ bởi transform: scale() hoặc zoom.
3. Kiểm tra khoảng cách giữa các vùng chạm liền kề: nếu hai vùng chạm cách nhau dưới 8px CSS, chúng bị coi là “quá gần”, gây nguy cơ chạm nhầm.

Hướng dẫn thực hiện

Để đảm bảo tuân thủ, bạn cần áp dụng đồng thời ở cấp CSS và HTML:

1. Đặt kích thước tối thiểu rõ ràng: Dùng min-width: 48px; min-height: 48px; cho nút/lien kết. Tránh chỉ dựa vào nội dung văn bản để tạo kích thước.
2. Sử dụng padding thay vì width/height cố định: Với nút dạng text, thêm padding: 12px 16px; thường đủ để đạt 48px chiều cao (tùy font-size), linh hoạt hơn và giữ bố cục khi nội dung thay đổi.
3. Đảm bảo label đi kèm input có vùng chạm riêng: Nếu dùng <input id="age"><label for="age">Tuổi</label>, hãy bao toàn bộ label trong thẻ <label> hoặc đặt display: block; + padding cho label.
4. Tránh chồng chéo vùng chạm: Không đặt hai nút quá sát nhau. Giữ khoảng cách tối thiểu 8px CSS giữa các cạnh ngoài cùng của vùng chạm.
5. Kiểm tra trên thiết bị thật: Dùng chế độ “Device Toolbar” trong Chrome DevTools (chọn “Nexus 5X” hoặc “iPhone SE”) và bật “Show rulers” để đo trực tiếp.

Lỗi thường gặp

Lỗi	Nguyên nhân	Cách khắc phục
Nút chỉ rộng 24px do font-size nhỏ	Dùng font-size: 12px + padding thấp → tổng chiều cao < 40px	Thêm min-height: 48px; và padding: 14px 16px;
Liên kết dạng text không có nền	Chỉ có văn bản, không có padding hoặc background → vùng chạm = kích thước dòng chữ	Bọc trong <span> có padding, hoặc dùng display: inline-block; + min-dimensions
Hai nút “Đăng ký” và “Đăng nhập” cách nhau 4px	Margin-bottom của nút 1 = 0, margin-top của nút 2 = 0 → không đủ khoảng cách an toàn	Thêm margin-bottom: 8px; cho nút đầu, hoặc dùng gap: 8px; nếu dùng Flexbox/Grid

Ví dụ thực tế

Ví dụ 1 – Sai:

<a href="/contact" style="font-size: 14px; padding: 4px 8px;">Liên hệ</a>

→ Chiều cao thực tế ≈ 26px → không đạt chuẩn.

Ví dụ 2 – Đúng:

<a href="/contact" style="display: inline-block; min-width: 48px; min-height: 48px; padding: 12px 16px; text-align: center;">Liên hệ</a>

→ Đạt 48x48px, dễ chạm, không phụ thuộc vào nội dung.

Ví dụ 3 – Nút icon: Một biểu tượng menu hamburger (<div class="hamburger">) chỉ rộng 32px → cần bao ngoài bằng <button> có width: 48px; height: 48px; và padding: 8px; để đảm bảo vùng chạm đầy đủ.

Câu hỏi thường gặp

1. Có bắt buộc phải đúng 48x48px không?

Không bắt buộc tuyệt đối, nhưng đây là ngưỡng an toàn được Google công bố. Các kích thước nhỏ hơn (ví dụ 44x44px) vẫn chấp nhận nếu có khoảng cách đủ lớn giữa các mục và không gây nhầm lẫn. Tuy nhiên, 48x48px là mức được khuyến nghị mạnh nhất cho mọi trường hợp.

2. Tap target size có áp dụng với desktop không?

Không. Tiêu chuẩn này chỉ dành riêng cho thiết bị cảm ứng (mobile/tablet). Trên desktop, Google không kiểm tra kích thước vùng chạm — thay vào đó tập trung vào focus order, keyboard navigation và contrast ratio.

3. Có cần kiểm tra trên mọi thiết bị không?

Không cần kiểm tra từng model cụ thể. Chỉ cần đảm bảo kích thước tính theo pixel CSS đạt 48x48px ở chế độ viewport mặc định (width=device-width). Việc hiển thị trên iPhone 15 hay Samsung Galaxy S24 sẽ tự điều chỉnh nhờ hệ số DPR — miễn là bạn không dùng device-pixel-ratio trong CSS hay JavaScript để can thiệp thủ công. Cách kiểm tra đáng tin cậy nhất là qua Google Search Console > Mobile Usability hoặc Lighthouse (Audits > Best Practices).