Ilustrasi aksesibilitas digital dengan simbol dan teks di layar komputer
Kembali ke blog

Web Accessibility: WCAG untuk Bisnis Indonesia

Panduan web accessibility berbasis WCAG untuk bisnis Indonesia: mengapa aksesibilitas penting, prinsip dasarnya, dan langkah praktis membuat website inklusif.

Sore itu, seorang dosen senior di Bandar Lampung mencoba memesan layanan dari website sebuah perusahaan jasa. Ia baru saja kehilangan sebagian penglihatannya karena penyakit mata. Dengan huruf yang terlalu kecil dan kontras warna yang rendah, ia menempelkan wajahnya ke layar, mencubit layar untuk memperbesar, tapi elemen website itu justru semakin berantakan. Frustrasi, ia menyerah dan menelepon pesaingnya.

Ia bukan kasus langka. Di Indonesia, jutaan orang hidup dengan disabilitas: gangguan penglihatan, pendengaran, motorik, hingga kognitif. Mereka berbelanja, bekerja, dan mengurus administrasi secara online seperti orang lain. Pertanyaannya: apakah website Anda bisa mereka gunakan?

Web accessibility—sering disingkat a11y—adalah praktik membuat website dan aplikasi dapat digunakan oleh semua orang, termasuk mereka yang memiliki keterbatasan. Di banyak negara, ini sudah menjadi kewajiban hukum. Di Indonesia, ia mulai menjadi bagian dari standar layanan publik dan tuntutan pelanggan yang semakin sadar. Artikel ini membahas aksesibilitas web secara praktis: apa itu WCAG, mengapa bisnis Anda harus peduli, dan langkah-langkah konkret yang bisa diterapkan.

Apa Itu WCAG

WCAG (Web Content Accessibility Guidelines) adalah standar internasional untuk aksesibilitas web, dikembangkan oleh W3C—organisasi yang sama yang menetapkan standar HTML. WCAG adalah rujukan utama bagi siapa pun yang ingin membuat website yang bisa digunakan oleh penyandang disabilitas.

WCAG dibangun di atas empat prinsip, sering disingkat POUR:

  • Perceivable (Dapat Dirasakan) — informasi dan antarmuka harus bisa dipersepsikan oleh semua indra yang relevan. Contoh: gambar perlu teks alternatif bagi pengguna tunanetra yang memakai pembaca layar; video perlu teks berjalan bagi pengguna tunarungu.
  • Operable (Dapat Dioperasikan) — pengguna harus bisa berinteraksi dengan antarmuka. Contoh: seluruh fungsi website harus bisa diakses lewat keyboard saja, karena tidak semua pengguna bisa menggunakan mouse.
  • Understandable (Dapat Dipahami) — informasi dan cara penggunaan harus jelas. Contoh: bahasa halaman harus bisa diidentifikasi, dan form harus memberi pesan kesalahan yang bisa dimengerti.
  • Robust (Kokoh) — konten harus bisa diakses oleh berbagai perangkat, termasuk teknologi pendukung. Contoh: kode HTML yang valid dan semantik agar pembaca layar bisa menafsirkannya dengan benar.

Di dalam empat prinsip ini terdapat tiga tingkat kepatuhan: A (paling dasar), AA (standar umum), dan AAA (paling ketat). Untuk sebagian besar bisnis, tingkat AA adalah target yang realistis dan tepat—memuaskan sebagian besar kebutuhan pengguna tanpa mengorbankan desain dan biaya pengembangan.

Memahami Tingkat Kepatuhan WCAG

LevelArtiContoh persyaratan
ADasar—menghilangkan hambatan terbesarTeks alternatif pada gambar, navigasi keyboard, warna bukan satu-satunya penanda informasi
AAStandar umum—target realistis bisnisKontras 4,5:1, label pada formulir, bahasa halaman teridentifikasi
AAAPaling ketat—untuk kebutuhan khususKontras 7:1, bahasa isyarat untuk video, pembatasan animasi yang ketat

Banyak organisasi menargetkan AAA sebagai "pembuktian kualitas," padahal tingkat ini tidak selalu bisa dicapai untuk semua jenis konten—misalnya, menyediakan bahasa isyarat untuk semua video langsung sering berada di luar jangkauan anggaran. Memenuhi AA secara konsisten sudah menempatkan website Anda di atas mayoritas pesaing, dan perjalanan menuju AA biasanya sekaligus mencakup sebagian besar manfaat level A.

Mengapa Bisnis Anda Harus Peduli

Aksesibilitas adalah Pasar yang Nyata

Menurut data Kementerian Sosial dan berbagai sumber, Indonesia memiliki belasan juta penyandang disabilitas—angka yang setara dengan populasi sebuah kota besar, dan lebih besar dari populasi beberapa negara. Angka ini bahkan belum termasuk populasi yang menua, yang jumlahnya terus bertambah: mata yang melemah, pendengaran yang menurun, dan genggaman yang menguat memengaruhi hampir semua orang seiring usia.

Ditambah lagi, aksesibilitas tidak hanya membantu penyandang disabilitas. Kontras warna yang baik membantu semua orang membaca di bawah sinar matahari. Teks alternatif membantu saat gambar gagal dimuat di koneksi lambat. Navigasi keyboard membantu siapa pun yang menggunakan laptop tanpa mouse. Desain yang inklusif adalah desain yang lebih baik untuk semua orang.

Kewajiban Hukum yang Semakin Nyata

Di Indonesia, Undang-Undang Nomor 8 Tahun 2016 tentang Penyandang Disabilitas menegaskan hak penyandang disabilitas untuk mengakses teknologi informasi dan komunikasi. Badan pemerintah dan penyedia layanan publik semakin didorong memenuhi standar aksesibilitas, dan tren ini merembes ke sektor swasta—terutama bagi bisnis yang melayani instansi pemerintah atau bekerja sama dengan organisasi internasional.

Di negara lain, tren hukumnya sudah jauh lebih tegas. Di Amerika Serikat, bisnis telah dituntut karena websitenya tidak dapat diakses. Di Uni Eropa, undang-undang aksesibilitas mewajibkan banyak layanan digital. Jika bisnis Anda bekerja dengan mitra atau klien internasional, kepatuhan aksesibilitas bisa menjadi syarat kontrak yang sesungguhnya.

Aksesibilitas Membangun Reputasi

Ketika website Anda dapat digunakan oleh semua orang, itu adalah pernyataan nilai yang terlihat nyata. Pelanggan yang selama ini kesulitan menggunakan layanan pesaing akan mengingat website yang tidak menyulitkan mereka. Di era ulasan online, pengalaman buruk menyebar cepat—begitu juga pengalaman baik.

Siapa yang Terdampak dan Bagaimana

Untuk memahami aksesibilitas, kenali dulu siapa penggunanya dan hambatan apa yang mereka hadapi:

Tunanetra dan Penglihatan Terbatas

Mereka menggunakan pembaca layar (screen reader)—perangkat lunak yang membaca konten layar dengan suara—atau memperbesar tampilan. Hambatan umum: gambar tanpa teks alternatif, kontras warna rendah, teks yang tidak bisa diperbesar, dan struktur halaman yang tidak bisa dinavigasi dengan logis.

Tunarungu dan Gangguan Pendengaran

Mereka tidak bisa mengandalkan suara. Hambatan umum: video tanpa teks berjalan atau transkrip, notifikasi yang hanya lewat suara, dan konten audio tanpa alternatif visual.

Keterbatasan Motorik

Sebagian mengalami kesulitan atau ketidakmampuan menggunakan mouse, karena tremor, kondisi neurologis, atau cedera. Mereka bergantung pada keyboard, perangkat switch, atau kontrol suara. Hambatan umum: fungsi yang hanya bisa diakses dengan hover mouse, target sentuh yang terlalu kecil, dan urutan fokus keyboard yang kacau.

Disabilitas Kognitif

Termasuk kesulitan membaca, gangguan atensi, dan kondisi seperti disleksia. Hambatan umum: teks yang terlalu panjang tanpa struktur, bahasa yang rumit, animasi yang bergerak terus-menerus, dan tata letak yang tidak konsisten.

Prinsip Praktis: Memulai dari Fondasi

Kabar baiknya: sebagian besar perbaikan aksesibilitas tidak mahal jika dilakukan sejak awal, dan banyak di antaranya adalah praktik pengembangan web yang baik secara umum. Berikut fondasi yang harus dipenuhi setiap website bisnis.

HTML Semantik: Bahasa yang Dimengerti Teknologi Pendukung

HTML semantik berarti menggunakan elemen sesuai maknanya: <nav> untuk navigasi, <main> untuk konten utama, <h1><h6> untuk hierarki judul, <button> untuk tombol, dan <a> untuk tautan.

Mengapa penting? Pembaca layar menggunakan struktur ini untuk menavigasi. Pengguna bisa melompat dari judul ke judul, atau langsung ke konten utama, seperti orang yang melihat halaman dengan mata. Website yang dibangun dengan <div> di mana-mana—tanpa makna—adalah "dinding teks" yang tidak bisa dinavigasi bagi pengguna pembaca layar.

Teks Alternatif untuk Gambar

Setiap gambar informatif harus memiliki atribut alt yang menjelaskan isinya secara ringkas. Pengguna tunanetra akan mendengar deskripsi ini melalui pembaca layar. Gambar dekoratif harus diberi alt kosong agar diabaikan, bukan dibacakan dengan cara yang membingungkan.

Aturan singkat: tulis alt seolah-olah mendeskripsikan gambar melalui telepon. "Logo perusahaan" untuk logo, "Foto produk tas kulit warna cokelat" untuk foto produk, dan jangan mengisi alt dengan rangkaian kata kunci—itu bukan hanya tidak sopan bagi pengguna, tapi juga merusak pengalaman.

Kontras Warna yang Cukup

WCAG tingkat AA mensyaratkan rasio kontras minimal 4,5:1 untuk teks biasa, dan 3:1 untuk teks besar. Teks abu-abu muda di atas latar putih yang tampak "elegan" sering gagal di tes ini. Alat gratis seperti pemeriksa kontras dapat mengukur rasio warna Anda hanya dengan beberapa klik.

Kontras yang baik tidak menghalangi desain. Ia hanya menuntut pilihan warna yang lebih hati-hati—dan hasilnya nyata: teks yang lebih mudah dibaca di layar ponsel di luar ruangan, oleh siapa saja.

Keyboard: Semua Fungsi Harus Bisa Diakses Tanpa Mouse

Coba gunakan website Anda hanya dengan keyboard: Tab untuk berpindah, Enter untuk mengaktifkan, dan lihat apakah urutannya masuk akal. Pengguna yang tidak bisa memakai mouse bergantung penuh pada jalur ini.

Syarat penting: indikator fokus yang terlihat. Saat menekan Tab, Anda harus bisa melihat elemen mana yang sedang aktif—bukan sekadar lingkaran samar atau tidak ada sama sekali. Banyak website menghapus indikator fokus dengan alasan "tidak cantik," padahal itu menghilangkan alat navigasi utama bagi sebagian pengguna.

Formulir dengan Label yang Jelas

Setiap kolom formulir harus memiliki label yang tertaut, bukan hanya teks placeholder yang hilang saat mengetik. Placeholder bukan pengganti label: ia memudar, kontrasnya sering rendah, dan pembaca layar tidak selalu membacakannya.

Pesan kesalahan juga harus jelas dan terkait dengan kolom yang bermasalah, bukan sekadar warna merah yang tidak bisa dibedakan oleh pengguna buta warna.

Aksesibilitas di Dunia Nyata: Video, Audio, dan Interaksi

Teks Berjalan dan Transkrip

Jika bisnis Anda memproduksi video—profil perusahaan, demo produk, tutorial—tambahkan teks berjalan dan transkrip. Ini melayani pengguna tunarungu sekaligus semua orang yang menonton tanpa suara, yang di media sosial adalah mayoritas.

Animasi dan Gerakan

Animasi yang indah bisa menjadi gangguan bagi pengguna dengan vestibular disorders (gangguan keseimbangan) dan kondisi neurologis. Konten yang berkedip lebih dari tiga kali per detik bahkan bisa memicu kejang pada sebagian orang.

Praktik yang baik: hormati preferensi sistem operasi "reduce motion" yang dimiliki pengguna, dan berikan cara untuk menjeda carousel atau konten bergerak. Detail ini kami terapkan juga pada proyek yang kami bangun—gerakan harus memperjelas, bukan menghalangi.

Tautan yang Jelas

Tautan harus menjelaskan tujuannya: "Baca panduan biaya pembuatan website" lebih baik daripada "klik di sini." Pengguna pembaca layar sering menavigasi dengan daftar tautan saja; daftar yang berisi sepuluh "klik di sini" tidak berguna sama sekali.

Aksesibilitas dan Mobile: Persimpangan yang Tak Terhindarkan

Di Indonesia, aksesibilitas web hampir selalu berarti aksesibilitas seluler, karena mayoritas pengguna datang dari ponsel. Kabar baiknya: banyak prinsip yang tumpang tindih. Desain mobile-first yang baik—target sentuh yang besar, teks yang terbaca, hierarki konten yang jelas—adalah separuh pekerjaan aksesibilitas.

Kami membahas cara membangun untuk ponsel secara menyeluruh di panduan responsive design dan mobile-first. Poin pentingnya: jangan perlakukan aksesibilitas sebagai pekerjaan tambahan di akhir proyek. Perlakukan ia sebagai bagian dari desain dasar, bersama dengan tampilan seluler yang baik.

Menguji Aksesibilitas Website Anda

Berita baiknya, Anda tidak perlu menjadi ahli untuk memulai pengujian. Ada lapisan-lapisan yang bisa dilakukan siapa saja:

1. Uji Otomatis dengan Alat Gratis

Alat seperti Lighthouse (bawaan Chrome), axe, dan WAVE memindai halaman dan menemukan masalah umum: gambar tanpa alt, kontras rendah, tombol tanpa label, dan struktur judul yang salah. Jalankan di halaman-halaman penting Anda. Ini bukan bukti kelulusan, tapi ia menangkap sebagian besar masalah yang mudah ditemukan.

2. Uji Manual dengan Keyboard

Gunakan website Anda hanya dengan keyboard. Bisa mencapai semua fungsi? Apakah indikator fokus terlihat? Apakah urutan Tab masuk akal? Ini tes yang bisa dilakukan siapa saja dalam hitungan menit dan sering mengungkap masalah yang tidak ditemukan alat otomatis.

3. Uji dengan Pembaca Layar

Coba navigasi singkat dengan pembaca layar (VoiceOver di iPhone, TalkBack di Android, atau NVDA di Windows). Dengarkan bagaimana struktur halaman Anda dibacakan. Pengalaman ini membuka mata: halaman yang "rapi" secara visual bisa menjadi kekacauan bagi pembaca layar.

4. Libatkan Pengguna Nyata

Tidak ada yang menggantikan pengujian dengan penyandang disabilitas sungguhan. Jika anggaran memungkinkan, libatkan pengguna dengan berbagai kondisi untuk menguji alur penting bisnis Anda. Temuan mereka hampir selalu mengungkap masalah yang tidak terlihat oleh alat dan pengembang.

Biaya Menerapkan Aksesibilitas

Salah satu mitos terbesar: "aksesibilitas itu mahal." Kebenarannya tergantung kapan Anda memulainya.

SkenarioPerkiraan biayaKeterangan
Dibangun dengan standar aksesibilitas sejak awalBiaya minimal—bagian dari pekerjaan10–20% tambahan waktu pengembangan, sering lebih kecil
Audit aksesibilitas website yang sudah jadiRp 5–20 jutaTergantung ukuran dan kompleksitas
Perbaikan menyeluruh website lamaRp 10–75 jutaTergantung seberapa dalam masalahnya
Melibatkan pengguna disabilitas dalam pengujianRp 3–15 juta per sesiHigh-value, menghasilkan temuan nyata

Bandingkan dengan biaya tidak melakukan apa-apa: pelanggan yang hilang karena tidak bisa menggunakan website Anda, risiko reputasi, dan potensi tuntutan di masa depan ketika kesadaran hukum meningkat. Seperti panduan keamanan website yang selalu kami tekankan: biaya pencegahan hampir selalu jauh lebih kecil daripada biaya perbaikan.

Aksesibilitas dan Teknologi: Peran Framework dan Pengembang

Aksesibilitas tidak bisa ditambal dari sisi konten saja. Ia tertanam dalam kode: struktur HTML, perilaku JavaScript untuk komponen interaktif seperti dropdown dan modal, pengelolaan fokus, hingga bagaimana data disajikan.

Inilah mengapa pilihan teknologi dan kualitas pengembang sangat menentukan. Kerangka kerja modern dengan komponen yang bisa diakses membuat banyak hal benar secara default. Kode yang ditulis asal-asalan—misalnya tombol yang dibuat dari <div>—merusak aksesibilitas bahkan di website dengan konten terbaik.

Ketika memilih penyedia pengembangan, tanyakan: "Apakah tim Anda menerapkan praktik aksesibilitas? Bagaimana Anda mengujinya?" Pertanyaan yang sama yang kami sarankan untuk diajukan dalam panduan memilih jasa pembuatan website, kali ini dengan fokus aksesibilitas.

Aksesibilitas untuk Aplikasi dan Sistem Internal

Aksesibilitas tidak berhenti di website publik. Aplikasi internal perusahaan—sistem HR, aplikasi lapangan, portal pelanggan—sama pentingnya. Karyawan dengan disabilitas berhak atas alat kerja yang bisa mereka gunakan, dan ini adalah bagian dari lingkungan kerja yang inklusif.

Di banyak perusahaan besar, kepatuhan aksesibilitas pada sistem internal sudah menjadi bagian dari kebijakan pengadaan dan SDM. Perusahaan yang membangun sistem sejak awal dengan standar aksesibilitas tidak perlu merombak di kemudian hari—dan ini adalah salah satu pertimbangan penting saat memutuskan membangun software custom atau memilih paket yang sudah jadi.

Kesalahan Umum yang Harus Dihindari

  • "Overlay aksesibilitas" sebagai solusi instan. Banyak vendor menjual widget yang diklaim "membuat website Anda accessible dengan satu baris kode." Hati-hati: overlay semacam ini sering gagal memenuhi standar, bisa bentrok dengan pembaca layar, dan di beberapa negara malah menjadi sasaran tuntutan hukum. Tidak ada pengganti fondasi yang benar.
  • Menganggap aksesibilitas hanya untuk tunanetra. Tunarungu, keterbatasan motorik, dan disabilitas kognitif sama-sama terdampak.
  • Menguji hanya sekali. Teknologi berubah, konten bertambah, dan masalah baru muncul. Aksesibilitas perlu ditinjau seperti halnya keamanan dan SEO—berkala.
  • Menunda sampai "nanti." Menambal website yang sudah jadi selalu lebih mahal dan hasilnya lebih buruk daripada membangun dengan benar sejak awal.
  • Menggunakan alat otomatis sebagai "bukti" kepatuhan. Alat otomatis hanya menangkap sebagian dari masalah aksesibilitas. Banyak hambatan—konteks, urutan yang logis, pengalaman nyata pengguna—hanya bisa dinilai oleh manusia.
  • Melupakan aksesibilitas saat membeli software. Saat memilih sistem kasir, software akuntansi, atau platform e-commerce, tanyakan standar aksesibilitasnya. Sistem yang tidak aksesibel sejak awal akan menular ke website dan aplikasi yang dibangun di atasnya.
  • Menghapus indikator fokus keyboard. Ini praktik yang umum dan sangat merugikan.

Langkah Pertama Anda Hari Ini

Anda tidak perlu merombak semuanya sekaligus. Mulai dari langkah-langkah kecil yang langsung terasa:

  1. Jalankan alat uji otomatis di halaman beranda dan halaman paling penting bisnis Anda. Catat temuannya.
  2. Uji keyboard seluruh alur penting: menemukan produk, menghubungi Anda, melakukan pembelian.
  3. Perbaiki kontras warna dan ukuran teks di halaman yang paling banyak dikunjungi.
  4. Lengkapi teks alternatif untuk gambar-gambar penting.
  5. Tambahkan label pada semua kolom formulir, dan pastikan pesan kesalahan jelas.
  6. Jadwalkan peninjauan berkala—aksesibilitas adalah standar yang dijaga, bukan proyek sekali jalan.

Aksesibilitas Adalah Kualitas, Bukan Amal

Kembali ke dosen senior di awal cerita. Bayangkan skenario yang berbeda: website perusahaan jasa itu memiliki kontras yang baik, teks yang bisa diperbesar, dan struktur yang bisa dinavigasi pembaca layar. Ia menyelesaikan pemesanannya sendiri, tanpa bantuan siapa pun, dan merasa dihormati sebagai pelanggan. Website itu baru saja memenangkan pelanggan setia—bukan karena diskon, tapi karena sebuah keputusan desain yang diambil bertahun-tahun sebelumnya.

Aksesibilitas bukan amal dan bukan "kewajiban yang menyebalkan." Ia adalah kualitas produk. Website yang bisa digunakan semua orang menjangkau pasar yang lebih luas, membangun reputasi yang lebih baik, mengurangi risiko hukum, dan pada akhirnya—seperti semua desain yang baik—membuat hidup lebih mudah bagi semua orang, termasuk mereka yang tidak pernah menyadari bahwa mereka membutuhkannya.

Jika Anda ingin memastikan website atau aplikasi bisnis Anda memenuhi standar aksesibilitas, tim Kartech. di Bandar Lampung bisa membantu mengaudit kondisi saat ini dan menerapkan perbaikannya. Mulai dari halaman kontak atau lihat layanan kami di halaman layanan.

Baca juga: panduan responsive design dan mobile-first dan panduan technical SEO untuk bisnis.

Foto: Unsplash

Serahkan bagian tersulitnya.

Ceritakan apa yang sedang macet, perlu dibangun, atau bikin frustrasi soal teknologi Anda. Kami mulai dari masalah Anda—bukan dari penawaran.

Diskusi dulu