Tap Target Là Gì? Kích Thước Nút Bấm Chuẩn Trên Di Động

Tap target là gì và vì sao kích thước của nó quan trọng?

Tap target là vùng của trang web mà người dùng thiết bị cảm ứng tương tác được. Nút, link và các phần tử của form đều có tap target. Theo tài liệu Lighthouse, vùng chạm đủ lớn và đủ xa nhau làm trang thân thiện với di động hơn và dễ dùng hơn cho mọi người.

web.dev giải thích con số 48: vùng 48 x 48 pixel tương ứng khoảng 9 mm, cỡ phần thịt đầu ngón tay của một người. Vùng chạm nhỏ hơn mức đó thì ngón tay dễ phủ sang phần tử kế bên. Vùng chạm đủ lớn có lợi cho mọi người dùng, nhất là người gặp khó khăn về vận động.

Vùng chạm tính theo ngón tay người dùng, không tính theo kích thước hình vẽ của nút.

Chuẩn kích thước và khoảng cách tap target là bao nhiêu?

Chuẩn kích thước tap target là khoảng 48 x 48 pixel độc lập thiết bị, trên trang đã khai thẻ viewport đúng, và các vùng chạm cách nhau khoảng 8 pixel theo cả chiều ngang lẫn chiều dọc. Hai con số này lấy từ web.dev và tài liệu Lighthouse của Google. Vùng chạm 48 x 48 px không bao giờ bị Lighthouse nêu.

Khi trang không đạt, Lighthouse liệt kê ba cột: phần tử có vùng chạm chưa đạt, kích thước khung của nó tính bằng pixel, và phần tử nào đang nằm quá gần. Chi tiết ở tài liệu Lighthouse về tap target.

48 x 48 px và cách nhau 8 px là hai con số cần nhớ.

Sửa tap target quá nhỏ hoặc quá sát nhau bằng cách nào?

Sửa tap target theo hai hướng mà tài liệu Lighthouse nêu: tăng kích thước vùng chạm quá nhỏ, và tăng khoảng cách giữa các vùng chạm quá sát nhau. Phần tử không nên to ra về hình, như icon, thì tăng padding để vùng chạm lớn lên mà hình giữ nguyên.

Ba cách sửa

• Tăng padding: icon rộng 24 px thêm padding để vùng chạm đạt 48 px, hình vẽ không đổi.
• Tăng khoảng cách: dùng margin giữa các vùng chạm. 8 px là mức khởi đầu, vùng chạm rất nhỏ có thể cần nhiều hơn.
• Dò theo kiểu thiết bị: dùng media query pointer: coarse để tăng vùng chạm cho mọi màn hình cảm ứng, không đoán theo bề ngang.

Những chỗ hay thiếu vùng chạm: link trong chân trang, số trang, icon mạng xã hội, nút đóng và các link đứng sát nhau trong một đoạn. Hướng dẫn gốc ở bài Accessible tap targets của web.dev.

Tăng padding trước, vì nó sửa vùng chạm mà không đụng tới thiết kế.

Kiểm tra tap target của một trang bằng cách nào?

Kiểm tra tap target bằng Chrome DevTools và bằng chính ngón tay trên điện thoại thật. Trong DevTools, chọn phần tử rồi mở khung Computed để xem từng lớp của hộp, gồm nội dung, padding, viền, cho ra bao nhiêu pixel. Cách này cần khi kích thước khai bằng em hoặc rem.

Ba bước kiểm

1. Mở chế độ thiết bị: trong Chrome DevTools, bật thanh công cụ thiết bị và chọn một bề ngang điện thoại.
2. Đo từng phần tử: bấm chọn nút hoặc link, mở khung Computed và đọc kích thước hộp.
3. Bấm thử trên máy thật: dùng ngón cái bấm lần lượt menu, nút gọi, link chân trang và các ô của form.

Bề ngang cần kiểm và các lỗi hiển thị khác trên di động nằm ở bài mobile-first design checklist và bài SEO WordPress #17: mobile.

Đo bằng DevTools để biết con số, bấm bằng ngón tay để biết cảm giác.

Tap target nằm ở đâu trong bảng chuẩn SQA-200?

Tap target là mục P1.20 trong bảng chuẩn SQA-200, thuộc trụ cột I về kỹ thuật và Core Web Vitals, trọng số 1 điểm. Chuẩn đạt của mục này: nút và link trên di động có vùng chạm tối thiểu 48 x 48 px. Mục này đứng giữa mục responsive và mục thẻ viewport của trụ cột.

Các mục đứng cạnh P1.20 trong trụ cột I

• P1.18 Robots.txt Efficiency: robots.txt chặn vùng quản trị, trang kết quả tìm kiếm và tham số staging để khỏi phí crawl budget.
• P1.19 Mobile Responsive Design: trang hiển thị co giãn ở bề ngang 320 tới 430 px, không cuộn ngang.
• P1.21 Viewport Tag Alignment: thẻ meta viewport khai width=device-width, initial-scale=1.0.
• P1.22 Pagination Tag Logic: trang lưu trữ nhiều trang có rel next/prev hoặc xử lý tham số canonical gọn.

Toàn bộ 99 mục kiểm, chuẩn đạt và điểm từng mục nằm ở bài SQA-200 là gì, mục này ở dòng P1.20 Tap Target Spacing.

P1.20 đạt khi mọi nút và link trên di động có vùng chạm từ 48 x 48 px trở lên.

Người làm website hay hỏi gì về tap target?

Người làm website hay hỏi ba câu về tap target: nút có bắt buộc to đúng 48 px không, link trong đoạn văn tính thế nào, và tap target có liên quan gì tới chuẩn tiếp cận. Ba câu trả lời dưới đây lấy từ tài liệu Lighthouse và web.dev của Google.

Nút có bắt buộc phải vẽ to đúng 48 px không?

Không. Con số 48 px nói về vùng chạm, không nói về hình vẽ của nút. Một icon rộng 24 px vẫn đạt nếu có thêm padding để vùng chạm quanh nó lên tới 48 px. Tài liệu Lighthouse gợi ý đúng cách này cho những phần tử không nên to hơn về mặt hình ảnh.

Hai link đứng sát nhau thì có bị tính lỗi không?

Lighthouse chỉ nêu một vùng chạm khi nó vừa nhỏ hơn 48 x 48 px, vừa có ít nhất 25% diện tích quanh tâm chồng lên vùng chạm khác. Hai link nhỏ đứng sát nhau dễ rơi vào trường hợp này. Cách sửa là tăng khoảng cách bằng margin, bắt đầu từ 8 px, hoặc tăng padding của từng link.

Tap target có liên quan tới chuẩn tiếp cận không?

Có. web.dev xếp tap target vào nhóm bài về khả năng tiếp cận, vì vùng chạm đủ lớn giúp mọi người dùng và đặc biệt giúp người gặp khó khăn về vận động. Các tiêu chí tiếp cận khác của một website, như tương phản màu và alt ảnh, nằm ở bài WCAG 2.1 AA.

Vùng chạm đủ lớn là việc của cả SEO di động lẫn khả năng tiếp cận.