17 Jan

(WCAG 2.1) Panduan Membuat Website yang Aksesibel

By UMAR RIYATIM - views

HOOK

Pernahkah Anda merasa frustrasi karena tidak tahu cara melakukan sesuatu yang seharusnya sederhana di smartphone? Anda sudah menekan layar berkali-kali, namun aplikasi tidak memberikan respon yang Anda harapkan. Anda tidak sendirian. Rasa "tersesat" ini bukanlah kesalahan Anda sebagai pengguna, melainkan bukti adanya jurang pemisah antara pikiran manusia dan logika sistem yang disebut sebagai Gulf of Execution.

SUB-HEADING 1: Penjelasan Konsep

Gulf of Execution (Jurang Eksekusi) adalah jarak antara tujuan pengguna (apa yang ingin dicapai) dengan sarana yang disediakan sistem (bagaimana cara melakukannya). Masalah muncul ketika sistem tidak memberikan petunjuk yang cukup bagi pengguna untuk mengambil langkah pertama.

Untuk memperkecil jurang ini, desainer menggunakan standar WCAG 2.1 melalui prinsip POUR:

  1. Perceivable (Terindra): Informasi harus terlihat (misal: kontras warna yang cukup).

  2. Operable (Dapat Dioperasikan): Antarmuka harus bisa digerakkan (misal: tombol yang cukup besar).

  3. Understandable (Dimengerti): Alur navigasi harus konsisten dan masuk akal.

  4. Robust (Andal): Kode harus bisa dibaca oleh teknologi bantu (screen reader).

SUB-HEADING 2: Contoh Nyata

  • Kasus Navigasi Game (Jurnal Gestalt 2022): Dalam penelitian Hananto dkk., pada game Acaraki, ditemukan bahwa visual tombol yang tidak intuitif membuat pengguna ragu. Melalui A/B Testing, ditemukan bahwa desain dengan signifiers (penanda) yang lebih kuat secara efektif menutup Gulf of Execution.

  • E-Commerce: Pengguna ingin membeli barang, tetapi tombol "Beli" tidak memiliki label teks (hanya ikon belanjaan tanpa alt-text). Bagi pengguna tunanetra, jurang eksekusi ini menjadi hambatan total karena mereka tidak tahu di mana harus menekan.

SUB-HEADING 3: Solusi Desain

Desainer dapat menjembatani jurang ini dengan teknik berikut:

  1. Affordance & Signifiers: Pastikan tombol terlihat seperti tombol (misal: menggunakan bayangan atau warna kontras minimal 4.5:1 sesuai WCAG).

  2. Feedback Instan: Berikan respon (suara/getar/warna) saat aksi dilakukan agar pengguna tahu langkah mereka benar.

  3. Konsistensi: Letakkan elemen penting di tempat yang diharapkan (misal: tombol tutup di pojok kanan atas).

Visual dan Infografis (3 Gambar)

Berikut adalah visualisasi untuk mempermudah pemahaman Anda:

1. Infografis: Siklus Gulf of Execution & Evaluation (Menggambarkan proses dari niat pengguna hingga aksi pada sistem) 

2. Visualisasi Prinsip POUR (WCAG 2.1) (Ikongrafis mengenai Perceivable, Operable, Understandable, dan Robust) 

Diagram Gulf of Execution

3. Contoh A/B Testing untuk Mengurangi Gap Eksekusi (Perbandingan desain tombol yang membingungkan vs desain yang jelas sesuai temuan jurnal)

Contoh A/B Testing untuk Mengurangi Gap Eksekusi

 

KESIMPULAN + CTA

Memahami Gulf of Execution membantu kita tidak hanya sebagai pengguna yang lebih sadar, tapi juga sebagai future designers yang lebih empati. Desain yang baik adalah desain yang mampu "berbicara" tanpa kata-kata, memastikan semua orang—termasuk penyandang disabilitas—dapat menggunakan teknologi dengan setara.

BRANDING UMRI 
Artikel ini ditulis sebagai bagian dari pembelajaran mata kuliah Interaksi Manusia dan 
Komputer di Program Studi Teknik Informatika, Universitas Muhammadiyah Riau. 
Untuk informasi lebih lanjut tentang program studi kami, kunjungi www.umri.ac.id 

  • Hananto, B. A., Melini, E., Zulkarnain, A., & Kotandi, J. (2022). Uji Coba Metode A/B Testing dalam Proses Desain (Objek Eksperimen: Visual Tampilan Permainan Digital Acaraki). Gestalt: Jurnal Desain Komunikasi Visual, 4(1), 1–13. https://doi.org/10.33005/gestalt.v4i1.92

  • W3C. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. World Wide Web Consortium. https://www.w3.org/TR/WCAG21/

  • Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.

  • Sudaryono. (2019). Metodologi Penelitian: Kuantitatif, Kualitatif, dan Mix Method (2nd ed.). Rajawali Pers.