Touch Targets

Touch Targets là gì?

Touch Targets (mục tiêu chạm) là diện tích tối thiểu trên màn hình cảm ứng mà người dùng cần nhấn hoặc chạm bằng ngón tay để kích hoạt một yếu tố tương tác — như nút bấm, liên kết, biểu tượng menu, nút đóng quảng cáo hay ô nhập liệu. Đây không phải là kích thước của nội dung hiển thị (ví dụ chữ trên nút), mà là kích thước vùng cảm ứng thực tế được trình duyệt và hệ điều hành nhận diện.

Theo hướng dẫn chính thức từ Google (tài liệu Mobile-Friendly Test và Core Web Vitals), kích thước tối thiểu khuyến nghị cho touch target là 48x48 pixel CSS (tương đương khoảng 9–10mm trên thiết bị di động phổ biến). Khoảng cách giữa các touch targets cũng quan trọng: nên giữ ít nhất 8 pixel CSS giữa các mục để tránh chạm nhầm.

Tại sao quan trọng trong SEO?

Touch targets không ảnh hưởng trực tiếp đến thứ hạng như từ khóa hay backlink, nhưng lại tác động mạnh tới 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 di động — đặc biệt trong thuật toán Core Web Vitals và Mobile-First Indexing.

• Tỷ lệ thoát (bounce rate) tăng nếu người dùng chạm sai, không thực hiện được hành động mong muốn → Google hiểu trang khó dùng.
• Thời gian tương tác giảm khi người dùng phải cố gắng nhấn nhiều lần → làm suy yếu chỉ số engagement.
• Mobile-Friendly Test thất bại: Nếu nhiều touch target dưới 48x48px và không có khoảng cách đủ, trang bị Google đánh dấu là "không thân thiện với thiết bị di động", ảnh hưởng gián tiếp đến khả năng xếp hạng trên tìm kiếm di động.
• Trải nghiệm người khuyết tật: Touch targets đủ lớn hỗ trợ người dùng có độ chính xác vận động thấp — yếu tố nằm trong tiêu chuẩn WCAG 2.1 (tiêu chí 2.5.5: Target Size), góp phần vào tính toàn dụng (accessibility), một yếu tố ngày càng được Google ưu tiên.

Cách hoạt động

Trình duyệt di động (Chrome, Safari) đọc thuộc tính CSS và HTML để xác định vùng cảm ứng. Khi người dùng chạm, hệ điều hành ghi nhận toạ độ điểm chạm và so sánh với vùng được khai báo cho từng phần tử. Nếu toạ độ nằm trong vùng, sự kiện click hoặc tap được kích hoạt.

Một số nguyên tắc nền tảng:

• Touch target được tính dựa trên diện tích thực tế trên màn hình (physical pixels), không phải điểm ảnh logic (CSS pixels) — nhưng do đa số thiết bị hiện đại dùng tỉ lệ device pixel ratio (DPR) ≥ 2, nên 48px CSS thường tương đương ~96–144 physical pixels, đảm bảo độ rõ ràng.
• Nếu phần tử không có kích thước rõ ràng (ví dụ: thẻ <a> chỉ chứa văn bản), trình duyệt sẽ lấy kích thước nội dung + padding/margin được áp dụng. Vì vậy, padding là công cụ chính để mở rộng touch target mà không làm thay đổi bố cục hiển thị.
• Google khuyến nghị sử dụng min-width và min-height thay vì chỉ width/height để đảm bảo touch target không bị co nhỏ bởi CSS khác.

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

1. Kiểm tra hiện trạng: Dùng Chrome DevTools → chọn chế độ Device Toolbar → bật Toggle device pixel ratio và kiểm tra kích thước các nút bằng công cụ Inspect Element. Xem phần Computed → size.
2. Áp dụng kích thước tối thiểu: Đặt min-width: 48px; min-height: 48px; cho tất cả nút, liên kết hành động và biểu tượng tương tác.
3. Sử dụng padding thay vì chỉ tăng font: Thay vì viết font-size: 20px;, hãy thêm padding: 12px 16px; để mở rộng vùng chạm an toàn.
4. Đảm bảo khoảng cách giữa các mục: Dùng margin hoặc gap (trong Flex/Grid) tối thiểu 8px giữa các touch target liền kề.
5. Tránh chồng lấn hoặc che khuất: Các lớp overlay (popup, banner, sticky header) không được cắt xén vùng chạm — kiểm tra bằng Rendering → Paint flashing trong DevTools.
6. Test trên thiết bị thật: Một số lỗi chỉ xuất hiện khi chạm thật (do độ trễ, độ nhạy, góc nghiêng màn hình) — ưu tiên test trên iPhone, Samsung Galaxy và thiết bị Android giá rẻ (vì màn hình nhỏ hơn, DPI thấp hơn).

Lỗi thường gặp

Lỗi	Hệ quả	Cách khắc phục
Nút chỉ có văn bản, không có padding	Kích thước chạm = chiều cao dòng chữ (~20–24px) → quá nhỏ	Thêm padding: 12px 20px; và min-height: 48px;
Liên kết dạng icon (ví dụ: <i class="fa-search"></i>)	Icon chỉ 16–24px, không đủ vùng chạm	Bọc icon trong thẻ <button> hoặc <a> có display: inline-flex, đặt width/height: 48px, căn giữa bằng align-items/justify-content
Form input không có label rõ ràng hoặc label không clickable	Người dùng chạm vào label nhưng không kích hoạt ô nhập liệu	Dùng thẻ <label for="id"> khớp với id của <input>, hoặc bọc cả <input> trong <label>
Touch target bị thu nhỏ bởi transform: scale(0.8) hoặc zoom	Kích thước thực tế bị giảm, gây chạm sai	Tránh dùng transform hoặc zoom trên phần tử tương tác; nếu bắt buộc, điều chỉnh min-width/min-height theo tỉ lệ nghịch

Ví dụ thực tế

Ví dụ 1 – Nút đặt hàng trên website thương mại điện tử
❌ Sai: <button style="font-size: 14px; padding: 4px 8px;">Mua ngay</button> → kích thước chạm chỉ ~28x24px.
✅ Đúng: <button style="min-width: 48px; min-height: 48px; padding: 12px 20px; font-size: 16px;">Mua ngay</button>

Ví dụ 2 – Menu điều hướng dạng hamburger
❌ Sai: Icon ☰ được vẽ bằng SVG 20x20px, không có vùng chạm bao quanh.
✅ Đúng: Bọc SVG trong thẻ <button> có width: 48px; height: 48px;, dùng display: flex; align-items: center; justify-content: center; để căn giữa.

Ví dụ 3 – Liên kết chia sẻ mạng xã hội
❌ Sai: Các icon Facebook/Twitter được đặt cạnh nhau với margin 0 → dễ chạm nhầm.
✅ Đúng: Mỗi icon nằm trong thẻ <a> có min-width: 44px; min-height: 44px;, kèm margin: 0 6px; → tổng khoảng cách giữa các mục ≥ 8px.

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

Touch target 48x48px áp dụng cho mọi thiết bị?

Không hoàn toàn. Google khuyến nghị 48x48px CSS cho thiết bị di động phổ biến, nhưng trên tablet hoặc màn hình lớn hơn, có thể tăng lên 60x60px để cải thiện độ chính xác. Trên thiết bị nhỏ hơn (ví dụ: smartwatch), yêu cầu có thể thay đổi — tùy trường hợp.

Có thể dùng em hoặc rem thay vì px cho touch target?

Có thể, nhưng cần đảm bảo giá trị tương đương 48px ở kích thước font gốc (16px). Ví dụ: min-width: 3rem; (vì 3 × 16 = 48). Tuy nhiên, px vẫn là lựa chọn an toàn nhất vì không phụ thuộc vào cài đặt font người dùng — đặc biệt với người khuyết tật dùng phông chữ lớn.

Touch target ảnh hưởng đến tốc độ tải trang không?

Không. Việc điều chỉnh kích thước và padding không làm tăng kích thước file HTML/CSS đáng kể, cũng không ảnh hưởng đến thời gian render hay FCP/LCP. Đây là tối ưu hoá UX thuần tuý, không liên quan đến hiệu năng kỹ thuật — nhưng lại nâng cao chỉ số INP (Interaction to Next Paint), một phần của Core Web Vitals.