Mục tiêu nhấn có thể truy cập được

Khi thiết kế hiển thị trên thiết bị di động, bạn nên đảm bảo rằng các phần tử tương tác như nút hoặc đường liên kết đủ lớn và có đủ không gian xung quanh để dễ dàng nhấn mà không vô tình chồng lên các phần tử khác. Điều này mang lại lợi ích cho tất cả người dùng, nhưng đặc biệt hữu ích cho những người bị suy giảm chức năng vận động.

Kích thước đích chạm tối thiểu được đề xuất là khoảng 48 pixel độc lập với thiết bị trên một trang web có khung nhìn dành cho thiết bị di động được đặt đúng cách. Ví dụ: mặc dù biểu tượng chỉ có chiều rộng và chiều cao là 24px, nhưng bạn có thể dùng thêm khoảng đệm để tăng kích thước mục tiêu nhấn lên 48px. Khu vực 48x48 pixel tương ứng với khoảng 9mm, gần bằng kích thước của vùng đầu ngón tay của một người.

Trong bản minh hoạ, tôi đã thêm khoảng đệm vào tất cả các đường liên kết để đảm bảo chúng đáp ứng kích thước tối thiểu.

Các mục tiêu chạm cũng phải cách nhau khoảng 8 pixel, cả theo chiều ngang và chiều dọc, để ngón tay của người dùng nhấn vào một mục tiêu nhấn không vô tình chạm vào một mục tiêu nhấn khác.

Kiểm thử mục tiêu chạm

Nếu mục tiêu của bạn là văn bản và bạn đã sử dụng các giá trị tương đối như em hoặc rem để định cỡ văn bản và khoảng đệm bất kỳ, bạn có thể sử dụng DevTools để kiểm tra xem giá trị được tính toán của khu vực đó có đủ lớn hay không. Trong ví dụ bên dưới, tôi đang sử dụng em cho văn bản và khoảng đệm.

Kiểm tra a của đường liên kết và trong Công cụ của Chrome cho nhà phát triển, hãy chuyển sang Ngăn đã tính toán để bạn có thể kiểm tra nhiều phần của hộp và xem kích thước pixel mà các phần đó phân giải. Trong Công cụ dành cho nhà phát triển Firefox có một Bảng điều khiển bố cục. Trong Bảng điều khiển đó, bạn sẽ có kích thước thực tế của phần tử được kiểm tra.

Bảng điều khiển Bố cục trong Firefox DevTools cho thấy kích thước của phần tử a

Sử dụng truy vấn nội dung nghe nhìn để phát hiện hoạt động sử dụng màn hình cảm ứng

Thay vì chỉ kiểm tra kích thước khung nhìn rồi đoán rằng kích thước nhỏ có thể là điện thoại hoặc máy tính bảng, từ đó sử dụng màn hình cảm ứng, giờ đây, bạn có thể áp dụng các cách hiệu quả hơn để điều chỉnh thiết kế dựa trên khả năng thực tế của thiết bị.

Một trong những tính năng đa phương tiện mà chúng ta hiện có thể kiểm thử bằng truy vấn đa phương tiện là liệu phương thức nhập chính của người dùng có phải là màn hình cảm ứng (pointer) hay không và liệu bất kỳ phương thức nhập nào hiện được phát hiện có phải là màn hình cảm ứng (any-pointer) hay không. Các tính năng pointerany-pointer sẽ trả về fine hoặc coarse. Con trỏ chính xác là khi người dùng sử dụng chuột hoặc bàn di chuột, ngay cả khi chuột đó được kết nối với điện thoại qua Bluetooth. Con trỏ coarse cho biết một màn hình cảm ứng, có thể là thiết bị di động nhưng cũng có thể là màn hình máy tính xách tay hoặc máy tính bảng lớn.

Nếu bạn đang điều chỉnh CSS trong một truy vấn nội dung nghe nhìn để tăng mục tiêu chạm, thì việc kiểm thử con trỏ thô sẽ cho phép bạn tăng mục tiêu nhấn cho tất cả người dùng màn hình cảm ứng. Điều này giúp tăng diện tích nhấn cho dù thiết bị là điện thoại hay thiết bị lớn hơn.

.container a {
  padding: .2em;
}

@media (any-pointer: coarse) {
  .container a {
    padding: .8em;
  }
}

Bạn có thể tìm hiểu thêm về các tính năng tương tác của nội dung đa phương tiện, chẳng hạn như con trỏ trong bài viết Kiến thức cơ bản về thiết kế web thích ứng.