WCAG 2.1: Kenapa Website yang Sulit Dibaca Itu Masalah Serius
WCAG 2.1: Kenapa Website yang Sulit Dibaca Itu Masalah Serius (dan Cara Memperbaikinya)
Nama: Didi Irwansa (240401048)
Program Studi: Teknik Informatika
Universitas: Universitas Muhammadiyah Riau
Lead – Hook
konsep utama artikel, yaitu aksesibilitas web dan desain inklusif. Ilustrasi ini menunjukkan bahwa website yang baik bukan hanya menarik secara visual, tetapi juga mudah digunakan oleh semua orang, termasuk pengguna dengan keterbatasan fisik maupun sensorik.
Pernah mencoba membuka sebuah website lewat HP, tapi teksnya terlalu kecil, tombolnya sulit ditekan, dan warnanya bikin mata cepat lelah? Sekarang bayangkan jika kondisi itu Anda alami setiap hari karena keterbatasan penglihatan atau motorik. Untuk itulah WCAG 2.1 hadir—bukan sekadar standar teknis, tapi solusi nyata agar website bisa digunakan semua orang.
1. Apa Itu WCAG 2.1 dan Mengapa Kita Perlu Peduli ?
WCAG (Web Content Accessibility Guidelines) adalah panduan internasional dari W3C yang digunakan untuk memastikan website dapat diakses oleh pengguna dengan berbagai kondisi, termasuk penyandang disabilitas. Versi WCAG 2.1 memperluas cakupan aksesibilitas, khususnya untuk pengguna mobile dan teknologi bantu.
Contoh sederhananya:
Jika sebuah website kampus hanya bisa digunakan dengan mouse, bagaimana mahasiswa yang hanya mengandalkan keyboard atau screen reader bisa mengaksesnya?
2. Prinsip POUR
Infografis di atas ini menjelaskan empat prinsip utama WCAG 2.1 yang dikenal dengan singkatan POUR, yaitu Perceivable, Operable, Understandable, dan Robust. Setiap prinsip ditampilkan secara ringkas agar pembaca dapat memahami fondasi aksesibilitas web tanpa harus membaca penjelasan teknis yang panjang.
· Perceivable
Gambar di website harus punya alt text. Tanpa ini, screen reader tidak bisa “membacakan” isi gambar.
· Operable
Website harus bisa dinavigasi dengan keyboard. Coba login ke sebuah portal tanpa mouse—jika gagal, berarti belum aksesibel.
· Understandable
Tombol “Submit” lebih jelas daripada “Klik di sini”. Bahasa yang jelas membantu semua pengguna.
· Robust
Website harus tetap berfungsi di berbagai browser dan teknologi bantu, bukan hanya di satu perangkat tertentu.
3. Masalah Aksesibilitas yang Sering Kita Abaikan
perbandingan antara kontras warna teks yang buruk dan kontras warna yang baik. Kontras warna yang rendah membuat teks sulit dibaca, terutama bagi pengguna dengan gangguan penglihatan. Sebaliknya, kontras yang baik meningkatkan keterbacaan dan kenyamanan semua pengguna.
Banyak website terlihat “bagus”, tapi gagal secara aksesibilitas. Beberapa contoh yang sering ditemui:
· Warna teks dan background terlalu mirip (misalnya abu-abu muda di putih)
· Form pendaftaran tanpa label yang jelas
· Menu dropdown yang tidak bisa diakses lewat keyboard
· Gambar penting tanpa deskripsi teks
Masalah ini sering tidak disadari oleh pengguna umum, tapi sangat menyulitkan pengguna dengan kebutuhan khusus.
4. WCAG 2.1 dalam Konteks Mahasiswa dan Dunia Kampus
Mahasiswa sangat bergantung pada website untuk KRS, e-learning, dan pengumuman akademik. Jika sistem tersebut tidak aksesibel, maka akan ada kelompok mahasiswa yang dirugikan.
Dalam mata kuliah Interaksi Manusia dan Komputer di Universitas Muhammadiyah Riau, WCAG 2.1 menjadi contoh nyata bagaimana desain yang baik tidak hanya fokus pada tampilan, tetapi juga pada keadilan akses informasi bagi seluruh civitas akademika.
5. Demo Audit Aksesibilitas
contoh hasil audit aksesibilitas website menggunakan Google Lighthouse. Skor dan indikator yang ditampilkan membantu pengembang atau mahasiswa mengetahui aspek aksesibilitas yang sudah baik maupun yang perlu diperbaiki sesuai standar WCAG 2.1.
· Google Lighthouse – Memberikan skor aksesibilitas dan rekomendasi
· WAVE – Menampilkan error aksesibilitas langsung di halaman
· axe DevTools – Cocok untuk audit lebih mendalam
Cukup buka website → jalankan audit → lihat masalahnya → perbaiki satu per satu. Ini langkah kecil tapi berdampak besar.
Kesimpulan
WCAG 2.1 mengajarkan kita bahwa desain website bukan hanya soal estetika, tetapi juga empati. Mulailah dengan langkah sederhana: cek website Anda dengan Lighthouse, perbaiki kontras warna, tambahkan alt text, dan pastikan navigasi bisa dilakukan dengan keyboard. Website yang aksesibel bukan hanya lebih inklusif, tetapi juga lebih nyaman bagi semua pengguna.
Artikel ini ditulis sebagai bagian dari pembelajaran mata kuliah Interaksi Manusia dan Komputer di Program Studi Teknik Informatika, Universitas Muhammadiyah Riau.
Informasi lengkap mengenai Universitas Muhammadiyah Riau dapat diakses melalui https://www.umri.ac.id
Referensi
1. W3C – Web Content Accessibility Guidelines (WCAG) 2.1
2. Nielsen Norman Group – Accessibility Insights
3. WebAIM – Introduction to Web Accessibility
4. MDN Web Docs – Accessibility