Pernahkah Anda melihat, atau bahkan tanpa sadar menulis, kode HTML seperti berikut?

Sekilas kode tersebut tampak baik-baik saja. Menu dapat diklik menggunakan mouse, tampilannya rapi, dan tidak ada pesan kesalahan di browser.

Namun, pernahkah Anda bertanya:

Bagaimana jika pengguna tidak dapat menggunakan mouse?

Atau,

Bagaimana jika pengguna mengandalkan screen reader untuk menjelajahi website?

Bagi pengguna yang menggunakan keyboard atau teknologi bantu, kode di atas dapat menjadi hambatan. Elemen <div> pada dasarnya bukanlah elemen interaktif. Tanpa pengelolaan aksesibilitas yang tepat, menu tersebut mungkin tidak dapat dijangkau menggunakan keyboard, tidak dikenali sebagai navigasi oleh screen reader, bahkan tidak memberikan informasi bahwa elemen tersebut dapat diklik.

Inilah salah satu alasan mengapa aksesibilitas digital (Digital Accessibility atau A11y) menjadi bagian penting dalam pengembangan web modern.

Pada artikel pembuka seri ini, kita akan mengenal apa itu WCAG, mengapa aksesibilitas penting, dan bagaimana perubahan kecil pada cara kita menulis HTML dapat memberikan manfaat bagi lebih banyak pengguna.

Apa Itu WCAG?

WCAG adalah singkatan dari Web Content Accessibility Guidelines, yaitu standar internasional yang berisi panduan untuk membuat konten web agar dapat digunakan oleh sebanyak mungkin orang, termasuk penyandang disabilitas.

Tujuan WCAG bukan hanya membantu penyandang disabilitas, tetapi juga memastikan website tetap mudah digunakan dalam berbagai kondisi dan oleh berbagai kelompok pengguna.

WCAG menjadi acuan yang digunakan oleh banyak organisasi, perusahaan, perguruan tinggi, hingga instansi pemerintah di berbagai negara dalam membangun layanan digital yang inklusif.

Siapa yang Mendapat Manfaat?

Ketika mendengar kata aksesibilitas, banyak orang langsung membayangkan penyandang tunanetra. Padahal, cakupannya jauh lebih luas.

Website yang aksesibel membantu:

1. Penyandang tunanetra yang menggunakan screen reader.
2. Penyandang disabilitas motorik yang mengandalkan keyboard atau perangkat bantu.
3. Pengguna dengan gangguan pendengaran yang membutuhkan subtitle atau transkrip.
4. Pengguna dengan gangguan penglihatan yang memerlukan kontras warna lebih tinggi atau ukuran teks yang lebih besar.
5. Lansia yang mengalami penurunan kemampuan penglihatan maupun motorik.
6. Bahkan pengguna tanpa disabilitas, misalnya saat menggunakan ponsel di bawah sinar matahari, berada di lingkungan yang bising, atau mengalami cedera sementara sehingga tidak dapat menggunakan mouse.

Dengan kata lain, aksesibilitas bukan hanya tentang kelompok tertentu, tetapi tentang menciptakan pengalaman yang lebih baik bagi semua pengguna.

Curb Cut Effect: Ketika Solusi untuk Sebagian Orang Bermanfaat bagi Semua

Di dunia nyata terdapat konsep yang dikenal sebagai Curb Cut Effect.

Awalnya, trotoar dibuat landai (curb cut atau ramp kecil) agar pengguna kursi roda dapat menyeberang jalan dengan lebih mudah.

Namun, manfaatnya ternyata dirasakan oleh jauh lebih banyak orang, seperti:

1. orang tua yang mendorong kereta bayi;
2. wisatawan yang membawa koper beroda;
3. petugas pengantar barang;
4. anak-anak yang membawa sepeda atau skuter.

Hal yang sama terjadi pada aksesibilitas web.

Ketika Anda membuat website yang lebih mudah digunakan oleh penyandang disabilitas, pengalaman pengguna secara keseluruhan juga ikut meningkat.

Sebagai contoh:

1. Subtitle pada video membantu pengguna dengan gangguan pendengaran, sekaligus membantu orang yang menonton video di tempat umum tanpa earphone.
2. Kontras warna yang baik membantu pengguna dengan gangguan penglihatan sekaligus memudahkan siapa pun membaca layar di bawah sinar matahari.
3. Navigasi menggunakan keyboard tidak hanya membantu penyandang disabilitas motorik, tetapi juga pengguna yang lebih nyaman bekerja tanpa mouse.

Inilah mengapa aksesibilitas sering dianggap sebagai investasi pada kualitas pengalaman pengguna secara keseluruhan.

Empat Prinsip Dasar WCAG (POUR)

Seluruh panduan WCAG dibangun di atas empat prinsip utama yang dikenal dengan singkatan POUR.

1. Perceivable (Dapat Dipersepsi)

Informasi harus dapat diterima oleh pengguna melalui berbagai cara.

Contohnya:

1. gambar penting memiliki ALT Text;
2. video memiliki subtitle;
3. audio memiliki transkrip;
4. warna bukan satu-satunya cara menyampaikan informasi.

2. Operable (Dapat Dioperasikan)

Seluruh fungsi website harus dapat digunakan oleh semua pengguna.

Sebagai contoh:

1. seluruh menu dapat diakses menggunakan keyboard;
2. tombol memiliki indikator fokus yang jelas;
3. pengguna tidak dipaksa menggunakan mouse untuk mengoperasikan website.

3. Understandable (Dapat Dipahami)

Informasi dan antarmuka harus mudah dipahami.

Misalnya:

1. navigasi konsisten pada setiap halaman;
2. bahasa mudah dimengerti;
3. pesan kesalahan pada formulir menjelaskan apa yang perlu diperbaiki.

4. Robust (Tangguh)

Website harus dibangun menggunakan kode yang mengikuti standar sehingga tetap kompatibel dengan browser, screen reader, dan teknologi bantu, baik saat ini maupun di masa mendatang.

Penggunaan HTML semantik merupakan salah satu contoh penerapan prinsip ini.

Tantangan 1 Menit: Uji Website Anda

Mari kita lakukan pengujian sederhana.

Buka website yang sedang Anda kembangkan, kemudian lakukan langkah berikut.

1. Lepaskan tangan dari mouse atau touchpad.
2. Gunakan tombol Tab untuk berpindah antar menu, tombol, dan kolom formulir.
3. Gunakan Shift + Tab untuk berpindah ke arah sebaliknya.
4. Gunakan Enter atau Space untuk mengaktifkan tombol atau tautan.

Selanjutnya, perhatikan beberapa pertanyaan berikut.

1. Apakah seluruh menu dapat dijangkau menggunakan keyboard?
2. Apakah posisi fokus selalu terlihat?
3. Apakah semua tombol dapat diaktifkan tanpa mouse?
4. Apakah ada elemen yang terlewati atau tidak dapat diakses?

Jika masih ada bagian yang tidak dapat digunakan hanya dengan keyboard, kemungkinan website Anda masih memiliki hambatan aksesibilitas.

Kabar baiknya, sebagian besar hambatan tersebut dapat diperbaiki melalui penggunaan HTML semantik, struktur dokumen yang benar, pengelolaan fokus keyboard, serta penerapan prinsip-prinsip WCAG lainnya.