Intinya...

Target untuk sentuhan atau mouse harus berukuran setidaknya 44×44px, kecuali jika

  • merupakan bagian dari kalimat atau blok teks,
  • berdekatan dengan target lain yang punya fungsi sama dan memenuhi ukuran tersebut, atau
  • berada dalam konteks yang ukurannya tidak bisa diperluas lagi.

Apa itu WCAG 2.5.5?

Tombol, tautan, dan elemen interaktif lainnya harus berukuran minimal 44 x 44 piksel. Jika ukuran ini tidak memungkinkan, elemen tersebut harus memiliki ruang kosong yang cukup di sekitarnya agar lebih mudah diklik.

Meskipun bagian yang terlihat dari elemen lebih kecil dari 44 x 44 piksel, elemen tersebut tetap bisa memenuhi syarat jika area yang bisa diklik secara total (termasuk padding) setidaknya 44 x 44 piksel. Ini memastikan pengguna tetap mudah mengetuk atau mengklik elemen tanpa salah menyentuh elemen lain.

Perbandingan dengan 2.5.8 Ukuran Target (Minimum)

WCAG 2.5.8 Ukuran Target (Minimum) sangat mirip dengan kriteria keberhasilan ini, dengan perbedaan utama pada persyaratan ukuran target.

  • 2.5.8 Minimum: 24 x 24 piksel, level AA yang lebih longgar
  • 2.5.5 Ditingkatkan: 44 x 44 piksel, level AAA yang lebih ketat

Penomoran kriteria keberhasilan WCAG tidak selalu mengikuti urutan logis berdasarkan tingkat kesulitan karena nomor diberikan berdasarkan kapan kriteria tersebut diperkenalkan atau direvisi. Jadi, meskipun 2.5.5 adalah kriteria yang lebih ketat dibandingkan 2.5.8, angka yang lebih kecil menunjukkan kapan kriteria itu diperkenalkan.

Mengapa ini penting?

Tombol dan tautan yang terlalu kecil membuat pengguna frustrasi saat mencoba mengklik atau mengetuknya, terutama di layar sentuh seperti ponsel dan tablet. Jika tombol atau tautan diletakkan terlalu berdekatan, kemungkinan besar kamu akan salah mengetuk elemen yang salah.

Pengguna yang memiliki kontrol tangan terbatas, seperti mereka yang mengalami tremor, artritis, atau tantangan mobilitas lainnya, mungkin kesulitan untuk mengklik atau mengetuk tombol kecil. Jika elemen terlalu berdekatan, mereka bisa saja salah mengetuk atau bahkan tidak bisa menggunakan elemen tersebut sama sekali.

Aturan ini berlaku untuk semua yang diaktifkan dengan penunjuk, seperti mouse, layar sentuh, atau stylus, dan bukan hanya jari.

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, mungkin kesulitan memilih target yang terlalu kecil, terutama jika target tersebut berdekatan dengan elemen lain.

Pengguna yang menggunakan layar kecil, seperti tablet atau perangkat mobile, juga akan kesulitan menggunakan target kecil. Saat mengetuk dengan jari, area yang tersentuh tidak selalu tepat, sehingga bisa saja memilih elemen yang tidak diinginkan. Ini terutama terjadi pada orang dengan jari besar.

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

Cara menerapkan WCAG 2.5.5

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

Ukuran dan jarak yang ditingkatkan

Buat semua tombol, tautan, dan elemen interaktif setidaknya berukuran 44 x 44 piksel. Jika ukuran ini tidak memungkinkan, tambahkan ruang ekstra di sekitarnya agar lebih mudah untuk diketuk.

Untuk memastikan tombol memenuhi persyaratan ukuran, kamu bisa mengatur properti CSS. Gunakan properti min-height dan min-width untuk menentukan ukuran minimum. Atau, tambahkan padding untuk memberikan ukuran total 44 x 44 piksel dengan jarak ekstra di antaranya.

Beberapa elemen interaktif

Ilustrasi menunjukkan berbagai elemen interaktif yang memenuhi atau gagal memenuhi persyaratan ukuran dan jarak. Baris atas memperlihatkan ikon yang memenuhi ukuran minimum 44x44, sementara baris bawah menunjukkan tombol yang gagal karena ukuran dan jaraknya terlalu kecil serta margin antar ikon terlalu rapat. Ada gambar tangan yang melayang di atas tombol dengan tanda tanya, menandakan ketidakpastian tombol mana yang akan ditekan.

Elemen tindakan yang setara

Jika target yang lebih kecil melakukan aksi yang sama dengan target yang lebih besar dan sesuai ukuran di tempat lain di halaman, hal ini diperbolehkan sebagai pengecualian. Namun, setidaknya ada satu kontrol ganda yang memenuhi ukuran minimum 44 x 44 piksel.

Ilustrasi elemen tindakan yang setara

Ilustrasi menunjukkan dua tombol dengan aksi yang setara untuk ikon kecil berukuran 12 x 12 piksel. Satu tombol berukuran 50 x 18 piksel, meskipun tidak ada elemen interaktif lain di sepanjang sumbu-y, sehingga masih dapat diterima walaupun tingginya hanya 18 piksel. Tombol kedua berukuran 50 x 44 piksel yang sepenuhnya memenuhi kriteria keberhasilan ini.

Pengecualian untuk elemen inline

Tautan yang muncul di dalam blok teks, seperti tautan inline dalam paragraf, tidak wajib memenuhi persyaratan ukuran 44 x 44 piksel. Pengecualian ini ada karena ukuran teks inline dan cara pembungkusannya dapat bervariasi tergantung ukuran layar dan zoom.

Namun, untuk tautan inline berdiri sendiri atau ikon, aturan ini tetap berlaku.

Contoh paragraf dengan tautan

Contoh paragraf yang mengandung tiga tautan, setiap baris tingginya hanya 12 piksel, sehingga secara teknis tautan tersebut tidak memenuhi kriteria keberhasilan. Tetapi karena mereka bagian dari teks inline, mereka mendapatkan pengecualian.

Pengecualian untuk hal-hal esensial

Terakhir, jika benar-benar diperlukan atau diwajibkan secara hukum agar ukuran dan jarak target lebih kecil dari 44 x 44 piksel, aturan ini bisa diabaikan.

Sebuah peta interaktif

Contohnya adalah peta di mana pin-pin terlalu dekat satu sama lain dan ukurannya tidak cukup besar, tapi hal ini diperlukan karena kita tidak dapat mengontrol penempatan pin, dan jika terlalu besar, pin akan sulit dibedakan satu sama lain.

Kesimpulan

Tombol dan tautan yang lebih besar bukan hanya untuk pengguna dengan disabilitas, mereka membuat situs web lebih mudah digunakan oleh semua orang. Menjaga tombol dan tautan sekurang-kurangnya 44 x 44 piksel (atau memberikan ruang yang cukup) membantu pengguna di semua perangkat, membuat situs web kamu lebih ramah pengguna untuk semua.