Intinya...

Target harus berukuran setidaknya 24×24px, kecuali jika

  • merupakan bagian dari kalimat atau blok teks,
  • dikelilingi oleh ruang kosong yang cukup, atau
  • berdekatan dengan target lain yang memiliki fungsi sama dan memenuhi ukuran tersebut.

Apa itu WCAG 2.5.8?

Tombol, tautan, dan elemen interaktif lainnya harus memiliki ukuran minimal 24x24 piksel CSS. Jika itu tidak memungkinkan, pastikan ada cukup ruang kosong di sekitarnya agar lebih mudah untuk mengklik.

Meskipun elemen lebih kecil dari 24x24 piksel, elemen tersebut masih dapat lulus jika ada cukup ruang di antara elemen tersebut dan elemen lain yang dapat diklik. Namun, selalu merupakan ide yang baik untuk membuat elemen tersebut lebih besar agar lebih mudah digunakan.

Untuk tombol atau tautan yang penting, disarankan untuk mengikuti aturan yang lebih ketat yaitu WCAG 2.5.5 Ukuran Target (Tingkat Lanjut).

Mengapa ini penting?

Tombol dan tautan yang terlalu kecil sangat menyulitkan untuk diklik atau diketuk, terutama di layar sentuh seperti ponsel dan tablet. Ketika tombol ditempatkan terlalu dekat satu sama lain, semakin mudah untuk secara tidak sengaja mengetuk yang salah.

Pengguna dengan kontrol tangan terbatas, seperti mereka yang memiliki tremor, arthritis, atau tantangan mobilitas lainnya, mungkin kesulitan untuk mengetuk tombol kecil. Jika elemen-elemen tersebut terlalu dekat satu sama lain, mereka bisa saja mengetuk atau mengklik yang salah atau bahkan tidak bisa menggunakannya sama sekali.

Siapa yang terpengaruh?

Pengguna dengan gangguan mobilitas, pengguna yang menggunakan layar kecil, pengguna di lingkungan yang tidak stabil, dan pengguna dengan jari besar.

Pengguna dengan gangguan mobilitas, seperti tremor tangan atau kondisi yang memengaruhi keterampilan motorik halus, dapat merasa kesulitan untuk memilih target yang terlalu kecil, terutama jika diletakkan dekat dengan elemen lain.

Pengguna yang menggunakan layar lebih kecil, seperti tablet atau perangkat mobile, juga akan merasa kesulitan dengan target yang lebih kecil. Saat mengetuk dengan jari, ruang yang dipilih tidak selalu tepat, yang berpotensi memilih elemen yang tidak diinginkan. Hal ini sangat berlaku bagi orang dengan jari besar.

Pengguna di lingkungan yang tidak stabil atau berguncang, seperti di dalam kendaraan yang bergerak, akan kesulitan memilih elemen yang terlalu kecil.

Cara menerapkan WCAG 2.5.8

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Ukuran dan spasi minimum

Pastikan semua tombol, tautan, dan elemen interaktif memiliki ukuran minimal 24x24 piksel. Jika itu tidak memungkinkan, tambahkan ruang ekstra di sekitar elemen-elemen tersebut agar lebih mudah untuk mengetuk.

Untuk memastikan tombol memenuhi persyaratan ukuran, kamu dapat menyesuaikan pengaturan CSS. Gunakan properti CSS min-height dan min-width untuk menetapkan ukuran minimum. Atau, tambahkan padding untuk memberikan elemen ukuran total 24x24 dengan ruang ekstra di antara elemen.

Contoh tombol yang memenuhi dan tidak memenuhi aturan yang dijelaskan di caption

Contoh 1: Tombol memiliki ukuran minimal 24x24 piksel, sehingga memenuhi aturan. Contoh 2: Tombol lebih kecil dari 24x24 piksel, namun karena memiliki cukup ruang kosong di sekitarnya, mereka tetap memenuhi aturan. Contoh 3: Tombol terlalu kecil dan terlalu dekat satu sama lain, sehingga sulit untuk mengetuk. Tombol ini tidak memenuhi aturan.

Pengecualian untuk aturan ini adalah jika ada elemen lain dengan tindakan setara di halaman tersebut. Jika ini benar, elemen tersebut bisa mempertahankan ukuran yang lebih kecil dari 24x24 piksel. Perlu dicatat bahwa elemen lain harus memenuhi kriteria keberhasilan ini.

Sediakan elemen aksi yang setara

Pengecualian untuk aturan ini adalah jika ada elemen lain dengan tindakan setara di halaman. Jika ini benar, elemen tersebut dapat mempertahankan ukurannya lebih kecil dari 24x24 piksel. Perlu dicatat bahwa elemen-elemen lain harus memenuhi kriteria keberhasilan ini.

Ikon telepon dengan tombol berlabel Call Now

Contoh elemen interaktif kecil untuk memulai panggilan yang berada tepat di sebelah elemen tombol yang jauh lebih besar dengan aksi setara untuk menelepon.

Elemen inline

Elemen interaktif yang berada dalam teks, seperti kalimat, paragraf, dll., adalah pengecualian karena tinggi baris membatasi ukuran, dan tidak mungkin untuk mengetahui di mana elemen interaktif akan jatuh saat ukuran layar berubah dan teks mengalir ulang.

Namun, adalah ide yang baik untuk meningkatkan tinggi baris agar teks tetap terbaca dan mudah untuk diketuk atau diklik.

Contoh paragraf yang berisi tiga tautan dengan deskripsi pada caption

Setiap baris hanya memiliki tinggi 12 piksel, sehingga tautan-tautan ini secara teknis gagal memenuhi kriteria keberhasilan. Namun, karena mereka adalah bagian dari teks inline, mereka merupakan pengecualian. Namun, disarankan untuk meningkatkan tinggi baris.

Pengecualian untuk hal-hal yang esensial

Terakhir, jika sangat diperlukan atau secara hukum diwajibkan agar ukuran target dan spasi lebih kecil dari 24x24 piksel, aturan ini bisa dilewati.

Peta interaktif dengan beberapa pin di dalamnya

Ini adalah contoh peta di mana pin-pin terlalu dekat satu sama lain dan tidak cukup besar, tetapi ini diperlukan karena pengguna tidak dapat mengontrol di mana pin-pin akan ditempatkan, dan jika pin terlalu besar, mereka akan tidak dapat dibedakan satu sama lain.

Kesimpulan

Tombol dan tautan yang lebih besar bukan hanya untuk pengguna dengan disabilitas, mereka membuat situs web lebih mudah digunakan untuk semua orang. Menjaga tombol dan tautan setidaknya berukuran 24x24 piksel (atau memberi mereka ruang yang cukup) membantu pengguna dari semua perangkat, menjadikan situs web kamu lebih ramah pengguna untuk semua orang.