Target ketuk tidak memiliki ukuran yang tepat

Target ketuk adalah area halaman web tempat pengguna perangkat sentuh dapat berinteraksi. Elemen tombol, link, dan formulir memiliki target ketuk.

Banyak mesin telusur memberi peringkat halaman berdasarkan seberapa mobile-friendly halaman tersebut. Memastikan target ketuk cukup besar dan cukup terpisah satu sama lain akan membuat halaman Anda lebih mobile-friendly dan mudah diakses.

Kegagalan audit target ketuk Lighthouse

Lighthouse menandai halaman dengan target ketuk yang memenuhi kedua kondisi berikut:

  • Target lebih kecil dari 48 px x 48 px.
  • Setidaknya 25% area target dalam jarak 48 piksel dari bagian tengah target tumpang tindih dengan target lain.
Audit Lighthouse yang menampilkan target ketuk berukuran tidak tepat

Saat audit gagal, Lighthouse akan mencantumkan hasilnya dalam tabel dengan tiga kolom:

Target Ketuk Target ketuk dengan ukuran yang tidak tepat.
Ukuran Ukuran persegi panjang pembatas target dalam piksel.
Target Tumpang-Tindih Target ketuk lainnya, jika ada, yang terlalu dekat.

Cara memperbaiki target ketuk

Opsi 1: Tingkatkan ukuran target ketuk yang terlalu kecil. Target ketuk yang berukuran 48 x 48 px tidak akan gagal dalam audit. Jika Anda memiliki elemen yang seharusnya tidak muncul lebih besar (misalnya, ikon), coba tingkatkan properti padding:

Target ketuk dengan ukuran yang sesuai
Gunakan padding untuk membuat target ketuk lebih besar tanpa mengubah tampilan elemen.

Opsi 2: Tingkatkan jarak antara target ketuk yang berdekatan menggunakan properti seperti margin. 8 px di antara target ketuk adalah titik awal yang baik, tetapi tidak selalu cukup spasi untuk lulus audit, terutama untuk target yang sangat kecil.

Referensi