Perjalanan membuat Panduan WCAG Indonesia

Sudah 3 bulan sejak saya merilis Panduan WCAG Indonesia, jadi saya putuskan menulisnya sebelum lupa.

Sebagai penjelasan singkat, WCAG adalah pedoman aksesibilitas untuk konten yang ada di web, seperti konten web/app, konten video, konten audio, hingga PDF. WCAG sudah menjadi standar global, namun belum terlalu dikenal di Indonesia.

Latar belakang

Saya pertama kali mengenal WCAG saat belajar Accessibility: How to Design for All pada 2018, dan mulai mempraktekkan beberapa kriterianya dalam sudut pandang desain visual. Saya juga beberapa kali menyampaikan materi soal WCAG untuk desainer, salah satunya di sesi bersama Suarise tahun 2020.

Meski begitu, saya kurang menguasai sudut pandang lainnya dan ini terbukti saat saya mengambil ujian sertifikasi CPACC di awal April 2025. Saya merasa kesulitan menjawab kapan saya harus menggunakan atribut alt. Padahal, ini adalah kriteria pertama dalam WCAG. Saya frustrasi dan sempat merasa gagal, walau pada akhirnya lulus juga. Saya mencoba menganalisa kenapa saya gagal, dan saya yakin karena saya kurang memahami maksud dari masing-masing kriteria yang ada.

Mendapat ilham

Nah, suatu hari saat browsing, saya menemukan WCAG in Plain English pada pertengahan April 2025. "Wah, kebetulan nih," pikir saya. "Saya juga bikin seperti ini!"

Mendalami WCAG in Plain English

Saya mencoba mempelajari struktur WCAG in Plain English. Mereka membagi penjelasan tiap Kriteria WCAG ke dalam beberapa bagian:

• Sekilas mengenai Kriteria itu,
• Kenapa Kriteria ini penting,
• Penting untuk siapa, dan
• Bagaimana cara menerapkannya.

Struktur ini konsisten diterapkan di seluruh penjelasan mereka.

Saya juga menemukan pembagian tiap Kriteria ke dalam beberapa kategori. Pengkategorian ini dilakukan secara organik oleh praktisi, seperti bagaimana mengujinya (seluruh situs web, atau hanya teks saja), siapa yang terdampak (misalnya disabilitas visual), hingga siapa yang berperan terhadap penerapannya (misalnya desainer dan developer).

WCAG in Plain English merangkum pengkategorian ini semua ke dalam situs web mereka.

Corat-coret

Saya mulai langsung "menggambar" di Figma. Setidaknya, untuk mendapatkan gambaran struktur arsitektur informasinya seperti apa, juga untuk eksplorasi visual. Saya hanya membuat desain 3 halaman saja yang menurut saya sudah cukup untuk mengatur keseluruhan arah gaya visual ke depannya.

Untuk halaman Beranda saya ingin ada wajah Obin, kucing saya, untuk menyambut para pengguna. Kenapa kucing? Ya tentu saja karena (hampir) semua orang menyukai kucing. Saya ingin menciptakan kesan bahwa bahasan yang serius tidak perlu disajikan secara terlalu serius.

Lalu saya membagi masing-masing Kriteria sesuai dengan dokumentasi WCAG:

1. Prinsip yang terdiri dari Perceivable, Operable, Understandable, dan Robust.
2. Masing-masing prinsip memiliki Pedoman.
3. Tiap Pedoman memiliki Kriteria.

Struktur ini cukup saklek yang juga saya terapkan ke navigasinya. Prinsip, Pedoman, dan Kriteria menjadi navigasi utama untuk menjelajahi panduan ini. Saya cukup konservatif saat itu dan mengharapkan pengguna mengikuti alur navigasi ini. Namun saya juga memberikan keleluasaan untuk pengguna mengeksplorasi sesuai Kategori:

• Level kepatuhan (A, AA, AAA),
• Tema pengujian WCAG,
• Target pengguna yang terdampak, dan
• Peran yang bertanggung jawab untuk mengimplementasikannya.

Prototyping di localhost

Proses menggambar di Figma hanya sebentar karena toh yang saya butuhkan hanya 6 template saja: Beranda, Prinsip, Pedoman, Kriteria, Kategori, dan halaman generik; yang kesemuanya tidak ada interaksi yang kompleks. Saya langsung berpindah ke code editor. Kebetulan saya baru saja bermain Grav untuk situs pribadi saya, jadi saya memutuskan memakai framework itu saja.

Saya melakukan berbagai task ini secara paralel.

Menerjemahkan konten dari WCAG in Plain English

Saya menggunakan ChatGPT untuk membantu penerjemahan di awal dengan satu set aturan yang harus dipenuhi, seperti gaya bahasa, penggunaan istilah, panjang kalimat, dan sebagainya.

Kemudian, konten itu saya edit lagi sampai saya merasa cukup yakin dengan isinya.

Menyiapkan gambar

Karena WCAG in Plain English menggunakan lisensi CC BY-SA 4.0 untuk kontennya, jadi saya memutuskan memakai ilustrasi yang mereka miliki dengan harapan saya akan menggantinya dengan karya sendiri di masa depan.

Membuat halaman statis dan template Grav

Saya lalu membuat HTML statis dan memasukkan beberapa konten. Setelah saya puas, saya mulai membuat template Grav.

Setelah template Grav selesai, saya mulai bermain-main di dalamnya. Saat mencoba-coba, pengkategorian ini malah bersifat eksklusif (OR). Maksudnya, kalau saya ingin tahu kriteria yang berkaitan dengan Keyboard dan merupakan tanggung jawab Desainer, saya harus membuka kategori Keyboard saja, atau Desainer saja. Tidak bisa inklusif (AND).

Menambahkan filter

Saya lalu menambahkan filter agar pengguna bisa memilah-milah Kriteria yang relevan dengan kebutuhan mereka saat itu. Perjalanan saya cukup panjang dalam membuat fitur ini karena saya memakai web statis, dan tidak ingin terbebani dengan proses di belakang. Jadinya semua filtering harus dilakukan di front end. Dengan demikian, saya harus mempelajari aria-live.

Selain itu, karena berlangsung instan, pengguna bisa tidak menyadari adanya perubahan. Jadi saya menambahkan animasi di CSS untuk memberitahukan adanya perubahan. Adanya animasi ini juga membuat saya harus mempelajari WCAG 2.3.1 tentang kejapan, dan ini membuat saya perlu mencari formula yang pas untuk tidak mengganggu user: terlalu cepat bisa menimbulkan risiko kejang jika pengguna menekan tombol berkali-kali, terlalu lama juga akan terasa annoying.

Testing (alias promosi)

Kebetulan saya menjadi pemateri dan juri dalam Accessibility Design Challenge (ADC) pertama yang diselenggarakan oleh komunitas A11yID. Jadi, saat memberikan materi soal Figma Annotation, saya coba mempromosikan versi beta Panduan WCAG Indonesia ini.

Saya juga mengumumkannya di Twitter untuk menjaring feedback dari pengguna. Setidaknya, saya bisa melihat data analitiknya.

Sayangnya belum ada insight menarik dari testing ini, jadinya hanya promosi saja.

Intermezzo

Kalau membaca sampai sini terasa lama ya? Sebenarnya tidak. Dari awal saya membuka Figma (20 April) sampai saya mengumumkannya di Twitter (29 April), semuanya hanya berlangsung dalam waktu 9 hari. Saya meluangkan setidaknya 2 jam setelah bekerja dan hingga 8 jam di weekend untuk mengerjakan ini.

Semuanya saya lakukan karena saya berambisi mau lulus ujian CPACC di ujian selanjutnya. Saat itu saya masih merasa tidak lulus dan pengumumannya masih di akhir Mei 2025.

Mempercepat waktu rilis

Tadinya saya tidak memiliki waktu pasti untuk merilisnya, tapi ketika ingat ada GAAD (Global Accessibility Awareness Day) setiap Kamis ketiga bulan Mei, saya memutuskan untuk mengejar rilis di tanggal tersebut.

Apa yang bisa saya lakukan untuk membuat proyek saya berbeda dengan proyek WCAG lain, walaupun proyek saya adalah yang pertama dan satu-satunya di Indonesia, hingga saya merasa layak untuk dirilis?

Penambahan fitur Simulasi

Saat menjadi pemateri dan juri di ADC, saya menemukan peserta kesulitan memahami konsep WCAG. Beberapa menganggap untuk memenuhi level AA dalam WCAG, maka keseluruhan 55 Kriteria A dan AA harus mereka sertakan dalam proyeknya. Padahal, WCAG itu kontekstual. Ketika sebuah Kriteria tidak relevan, maka tidak perlu disertakan dalam sebuah konten.

Nah ini membuat saya menyadari: How might I help people understand which WCAG criteria are relevant to their pages, screens, or content?

Dari perumusan masalah ini saya langsung menemukan jawabannya: perlunya cara untuk mensimulasikan Kriteria WCAG sesuai dengan karakteristik konten yang ada.

Kesulitan saya membuat fitur ini adalah kurangnya data yang saya miliki. Saya mencoba Googling maupun konsultasi dengan AI, tapi tidak menemukan referensi yang sesuai. Jadinya saya beralih ke pengalaman sendiri membuat berbagai situs web dan aplikasi, termasuk situs web Panduan WCAG Indonesia ini.

Saya menulis berbagai pola yang pernah saya kerjakan, misalnya hero area, multilingual, slider, dsb. Lalu saya membaca-baca lagi Kriteria WCAG yang saya terjemahkan. Lalu saya "kawinkan" pola itu dengan kriteria yang relevan.

Penambahan fitur Favorit

Dengan adanya fitur Simulasi, pengguna bisa fokus ke beberapa kriteria saja yang sesuai dengan proyek yang sedang mereka kerjakan. Saya mencoba menguji fitur ini berkali-kali, namun akhirnya kesulitan mengingat kriteria mana yang perlu saya fokuskan. Mengulang Simulasi kembali belum tentu menjadi solusi, karena bisa saja saya lupa karakteristik yang saya pilih.

Akhirnya saya memutuskan membuat fitur Favorit. Saya sempat bingung bagaimana saya menyimpan data Favorit ini. Saya tidak mau menyimpan datanya di server karena artinya saya perlu merombak total stack yang saya kerjakan. Selain itu saya tidak mau menyiapkan registrasi/login/dsb yang artinya saya harus menyimpan data pribadi. Saya akhirnya ingat kalau fitur dark mode saya menyimpan data preferensi pengguna di localStorage, saya lalu berdiskusi dengan ChatGPT untuk menerapkannya.

Penambahan fitur Catatan dan Ekspor ke PDF

Tombol Favorit sudah ada, lalu bagaimana menampilkan datanya? Kalau Favorit saja rasanya terlalu kosong. Tanpa pikir panjang saya menambahkan Catatan.

Lalu timbul pertanyaan lagi, setelah itu apa? Lalu bagaimana jika pengguna berganti device? Tadinya kepikiran agar pengguna bisa ekspor ke JSON/XML, tapi malah merepotkan saya karena saya harus menyiapkan fitur impor untuk pengguna bisa membaca data JSON/XML tersebut, jadinya saya putuskan hanya PDF saja yang statis.

Rilis

Tanggal 15 Mei 2025 datang. Saya sudah mempromosikannya rilisnya di situs web GAAD 2025 dan IAAP. Sayangnya uji coba untuk semua fitur baru ini belum selesai juga, baru Simulasi saja yang berhasil. Saya memutuskan merilisnya dengan tambahan Simulasi saja.

Saya juga merombak navigasinya setelah melihat data analitik. Jarang sekali ada pengguna yang membuka Prinsip dan Pedoman; selain itu, keduanya juga tidak terlalu relevan untuk jangka panjang: lebih baik mengerti struktur WCAG atau mengerti cara menerapkan Kriterianya? Saya mengalah dan mengutamakan fitur Simulasi dan Kriteria WCAG sebagai navigasi utama untuk pengguna mengakses situs web ini. Untuk Prinsip dan Pedoman tetap ada tapi hanya sebagai pelengkap, seperti navigasi di breadcrumb.

Sebenarnya rilisnya pun hanya postingan di Instagram, LinkedIn, dan Twitter saja, tidak ada hal lain, tapi ternyata Rahma meminta saya menjelaskannya sedikit saat final ADC 2025 yang juga bertepatan saat rangkaian acara GAAD.

Pengembangan selanjutnya

Fitur Favorit dan Catatan akhirnya bisa saya luncurkan pada 19 Mei 2025.

Penambahan fitur TL;DR

Saya berkesempatan membantu lokalisasi WCAG 2.2 Card Deck ke bahasa Indonesia bersama Ocal. Versi berbahasa Indonesia ini sudah dirilis pada 14 Juli 2025 lalu.

Saat saya mereview kembali situs web Panduan WCAG Indonesia, saya merasa perlu menambahkan penjelasan singkat soal Kriteria yang sedang dibuka pengguna. Jadi saya menggunakan kembali konten yang saya dan Ocal buat di WCAG 2.2 Card Deck menjadi fitur TL;DR.

Mengumpulkan review pengguna

Saya juga memasang banner di tiap laman untuk meminta review dari pengguna. Walau data yang saya terima masih sedikit, namun garis besarnya sudah terlihat: Perlunya local context maupun bagaimana mengimplementasikan WCAG di mobile app.

Perbaikan sumber data analitik

Awalnya saya memakai Google Analytics (GA) untuk semua datanya. Sayangnya, GA memasang tracker di cookie mereka ynag membuat saya harus meminta persetujuan pengguna. Estimasi saya, hanya 10% pengguna yang menyetujuinya berdasarkan perbandingan dengan statistik bawaan Grav maupun dari CloudFlare.

Setelah browsing sana-sini, saya menemukan Umami yang tidak memasang cookie. Saya bisa menghapus consent banner dari website saya dan bisa mengumpulkan data secara menyeluruh.

Refleksi dan rencana selanjutnya

Belajar dengan cara menarik

Walau ternyata akhirnya saya lulus sertifikasi CPACC, pengalaman membuat Panduan WCAG Indonesia ini sungguh berharga. Proses ini memaksa saya untuk benar-benar memahami tiap kriteria, mempraktikkannya, dan mengujinya secara langsung.

Ternyata belajar dengan cara ini membuat saya lebih paham apa itu WCAG.

Respon pengguna

Keputusan saya mengutamakan fitur Simulasi terbukti bermanfaat berdasarkan data GA dan Umami: Mayoritas pengguna memakai fitur ini dibandingkan langsung membaca Kriterianya satu per satu. Fitur Favorit dan Catatan kurang terlalu diminati, namun sekalinya ada yang pakai, ia bisa menggunakannya terus menerus. Bahkan, ada yang setiap hari memakai fitur Favorit dan Catatan ini.

Dari Google Form yang saya sebarkan, mayoritas yang mengisi survei adalah mahasiswa. Setidaknya, saya sudah memberikan sumber belajar yang tepat untuk mereka terapkan saat bekerja nanti.

Rencana selanjutnya

Saya sekarang sedang mengembangkan Aksesibel. Menurut saya, Panduan WCAG Indonesia hanya akan berguna jika seseorang memiliki kesadaran akan pentingnya aksesibilitas. Nah Aksesibel hadir untuk membantu menumbuhkan kesadaran tersebut.

Saat ini sudah ada beberapa kontributor yang tertarik membantu pembuatan konten Aksesibel. Jika kamu tertarik, DM saya di Instagram, ya!

Tulisan ini pertama kali dipublish di rifatnajmi.com/id/journal/wcag