Website seharusnya bisa diakses oleh semua orang, termasuk penyandang disabilitas. Untuk mewujudkan hal ini, Web Content Accessibility Guidelines (WCAG) menjadi standar internasional yang krusial. WCAG adalah serangkaian pedoman yang dikembangkan oleh World Wide Web Consortium (W3C) untuk memastikan konten web dapat digunakan oleh individu dengan berbagai jenis disabilitas, seperti gangguan penglihatan, pendengaran, kognitif, motorik, dan neurologis.

Versi terbaru yang paling banyak diadopsi saat ini adalah WCAG 2.1, yang dibangun di atas versi sebelumnya (WCAG 2.0) dengan menambahkan kriteria sukses baru, terutama untuk mobile accessibility dan disabilitas kognitif/pembelajaran. Mengikuti panduan ini tidak hanya etis tetapi juga dapat membantu mencapai kepatuhan hukum dan memperluas audiens Anda.

Prinsip Utama WCAG 2.1 (POUR)

WCAG 2.1 dibangun di atas empat prinsip fundamental yang dikenal dengan akronim POUR:

1. Perceivable (Dapat Terindra)

   Informasi dan komponen antarmuka harus disajikan kepada pengguna dengan cara yang dapat mereka rasakan atau terindra. Ini berarti konten tidak boleh "tidak terlihat" atau "tidak terdengar" oleh indra mereka.

   • Contoh Penerapan:

     • Alternatif Teks untuk Non-Teks (1.1.1): Sediakan teks alternatif (alt text) untuk semua gambar, ikon, atau elemen non-teks lainnya. Ini memungkinkan screen reader untuk "membaca" deskripsi gambar kepada pengguna tunanetra.

       • Baik: <img src="kucing.jpg" alt="Seekor kucing oranye sedang tidur di sofa.">

       • Buruk: <img src="kucing.jpg" alt="gambar">

     • Keterangan (Captions) untuk Media Berbasis Waktu (1.2.2): Sediakan captions atau transkrip untuk semua konten audio atau video yang sudah direkam. Untuk live video, sediakan captions live.

     • Kontras Warna Minimum (1.4.3): Pastikan rasio kontras warna antara teks dan latar belakang minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Ini membantu pengguna dengan gangguan penglihatan membedakan teks.

     • Tidak Hanya Berdasarkan Warna (1.4.1): Jangan hanya mengandalkan warna untuk menyampaikan informasi. Misalnya, gunakan ikon atau teks selain warna untuk menunjukkan status (misalnya, field wajib diisi).

2. Operable (Dapat Dioperasikan)

   Komponen antarmuka pengguna dan navigasi harus dapat dioperasikan. Ini berarti pengguna harus bisa berinteraksi dengan situs, tidak peduli bagaimana mereka mengaksesnya.

   • Contoh Penerapan:

     • Aksesibel Keyboard (2.1.1): Semua fungsi website harus dapat diakses dan dioperasikan hanya dengan menggunakan keyboard (tanpa mouse). Ini penting untuk pengguna yang tidak bisa menggunakan mouse atau yang menggunakan assistive technology berbasis keyboard.

     • Tanpa Batasan Waktu (2.2.1): Beri pengguna cukup waktu untuk membaca dan menggunakan konten. Hindari timeout yang terlalu cepat pada formulir atau sesi. Jika ada timeout, berikan peringatan dan opsi untuk memperpanjang waktu.

     • Navigasi yang Jelas (2.4.4): Sediakan link text yang jelas dan deskriptif. Hindari "klik di sini" yang ambigu. Link harus menjelaskan tujuan mereka.

     • Ukuran Target (2.5.5 - WCAG 2.1 baru): Pastikan area target untuk elemen interaktif (tombol, link) cukup besar (minimal 44x44 CSS pixels) agar mudah diklik atau disentuh.

3. Understandable (Dapat Dimengerti)

   Informasi dan pengoperasian antarmuka pengguna harus dapat dimengerti. Ini berarti konten dan interface harus mudah dipahami.

   • Contoh Penerapan:

     • Konten Terbaca (3.1.2): Gunakan bahasa yang jelas dan sederhana. Hindari jargon yang tidak perlu.

     • Dapat Diprediksi (3.2.3): Pastikan navigasi dan fungsionalitas website berperilaku secara konsisten dan dapat diprediksi. Jangan mengubah konteks secara tiba-tiba tanpa pemberitahuan.

     • Identifikasi Input Purpose (1.3.5 - WCAG 2.1 baru): Untuk field input formulir, tentukan tujuan input secara terprogram (misalnya, menggunakan atribut autocomplete) agar browser dan assistive technology dapat membantu pengguna mengisi formulir.

     • Penanganan Kesalahan (3.3.1): Jika ada kesalahan input, identifikasi kesalahan secara jelas kepada pengguna, dan berikan saran bagaimana cara memperbaikinya.

4. Robust (Andal)

   Konten harus cukup "kokoh" sehingga dapat diinterpretasikan secara andal oleh berbagai agen pengguna, termasuk teknologi bantu (misalnya screen reader, magnifier).

   • Contoh Penerapan:

     • Kompatibel (4.1.2): Pastikan semua komponen antarmuka pengguna, termasuk elemen formulir, link, dan komponen yang dihasilkan oleh script, memiliki nama, peran, dan nilai yang dapat ditentukan secara terprogram. Gunakan atribut ARIA (Accessible Rich Internet Applications) untuk memberikan informasi tambahan kepada assistive technology jika elemen HTML tidak memiliki semantik bawaan yang cukup.

     • Parsing (4.1.1): Pastikan kode HTML Anda valid dan bebas dari kesalahan fatal yang dapat membingungkan assistive technology.

Level Kepatuhan WCAG 2.1 (A, AA, AAA)

WCAG 2.1 memiliki tiga level kepatuhan yang menunjukkan tingkat aksesibilitas yang dicapai:

• Level A (Minimum): Ini adalah level aksesibilitas paling dasar, mengatasi hambatan aksesibilitas yang paling kritis. Jika sebuah situs tidak memenuhi Level A, situs tersebut hampir tidak mungkin diakses oleh sebagian kelompok penyandang disabilitas.

• Level AA (Menengah): Ini mencakup semua kriteria Level A ditambah persyaratan tambahan. Level AA adalah standar yang paling umum direkomendasikan dan seringkali menjadi persyaratan hukum di banyak yurisdiksi. Mencapai Level AA berarti sebagian besar pengguna dengan disabilitas dapat mengakses dan menggunakan situs Anda.

• Level AAA (Maksimum): Ini adalah level kepatuhan tertinggi dan yang paling sulit dicapai. Mencakup semua kriteria Level A dan AA ditambah persyaratan yang lebih ketat. Level AAA seringkali tidak realistis untuk diterapkan pada seluruh situs web yang kompleks, tetapi bisa menjadi target untuk bagian-bagian tertentu dari situs (misalnya, halaman bantuan atau video edukasi).

Alat untuk Menguji Aksesibilitas Website WCAG 2.1

Untuk memastikan website Anda memenuhi pedoman WCAG 2.1, Anda dapat menggunakan berbagai tool pengujian:

1. Ekstensi Browser:

   • Lighthouse (Built-in di Chrome DevTools): Memberikan audit performa, SEO, dan aksesibilitas, termasuk banyak kriteria WCAG.

   • axe DevTools: Ekstensi browser populer dari Deque Systems yang mengidentifikasi banyak masalah aksesibilitas otomatis.

   • WAVE Accessibility Tool: Ekstensi yang memvisualisasikan masalah aksesibilitas langsung di halaman web.

2. Alat Pengujian Otomatis Online:

   • TAW: Sebuah online tool gratis yang mengadopsi pedoman WCAG 2.1 sebagai acuan utama.

   • Siteimprove Accessibility Checker: Menawarkan laporan aksesibilitas komprehensif.

   • Pa11y: Alat command-line untuk mengotomatiskan pengujian aksesibilitas.

3. Assistive Technology:

   • Screen Reader: Alat paling penting untuk menguji pengalaman pengguna tunanetra. Contoh: NVDA (gratis, Windows), JAWS (berbayar, Windows), VoiceOver (bawaan macOS/iOS).

   • Keyboard Navigation: Coba navigasi seluruh situs Anda hanya dengan menggunakan tombol Tab, Enter, dan arrow keys. Pastikan semua elemen interaktif dapat diakses dan fokus keyboard terlihat jelas.

4. Pengujian Manual: Meskipun alat otomatis sangat membantu, banyak masalah aksesibilitas (terutama yang berkaitan dengan konteks, urutan membaca, atau makna) hanya dapat ditemukan melalui pengujian manual oleh manusia, idealnya oleh penyandang disabilitas.

Membangun website yang aksesibel sesuai panduan WCAG 2.1 bukan sekadar daftar checklist teknis, tetapi adalah komitmen untuk menciptakan pengalaman web yang inklusif. Dengan memahami empat prinsip POUR dan menerapkan kriteria sukses di level A atau AA, Anda dapat memastikan bahwa konten dan fungsionalitas website Anda dapat diakses dan digunakan oleh sebanyak mungkin orang, tanpa memandang kemampuan mereka. Ini adalah langkah penting menuju internet yang lebih setara.