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
| Level | Arti | Contoh persyaratan |
|---|---|---|
| A | Dasar—menghilangkan hambatan terbesar | Teks alternatif pada gambar, navigasi keyboard, warna bukan satu-satunya penanda informasi |
| AA | Standar umum—target realistis bisnis | Kontras 4,5:1, label pada formulir, bahasa halaman teridentifikasi |
| AAA | Paling ketat—untuk kebutuhan khusus | Kontras 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.
| Skenario | Perkiraan biaya | Keterangan |
|---|---|---|
| Dibangun dengan standar aksesibilitas sejak awal | Biaya minimal—bagian dari pekerjaan | 10–20% tambahan waktu pengembangan, sering lebih kecil |
| Audit aksesibilitas website yang sudah jadi | Rp 5–20 juta | Tergantung ukuran dan kompleksitas |
| Perbaikan menyeluruh website lama | Rp 10–75 juta | Tergantung seberapa dalam masalahnya |
| Melibatkan pengguna disabilitas dalam pengujian | Rp 3–15 juta per sesi | High-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:
- Jalankan alat uji otomatis di halaman beranda dan halaman paling penting bisnis Anda. Catat temuannya.
- Uji keyboard seluruh alur penting: menemukan produk, menghubungi Anda, melakukan pembelian.
- Perbaiki kontras warna dan ukuran teks di halaman yang paling banyak dikunjungi.
- Lengkapi teks alternatif untuk gambar-gambar penting.
- Tambahkan label pada semua kolom formulir, dan pastikan pesan kesalahan jelas.
- 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.