Menentukan Ukuran Tap Target Yang Ideal di Website Seluler

Menentukan Ukuran Tap Target Yang Ideal di Website Seluler - Apa yang dimaksud dengan tap target? Tap targets adalah area ketuk elemen interaktif situs web yang dapat diklik seperti tombol dan link, ukuran atau size tap target situs web yang ideal pada layar seluler adalah 48 x 48px, ketetapan size tap target tersebut sudah di perhitungkan oleh para ahli agar elemen interaktif pada halaman web cukup besar dan memiliki cukup ruang di sekitarnya, mudah untuk diklik tanpa tumpang tindih dengan elemen lain.

Ukuran tap target atau target sentuh minimum yang disarankan adalah sekitar 48 piksel di situs seluler dengan jarak pandang "viewport" yang ditetapkan dengan benar. Misalnya, meskipun sebuah ikon hanya memiliki lebar dan tinggi 24px, kamu dapat menggunakan bantalan tambahan seperti margin dan padding untuk membawa ukuran tap target ke 48px sehingga sesuai dengan area jari seseorang.

Sekarang bagaimana cara mengidentifikasi size tap target website? Untuk mengidentifikasi atau mengetahui size tap tab target website yang sudah ada, kita membutuhkan alat yang mampu dan terpercaya mengaudit situs web yaitu Lighthouse, kamu dapat menggunakan ekstensi Lighthouse Chrome atau bisa juga dengan menggunakan tool open source web.dev measure.

1. Kunjungi https://web.dev/measure
2. Tempelkan url situs, dan
3. Klik Jalankan Audit, kemudian
4. Setelah audit selesai dijalankan klik View Report untuk melihat laporan lengkap

Pada bagian bawah hasil laporan, di kategori SEO kamu dapat melihat apakah setiap elemen "tap targets" di situs anda 100% lulus audit atau tidak, jika tidak kamu juga dapat melihat secara rinci elemen interaktif mana saja yang tidak memenuhi syarat atau tidak memiliki ukuran yang tepat (tidak ideal).

Tap targets are not sized appropriately

Setelah mengetahui elemen interaktif mana saja yang tidak memiliki area ketuk yang sesuai maka akan lebih mudah untuk memperbaikinya (membuat ukuran tap target ke area 48px).

Contoh Memperbaiki Tap Target

Sebelum diperbaiki pengaturan pada css label di situs blog saya borisinil.blogspot.com adalah sebagai berikut.
[code type="CSS"].cloud-label-widget-content{text-align:left;overflow:hidden;}
.cloud-label-widget-content .label-size{float:left;display:block;padding:4px 5px;margin-right:2px;margin-bottom:2px;background-color:#008066;color:#fafafa;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.cloud-label-widget-content .label-size a{color:#fafafa}
.cloud-label-widget-content .label-size:hover{background-color:#202020;}
.cloud-label-widget-content .label-size:active{top:1px;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;}[/code]
Karena pada css tombol cloud label tidak memiliki atribut height dan width maka untuk mencapai ukuran tap target hingga ke 48px saya menggunakan atau menambah nilai padding dan margin agar tombol menjadi lebih luas dan memiliki jarak 48px antar elemen interaktif (tombol cloud label).
[code type="CSS"].cloud-label-widget-content{text-align:left;overflow:hidden}
.cloud-label-widget-content .label-size{float:left;display:block;padding:5px;margin-right:3px;margin-bottom:3px;background-color:#008066;color:#fafafa;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.cloud-label-widget-content .label-size a{color:#fafafa}
.cloud-label-widget-content .label-size:hover{background-color:#202020}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%}[/code]

Memperbaiki Size Tap Target di Halaman Post

Pada halaman post (artikel), kesalahan ukuran tab target juga bisa saja terjadi, ada beberapa hal yang menjadi penyebabnya diantaranya adalah penyematan tautan link yang terlalu rapat dan antar baris teks tidak cukup tinggi atau line-height kurang dari 1.5em.

Jadi untuk mengatasi miss tap target halaman post pastikan post-body memiliki nilai tinggi baris (line-height) tidak kurang dari 1.5em dan hindari penyematan tautan yang terlalu rapat.

Saya fikir sampai disini saja penjelasan saya mengenai ukuran tap target yang ideal di website seluler, saya harap artikel ini sedikit dapat membantu anda dalam meningkatkan aksesibilitas dan SEO website seluler khusus nya menentukan ukuran tap target dengan tepat (mancapai area ketuk hingga 48px).