Mendesain website yang dapat diakses oleh pengguna tunanetra adalah salah satu aspek terpenting dalam desain web yang inklusif. Pengguna tunanetra, atau dengan gangguan penglihatan parah, umumnya mengandalkan teknologi bantu (assistive technology) seperti screen reader, braille display, atau screen magnifier untuk berinteraksi dengan konten digital. Oleh karena itu, website harus dibangun dengan cara yang memungkinkan tool ini dapat menginterpretasikan dan menyajikan informasi dengan benar.

Fokus utama dalam mendesain untuk pengguna tunanetra adalah memastikan bahwa semua informasi visual dan interaktif memiliki representasi non-visual yang akurat dan lengkap.

Prinsip Dasar Desain untuk Pengguna Tunanetra

1. Struktur Semantik HTML yang Kuat

Ini adalah fondasi dari setiap website yang dapat diakses. Screen reader mengandalkan struktur HTML untuk memahami tata letak dan hierarki konten.

• Gunakan Elemen Semantik HTML5:

  • Header: Gunakan <header>, <h1> hingga <h6> secara berurutan dan logis untuk judul. Screen reader sering memungkinkan pengguna untuk melompat antar heading.

  • Navigasi: Gunakan <nav> untuk blok navigasi utama.

  • Konten Utama: Gunakan <main> untuk konten utama halaman.

  • Bagian/Artikel: Gunakan <section> dan <article> untuk mengelompokkan konten yang relevan.

  • Daftar: Gunakan <ul>, <ol>, dan <dl> untuk daftar yang sebenarnya, bukan hanya teks yang diformat dengan CSS.

  • Tabel: Gunakan <table> dengan <<th>, <caption>, dan scope yang tepat untuk tabel data, bukan untuk layout.

• Hindari Penggunaan div atau span yang Berlebihan: Menggunakan div atau span untuk elemen yang seharusnya memiliki makna semantik (misalnya, tombol, tautan, heading) akan membingungkan screen reader.

2. Alt Text (Teks Alternatif) untuk Semua Gambar

Ini adalah salah satu kriteria WCAG yang paling fundamental. Alt Text menyediakan deskripsi tekstual untuk gambar yang akan dibaca oleh screen reader.

• Wajib untuk Gambar Informatif: Setiap gambar yang menyampaikan informasi visual harus memiliki atribut alt yang deskriptif dan ringkas.

  • Baik: <img src="grafik-penjualan.png" alt="Grafik batang menunjukkan peningkatan penjualan 20% di kuartal ketiga.">

  • Buruk: <img src="grafik-penjualan.png" alt="grafik">

• Gambar Dekoratif: Jika gambar murni dekoratif dan tidak menyampaikan informasi penting, gunakan alt="" (atribut alt kosong) untuk memberitahu screen reader agar mengabaikannya.

3. Kontras Warna yang Tinggi

Pengguna dengan penglihatan rendah, buta warna, atau disleksia sering kesulitan membedakan teks dari latar belakang jika kontrasnya rendah.

• Rasio Kontras Minimum: WCAG 2.1 Level AA mensyaratkan rasio kontras minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar (berukuran 24px atau 18.66px bold ke atas).

• Jangan Hanya Andalkan Warna: Jangan menggunakan warna sebagai satu-satunya cara untuk menyampaikan informasi (misalnya, "klik tombol merah untuk melanjutkan"). Gunakan juga ikon, teks, atau pola.

4. Navigasi Keyboard-Friendly

Pengguna tunanetra sangat mengandalkan keyboard (terutama tombol Tab, Shift+Tab, Enter, Spacebar, dan arrow keys) untuk menavigasi website.

• Semua Interaksi Dapat Diakses Keyboard: Pastikan semua tautan, tombol, form field, dan elemen interaktif lainnya dapat dijangkau dan diaktifkan hanya dengan keyboard.

• Urutan Tab yang Logis: Urutan navigasi keyboard (saat menekan Tab) harus mengikuti urutan visual dan logis konten di halaman.

• Indikator Fokus Visual yang Jelas: Ketika elemen difokuskan oleh keyboard, harus ada outline atau perubahan visual yang jelas. Jangan pernah menghapus outline default browser kecuali Anda menyediakan pengganti yang lebih baik.

5. Penggunaan ARIA (Accessible Rich Internet Applications)

Ketika elemen HTML semantik tidak cukup untuk menyampaikan makna atau state dari komponen UI yang kompleks, ARIA dapat digunakan. ARIA adalah spesifikasi yang mendefinisikan atribut tambahan untuk memperkaya semantik elemen HTML.

• role Atribut: Mendefinisikan peran elemen (landmark role seperti role="navigation", role="main", atau widget role seperti role="button", role="dialog").

• aria-* Atribut: Menyampaikan state (misalnya aria-expanded="true", aria-checked="false") atau properti (misalnya aria-label="Cari" untuk tombol tanpa teks visual, aria-describedby) kepada assistive technology.

• Kapan Menggunakan ARIA: Gunakan ARIA hanya ketika elemen HTML semantik tidak dapat melakukan pekerjaan tersebut. Ingat aturan pertama ARIA: "Jika elemen HTML memiliki semantik dan perilaku bawaan yang tepat, gunakanlah daripada menambahkan ARIA."

6. Teks yang Jelas dan Mudah Dibaca

• Ukuran Font yang Memadai: Gunakan ukuran font yang cukup besar agar mudah dibaca, dan pastikan pengguna dapat memperbesar teks tanpa merusak layout.

• Hirarki Visual yang Jelas: Gunakan ukuran font, bobot, dan spasi yang berbeda untuk membedakan heading, paragraf, dan elemen lainnya.

• Gunakan Bahasa yang Sederhana: Hindari jargon atau bahasa yang terlalu kompleks jika tidak diperlukan.

7. Hindari Konten yang Berkedip atau Berkedip Cepat

Konten yang berkedip atau berkedip terlalu cepat (di atas 3 Hz) dapat memicu kejang pada individu dengan fotosensitif epilepsi. Hindari ini.

8. Skip Links

Untuk website dengan banyak navigasi atau konten berulang di bagian atas, sediakan "Skip Link" yang memungkinkan pengguna keyboard untuk langsung melompat ke konten utama. Link ini biasanya tersembunyi secara visual tetapi terlihat saat difokuskan.

9. Transkrip dan Captions untuk Media

• Video: Sediakan captions (teks tertutup) untuk semua video dan transkrip lengkap.

• Audio: Sediakan transkrip lengkap untuk semua konten audio.

Proses Desain & Pengembangan

• Pendekatan Accessibility-First: Pertimbangkan aksesibilitas sejak tahap awal desain dan perencanaan, bukan sebagai add-on di akhir.

• Gunakan Tools Pengujian:

  • Otomatis: Gunakan browser extension seperti Lighthouse, axe DevTools, WAVE untuk mendeteksi masalah teknis.

  • Manual: Ini krusial. Lakukan pengujian manual menggunakan screen reader (NVDA, VoiceOver), navigasi keyboard saja, dan screen magnifier. Idealnya, libatkan pengguna tunanetra dalam pengujian.

• Validasi HTML: Pastikan HTML Anda valid dan bebas dari kesalahan.

Mendesain website untuk pengguna tunanetra adalah tentang menciptakan website yang dapat diakses oleh screen reader dan assistive technology lainnya, serta memberikan representasi non-visual yang setara dengan konten visual. Dengan berfokus pada struktur HTML semantik, Alt Text yang deskriptif, kontras yang baik, navigasi keyboard-friendly, dan penggunaan ARIA yang bijaksana, Anda dapat membangun website yang inklusif dan bermanfaat bagi semua pengguna, tanpa memandang kemampuan penglihatan mereka. Ini bukan hanya kewajiban, tapi juga peluang untuk menjangkau audiens yang lebih luas.