Seorang web developer telah menciptakan eksperimen CSS inovatif yang disebut Drunk CSS yang sengaja membuat website lebih sulit digunakan dengan mensimulasikan tantangan visual dan motorik yang mungkin dihadapi seseorang saat dalam keadaan mabuk. Proyek ini bertujuan untuk menyoroti masalah aksesibilitas dan mendorong desain antarmuka pengguna yang lebih baik.
Konsep ini dibangun berdasarkan ide bahwa jika sebuah website bekerja dengan baik untuk pengguna yang terganggu, maka website tersebut seharusnya bekerja dengan sangat baik untuk semua orang lainnya. Dengan menerapkan aturan CSS tertentu, mode mabuk mengubah halaman web mana pun menjadi pengalaman yang menantang dengan teks buram, elemen yang diputar, tautan yang memantul, dan font yang terdistorsi.
Implementasi Teknis Menimbulkan Pertanyaan Desain
Implementasi CSS menggunakan beberapa teknik cerdas untuk menciptakan pengalaman yang terganggu. Rendering font menargetkan karakter tertentu menggunakan rentang unicode, membuat huruf vokal kecil muncul dalam jenis huruf yang berbeda sementara sisanya menggunakan font kursif. Elemen visual secara acak diputar dan dimiringkan menggunakan selektor nth-child, sementara seluruh halaman menerima filter blur dan saturasi warna. Tautan menjadi hampir tidak mungkin diklik karena terus memantul naik turun.
Namun, umpan balik komunitas mengungkapkan reaksi yang beragam tentang akurasi simulasi ini. Banyak pengguna yang memiliki pengalaman nyata dengan gangguan menunjukkan bahwa efek visual tidak benar-benar mewakili tantangan kognitif yang terlibat. Simulasi ini terutama berfokus pada distorsi visual daripada masalah pengambilan keputusan dan koordinasi yang lebih karakteristik dari gangguan nyata.
Teknik CSS yang Digunakan dalam Mode Mabuk:
- Manipulasi font menggunakan rentang unicode untuk huruf vokal kecil (U+61, U+65, U+69, U+6F, U+75)
- Rotasi elemen menggunakan selektor nth-child (pola 3n, 5n, 7n)
- Filter visual: blur 1px dan saturasi warna 2.5x
- Link beranimasi memantul dengan durasi 4 detik
- Gaya font miring pada sudut -12 derajat
- Ukuran huruf pertama diperkecil menjadi 0.5em
Pengujian Aksesibilitas Memicu Debat yang Lebih Luas
Proyek ini telah memicu diskusi tentang metode pengujian aksesibilitas yang tepat. Sementara beberapa developer memuji pendekatan kreatif untuk menyoroti masalah kegunaan, yang lain berpendapat bahwa pengujian aksesibilitas yang autentik memerlukan kerja sama dengan orang-orang yang benar-benar mengalami tantangan ini setiap hari.
Mengenakan sepasang Glaucoma Goggles akan memberi Anda gambaran tentang seperti apa gangguan visual itu. Tetapi itu tidak akan memberi Anda pengalaman hidup dengan cara itu selama berbulan-bulan atau bertahun-tahun.
Percakapan telah meluas melampaui konsep asli untuk mencakup diskusi tentang mendesain untuk pengguna lanjut usia, orang dengan gangguan kognitif, dan mereka yang memiliki literasi teknis terbatas. Anggota komunitas menyarankan bahwa prinsip pengguna mabuk harus diterapkan lebih luas untuk menciptakan antarmuka yang bekerja untuk pengguna yang stres, lelah, atau terganggu dalam situasi dunia nyata.
Kekhawatiran Komunitas Tentang Drunk CSS:
- Efek visual tidak secara akurat merepresentasikan gangguan kognitif
- Implementasi mobile mendorong teks keluar dari layar
- Theme switcher sulit diakses pada perangkat mobile
- Simulasi berfokus pada distorsi visual daripada tantangan pengambilan keputusan
- Mungkin tidak mencerminkan kebutuhan aksesibilitas dunia nyata
Pengalaman Mobile Mengungkap Tantangan Implementasi
Pengguna yang menguji mode mabuk pada perangkat mobile telah menghadapi masalah kegunaan tambahan. Format teks miring mendorong konten keluar dari layar, membuatnya benar-benar tidak dapat dibaca daripada hanya sulit. Ini menyoroti bagaimana fitur aksesibilitas terkadang dapat menciptakan hambatan baru ketika tidak diimplementasikan dengan benar di berbagai perangkat dan ukuran layar.
Pengalaman mobile juga mengungkapkan masalah navigasi, dengan pengalih tema sulit ditemukan dan digunakan pada layar yang lebih kecil. Masalah-masalah ini menunjukkan bagaimana pertimbangan aksesibilitas harus memperhitungkan berbagai metode interaksi dan keterbatasan perangkat.
Eksperimen Drunk CSS berhasil menciptakan kesadaran tentang tantangan aksesibilitas, meskipun tidak sempurna mensimulasikan gangguan nyata. Ini berfungsi sebagai titik awal untuk percakapan tentang desain inklusif sambil menyoroti pentingnya melibatkan orang dengan disabilitas nyata dalam proses pengujian.
Referensi: Drunk CSS