Desain UI untuk Pengguna Disabilitas Motorik

Desain UI untuk Pengguna Disabilitas Motorik: Fokus dan Target Klik

Disabilitas motorik mencakup berbagai kondisi fisik yang memengaruhi koordinasi, kekuatan otot, atau ketangkasan tangan. Ini bisa berupa kondisi permanen seperti Cerebral Palsy, penyakit Parkinson, dan Multiple Sclerosis, maupun kondisi sementara seperti patah tulang atau radang sendi.

Pengguna dengan disabilitas motorik sering kali kesulitan—atau sama sekali tidak bisa—menggunakan mouse konvensional. Mereka mungkin menggunakan keyboard semata, perangkat Switch Access, sistem pelacakan mata (Eye-tracking), atau Sip-and-puff (alat yang dioperasikan dengan mulut). Berdasarkan prinsip-prinsip dalam Practical Web Accessibility oleh Ashley Firth, artikel ini membahas praktik teknis untuk memastikan UI Anda dapat dioperasikan oleh perangkat-perangkat tersebut.

---

1. Navigasi Berbasis Keyboard dan Switch Devices

Bagi pengguna tanpa mouse, navigasi web dilakukan secara melompat-lompat (jump-based) dari satu elemen interaktif ke elemen interaktif lainnya (seperti tautan, tombol, dan formulir) menggunakan tombol Tab.

Perangkat Switch Access—yang pada dasarnya adalah satu atau dua tombol fisik besar—juga mensimulasikan penekanan tombol Tab dan Enter.

Indikator Fokus Visual (Focus Ring)

Hal paling kritis bagi pengguna keyboard/switch adalah mengetahui di mana mereka berada saat ini. Jika Anda menghapus outline fokus bawaan browser tanpa menggantinya dengan indikator yang lebih jelas, pengguna akan tersesat di halaman Anda.

/<em> BURUK: Menghapus fokus sepenuhnya </em>/
*:focus {
  outline: none;
}

/<em> BAIK: Memberikan indikator fokus kustom yang kuat (WCAG 2.4.7) </em>/
*:focus-visible {
  outline: 3px solid #FF5722;
  outline-offset: 4px;
}

Focus-visible adalah pseudo-class modern yang hanya memicu outline jika elemen tersebut diaktifkan melalui keyboard, sehingga tidak mengganggu estetika bagi pengguna mouse.

---

2. Ukuran Target Klik (Click Targets)

Bagi pengguna yang mengalami tremor (gemetar pada tangan) atau mereka yang menggunakan Eye-tracking, mencoba mengeklik tombol kecil berukuran 16x16 pixel adalah sebuah mimpi buruk. Kurangnya akurasi fisik membuat mereka rentan mengeklik area yang salah.

Standar WCAG 2.2 Kriteria 2.5.8 (Target Size Minimum)

WCAG menetapkan bahwa ukuran target untuk input penunjuk (pointer inputs) wajib memiliki ukuran minimal 24x24 piksel CSS. Rekomendasi yang lebih kuat dari pedoman aksesibilitas Apple dan Google bahkan menyarankan 44x44 atau 48x48 piksel.

Jika sebuah ikon secara visual harus berukuran kecil (misalnya 16px), Anda tetap harus memperbesar area "klik"-nya menggunakan padding.

/<em> Elemen visual tetap kecil, namun area klik diperluas secara transparan </em>/
.icon-button {
  width: 16px;
  height: 16px;
  padding: 14px; /<em> Total area klik menjadi 44x44 px </em>/
  box-sizing: border-content;
}

---

3. Jarak Antar Elemen (Spacing & Gap)

Memberikan ruang bernapas (spacing) yang cukup antar elemen interaktif sama pentingnya dengan memperbesar ukurannya. Jika tombol "Kirim" dan "Batal" saling menempel, kemungkinan terjadinya salah klik (misclick) akan sangat tinggi bagi penderita Parkinson.

Gunakan CSS gap atau margin untuk memberikan batas aman di sekitar elemen kritis, terutama tindakan yang merusak (destructive actions) seperti "Hapus Akun".

---

4. Meminimalisir Interaksi Kompleks (Drag and Drop)

Interaksi berbasis mouse yang rumit, seperti Drag and Drop (tarik dan lepas), sangat tidak bersahabat bagi penderita disabilitas motorik. Melakukan penahanan tombol mouse sambil menggerakkan tangan secara presisi membutuhkan ketangkasan tinggi.

Jika Anda memiliki antarmuka pengunggahan file:

1. Sediakan area Drag and Drop.
2. SELALU sediakan tombol alternatif <input type="file"> standar untuk mengunggah lewat dialog sistem (yang bisa diakses via keyboard).

Hal yang sama berlaku untuk elemen Slider harga. Jangan hanya bergantung pada slider grafis untuk mengatur rentang harga; sediakan juga kotak input angka biasa (text field) agar pengguna dapat mengetikkannya secara manual.

---

5. Kesimpulan

Mendesain untuk disabilitas motorik berarti menghapus asumsi bahwa semua orang menggunakan mouse dengan presisi tingkat piksel. Dengan mengimplementasikan indikator fokus yang sangat jelas, memperbesar area interaktif (click targets), dan menghindari ketergantungan pada interaksi penunjuk yang rumit, kita menciptakan lingkungan web yang membebaskan pengguna dari keterbatasan fisik mereka.

---

Referensi

Panduan dalam merancang ukuran target, manajemen fokus, dan adaptasi terhadap perangkat alternatif ini diadaptasi langsung dari argumen teknis pada Bab Motor Impairments dalam buku Practical Web Accessibility oleh Ashley Firth. Implementasi aturan ketat mengenai `focus-visible` serta standar minimum target klik (Target Size) secara spesifik merujuk pada standar WCAG yang dipaparkan dalam literatur tersebut.