--- title: "Dasar Aksesibilitas Website dan WCAG untuk Bisnis" description: "Website yang sulit dipakai pengguna pembaca layar atau keyboard kehilangan pelanggan. Pahami dasar WCAG dan perbaikan cepat yang bisa dikerjakan hari ini." url: "https://nivelva.com/insight/aksesibilitas-website-wcag-dasar" category: "Bisnis Digital" tags: ["aksesibilitas website","wcag","desain inklusif","pembaca layar","ux"] author: "Theresia Candiawan" published: "2026-11-05T08:24:00+07:00" updated: "2026-11-05T08:24:00+07:00" language: "id" publisher: "Nivelva (https://nivelva.com)" --- # Dasar Aksesibilitas Website dan WCAG untuk Bisnis > **Jawaban singkat:** Aksesibilitas berarti website bisa dipakai semua orang, misalnya pengguna pembaca layar, keyboard, atau penglihatan terbatas. Acuannya WCAG 2.2 dengan empat prinsip: dapat dilihat, dapat dioperasikan, dapat dipahami, dan kokoh. Mulai dari kontras, keyboard, label formulir, dan heading. Bayangkan seorang calon pelanggan membuka halaman produkmu di siang terik, layar HP diredupkan agar hemat baterai. Teks abu-abu muda di atas latar putih hampir tidak terbaca. Ia mencoba mengisi formulir pemesanan, tapi kolomnya tidak berlabel dan tombol kirimnya berupa ikon tanpa teks. Ia menyerah dan membuka website pesaing. Itulah aksesibilitas dalam praktik. Website yang aksesibel bisa dipakai oleh siapa saja: orang dengan gangguan penglihatan yang memakai pembaca layar, orang yang tidak bisa memakai mouse, orang tua yang butuh huruf lebih besar, sampai pengguna biasa di kondisi yang tidak ideal. Acuan internasionalnya adalah WCAG (Web Content Accessibility Guidelines) dari W3C. ## WCAG dalam satu halaman Per 4 November 2026, versi WCAG terbaru yang berlaku adalah **WCAG 2.2**, yang diterbitkan W3C pada 5 Oktober 2023 dan diperbarui 12 Desember 2024. Menurut W3C, versi Oktober 2023 sudah disetujui sebagai standar ISO/IEC 40500:2025, sedangkan pembaruan Desember 2024 diperkirakan terbit sebagai ISO/IEC 40500:2026. WCAG 3 masih berupa draf awal, jadi belum menjadi acuan kepatuhan. Isinya disusun di atas empat prinsip yang sering disingkat POUR. *Perceivable* berarti informasi bisa ditangkap, misalnya gambar punya teks alternatif dan video punya teks. *Operable* berarti semua fungsi bisa dijalankan, termasuk tanpa mouse. *Understandable* berarti isi dan cara kerjanya mudah dipahami. *Robust* berarti kodenya cukup rapi untuk dibaca berbagai browser dan alat bantu. Setiap kriteria punya tingkat A, AA, atau AAA. Tingkat A adalah batas minimum, AA adalah target yang umum dipakai organisasi dan regulasi di banyak negara, dan AAA adalah tingkat tertinggi yang tidak selalu bisa dipenuhi untuk semua jenis konten. Untuk website bisnis, AA adalah sasaran yang masuk akal. ## Perbaikan cepat yang paling sering terlewat Kamu tidak perlu menghafal seluruh dokumen WCAG untuk mulai. Sebagian besar masalah di website bisnis jatuh ke beberapa kelompok yang sama, dan banyak di antaranya bisa diperbaiki dalam sehari. | Area | Masalah yang sering ditemui | Cara memperbaikinya | |:--|:--|:--| | Kontras warna | Teks abu-abu muda, teks di atas foto | Untuk AA, rasio kontras teks normal minimal 4,5:1 dan teks besar minimal 3:1 | | Navigasi keyboard | Menu dropdown dan pop-up tidak bisa dibuka dengan Tab | Pastikan semua elemen interaktif bisa dijangkau dan terlihat fokusnya | | Label formulir | Kolom hanya diberi placeholder | Pakai elemen label yang terhubung ke setiap kolom | | Struktur heading | Heading dipilih karena ukuran huruf, bukan urutan | Satu H1 per halaman, lalu H2 dan H3 berurutan | | Teks alternatif | Gambar produk tanpa alt, atau alt berisi nama file | Tulis alt yang menjelaskan isi atau fungsi gambar | | Tautan dan tombol | "Klik di sini", ikon tanpa nama | Teks tautan yang jelas, beri nama aksesibel pada tombol ikon | | Media | Video tanpa teks, audio otomatis | Sediakan teks atau transkrip, jangan putar suara otomatis | Kontras adalah yang paling mudah diukur. Banyak desain modern memakai abu-abu tipis karena terlihat elegan, padahal sulit dibaca di layar yang redup atau oleh mata yang sudah tua. Perbaiki di level tema agar seluruh halaman ikut berubah. Navigasi keyboard bisa kamu uji sendiri sekarang. Letakkan mouse, lalu tekan Tab berulang kali dari atas halaman. Perhatikan apakah selalu jelas elemen mana yang sedang aktif, apakah urutannya masuk akal, dan apakah menu, pop-up, serta formulir bisa dibuka dan ditutup. Kalau fokusnya hilang atau kamu terjebak di dalam pop-up, pengguna keyboard pun mengalami hal yang sama. Label formulir sering dikorbankan demi tampilan minimalis. Placeholder hilang begitu pengguna mulai mengetik, sehingga orang lupa kolom itu untuk apa, dan pembaca layar tidak selalu membacanya. Label yang tetap terlihat menolong semua orang, bukan hanya pengguna alat bantu. Struktur heading adalah peta halaman bagi pembaca layar. Pengguna bisa melompat dari heading ke heading untuk mencari bagian yang ia butuhkan, sama seperti orang lain memindai halaman dengan mata. Heading yang dipilih hanya karena ukurannya pas membuat peta itu kacau. Untuk gambar, aturan menulis alt text yang baik dibahas terpisah di cara menulis alt text. ## Alat uji gratis untuk memulai Beberapa alat gratis bisa menemukan banyak masalah teknis dalam hitungan menit. Lighthouse yang ada di Chrome DevTools punya kategori Accessibility dan memberi daftar temuan per halaman. WAVE dari WebAIM menandai masalah langsung di atas tampilan halaman, sehingga mudah dipahami tim non-teknis. Ekstensi axe DevTools juga punya versi gratis untuk pemeriksaan dasar. Alat otomatis tetap punya batas. Mesin bisa mendeteksi gambar tanpa alt, tapi tidak bisa menilai apakah alt yang ada benar-benar menjelaskan gambar. Mesin juga tidak bisa merasakan apakah alur pemesanan membingungkan. Karena itu, lengkapi hasil alat dengan uji manual: navigasi dengan keyboard, perbesar tampilan sampai 200 persen, dan coba pembaca layar bawaan seperti VoiceOver di perangkat Apple, TalkBack di Android, atau NVDA yang gratis untuk Windows. ## Mengapa ini juga urusan SEO dan penjualan? Banyak praktik aksesibilitas tumpang tindih dengan praktik SEO yang baik. Mesin pencari membaca halaman mirip cara pembaca layar membacanya: dari struktur heading, teks tautan, dan teks alternatif gambar. Halaman dengan heading rapi dan alt yang deskriptif lebih mudah dipahami keduanya. Dasar-dasar SEO lain bisa kamu lihat di [SEO dasar untuk UMKM](https://nivelva.com/insight/seo-dasar-umkm). Dari sisi penjualan, setiap hambatan di formulir atau tombol adalah titik orang berhenti. Label yang jelas, kontras cukup, dan tombol yang mudah ditekan di HP mengurangi pembatalan bagi semua pengunjung, tidak hanya pengguna disabilitas. Prinsip yang sama dipakai saat menyusun [landing page yang menjual](https://nivelva.com/insight/landing-page-yang-menjual). ## Mulai dari halaman yang paling penting Jangan menunggu redesain besar. Pilih tiga halaman yang paling menentukan, biasanya beranda, halaman produk atau layanan utama, dan halaman kontak atau checkout. Jalankan Lighthouse dan WAVE, perbaiki kontras dan label, lalu uji dengan keyboard. Setelah pola perbaikannya jelas, terapkan di template agar seluruh website ikut membaik. Untuk konten baru, buat kebiasaan sederhana di tim: setiap gambar diberi alt, setiap halaman memakai heading berurutan, dan setiap video diberi teks. Kebiasaan kecil ini jauh lebih murah daripada audit besar di kemudian hari. Jadikan WCAG 2.2 tingkat AA sebagai arah, lalu kerjakan perbaikan di atas satu per satu. Hasilnya website yang lebih mudah dipakai, lebih mudah dipahami mesin pencari, dan lebih jarang ditinggalkan calon pelanggan di tengah formulir. ## Sumber - --- Diterbitkan oleh Nivelva Insight (https://nivelva.com/insight/). Artikel ini: https://nivelva.com/insight/aksesibilitas-website-wcag-dasar Kontak Nivelva: WhatsApp https://wa.me/6285111245007, email hello@nivelva.com