Tombol yang terlalu kecil bukan hanya merepotkan — bagi pengguna dengan gangguan motorik, tremor ringan, atau yang sedang berjalan sambil memegang ponsel, sasaran kecil berarti salah tekan berulang dan interaksi yang melelahkan. Kriteria Target Size (Minimum) WCAG 2.5.8 menetapkan ambang ukuran yang terukur, dan pedoman platform telah lebih dulu menetapkan angka yang lebih besar sebagai praktik baik. Pada Chapter ini kita mengenal ambangnya, menerapkannya pada CSS, dan memahami peran jarak antartarget.

Ambang WCAG 2.5.8: 24×24 CSS Piksel #

Kriteria ini masuk pada WCAG 2.2 dengan level AA: target interaktif — tombol, tautan, kotak centang, opsi menu — harus memiliki area sasaran minimal 24×24 CSS piksel, atau setara bila dihitung dengan lingkaran 24px yang tidak bertumpukan lingkaran target lain. Dua pengecualian yang lazim kita temui:

  1. Spacing exception: sasaran yang lebih kecil dari 24px tetap lolos bila jarak antartargetnya cukup — lingkaran 24px di sekitar tiap sasaran tidak menimpa lingkaran sasaran lain. Jarak yang memisahkan menggantikan ukuran.
  2. Inline exception: tautan di tengah kalimat mengikuti aliran teks sehingga dikecualikan; meski begitu, baris tautan yang rapat sebaiknya tetap diberi jarak vertikal lewat line-height yang lega.

Perhatikan bahwa yang diukur adalah area sasaran, bukan area visual: tombol bergambar ikon 16px tetap lolos bila area yang dapat dikliknya — termasuk padding — mencapai 24px.

Praktik Baik: 44×44 Piksel #

Ambang 24px adalah minimum legal, bukan sasaran desain. Level AAA (kriteria 2.5.5) menetapkan 44×44px, dan angka yang sama menjadi patokan pedoman platform: Apple Human Interface Guidelines menganjurkan 44pt, sementara Material Design menganjurkan 48dp. Angka 44–48px berangkat dari lebar rata-rata ujung jari pada layar sentuh — kriteria yang menuntut ukuran penuh ini sekaligus membuat halaman nyaman bagi semua jari, bukan hanya bagi yang membutuhkannya:

css 
.tombol-teks {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
}

.tombol-ikon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
  1. min-width dan min-height pada tombol teks: batas bawah yang melapisi teks lebih panjang — label yang dibungkus pengguna tetap memiliki sasaran minimal.
  2. Ukuran tetap pada tombol ikon: ikon boleh 16–20px di dalamnya; yang penting wadah yang menerima klik berukuran 44px.
  3. Padding sebagai pemekar sasaran: pada kasus yang terikat tinggi baris, menaikkan padding memperluas area sasaran tanpa mengubah ukuran visual ikonnya.

Hasil di Browser:

text 
Empat sasaran tampil berjajar. Nilai computed yang diperiksa harness:
tombol-teks mencatat min-width "44px" dan min-height "44px";
tombol-ikon mencatat width "44px" dan height "44px"; sasaran-kecil
mencatat width "20px" dan height "20px" — contoh di bawah ambang yang
sengaja ditampilkan untuk dibandingkan; baris-jarak mencatat gap "24px"
yang memisahkan dua sasaran kecil sesuai spacing exception.

Jarak antar Sasaran #

Sasaran yang berdekatan saling “mencuri” area aman satu sama lain: dua tombol 20px yang menempel praktis menjadi satu sasaran 40px dengan pembagian yang mudah keliru. Jarak minimum sekitar 8px antartarget adalah latihan yang lazim, dan gap pada flexbox adalah alat paling langsung untuk itu:

css 
.baris-tindakan {
  display: flex;
  gap: 8px;
}

Ketika desain menuntut sasaran kecil — ikon baris tabel, tanda silang kartu — terapkan spacing exception secara sadar: beri jarak lebih besar dari biasanya, atau perluas sasaran dengan padding/pseudo-element transparan. Pemeriksaan ukuran sasaran tercantum pada checklist Chapter Accessibility Testing , dan indikator fokus pada sasaran-sasaran ini dibahas pada Chapter Visible Focus .

Demo chapter ini (ukuran-sasaran.html) membawa empat sasaran dengan tujuh pemeriksaan data-expected pada min-width, min-height, width, height, dan gap.