Di era digital ini, internet menjadi sumber informasi yang sangat vital tak bagi masyarakat tak terkecuali tuna netra. Berbagai informasi bisa diakses kawan-kawan Tunanetra baik melalui komputer maupun perangkat seluler lainnya. Berselancar di dunia maya, baik mengakses berbagai website, melakukan pencarian melalui Google, mengakses dan update social media seperti twitter, Facebook, dan Instagram, dan ‘menonton’ Youtube merupakan hal biasa dilakukan sehari-hari untuk mendapatkan informasi terbaru. Rasanya, sebagian besar talent Suarise berselancar di dunia maya setiap hari! Tentunya, kawan-kawan tuna netra bisa mengakses informasi dari kanal-kanal yang sedikit banyak sudah menerapkan kaidah website inklusif, terlepas dari tinggi rendahnya tingkat aksesibilitas website yang bersangkutan.
Tentunya, segala informasi yang tersaji di website diterjemahkan oleh speech synthesizer/screen reader bawaan yang terdapat pada gawai mereka, ‘Voice Over’ untuk Apple, ataupun JAWS dan NVDA untuk Windows. Meskipun demikian, tantangan terbesar bagi kawan-kawan tunanetra untuk mengakses informasi adalah jika websitenya tidak terlalu aksesibel. Jika aksesibilitas website dioptimalkan, tunanetra tidak harus terlalu bergantung pada buku braille yang tak hanya lama untuk diproduksi, namun juga mahal secara produksi, dan terbatas dalam distribusi. Akurasi dan kecepatan informasi ini sangat penting untuk akselerasi khasanah pengetahuan kawan-kawan tunanetra terutama untuk mendalami berbagai topik sesuai minat mereka.
5 prinsip website inklusif untuk mengoptimalkan aksesibilitas
Meski pedoman komperhensif untuk membuat website yang tingkat aksesibilitasnya tinggi terutama untuk tunanetra tersedia di WCAG, ada 5 prinsip sederhana website inklusif yang selalu bisa mulai diterapkan, terutama oleh rekan-rekan pengembang perangat lunak, terutama desainer dan developer, agar informasi di website dapat diakses dengan mudah oleh kawan-kawan tunanetra.
1. Hirarki Informasi
Hirarki informasi ini tidak melulu soal tulisan dari artikel, melainkan juga mencakup atribusi dan peletakan tombol action. Hirarki ini mempermudah speech sythesizer/screen reader untuk membaca informasi di website secara terorganisir, membantu kawan-kawan tunanetra dalam mengkategorikan konten yang sedang mereka dengarkan, dan menjadi navigasi selama dalam website maupun halaman yang sedang diakses. Coba dengarkan rekaman di bawah ini deh untuk hasil tulisan yang hirarki informasinya mempermudah tunanetra dalam membaca.
1.1 Tetapkan struktur Heading
Umumnya sebuah website bisa memiliki hingga 6 jenis heading. Penting untuk mengorganisir mana heading yang berdiri sendiri, mana yang repetitive. Heading 1 (H1) contohnya, hanya untuk hal yang paling penting, yaitu judul. Sangat tidak disarankan menggunakan heading 1 lebih dari satu kali. Heading 2 dan seterusnya bisa di ulang secara sistematis tergantung informasi yang dijabarkan.
Sebagai tambahan, level dari heading tidak sama dengan ukuran teks–meski pada beberapa kondisi, seperti website dari penyedia layanan website seperti wix, wordpress maupun lainnya, setiap level heading sudah memiliki pendekatan visual masing-masing termasuk ukuran huruf. Tapi jika development dari scratch, level tidak ada hubungannya dengan besarnya huruf.
Hal yang penting adalah hindari memiliki struktur heading yang lompat (misal dari H2 lalu H4) karena ini berpotensi membingungkan dalam navigasi informasi website tersebut.
Terutama untuk rekan-rekan developer, cek simulasi heading untuk HTML 5 di link berikut: http://accessiblehtmlheadings.com/
1.2 Jangan mengandalkan styling visual
Speech sythesizer/screen reader tidak membaca styling sehingga kawan-kawan tunanetra, terutama yang total, tidak mengidentifikasi jika tulisan tersebut terlihat sebagai sub judul, bold, ukurannya lebih besar, ataupun italic. Adapun styling visual ini melengkapi fungsi aesthetic dari heading marking. Cek rekaman di bawah ini untuk mengetahui bagaimana poin ini dibaca; contoh menggunakan voice over di Apple.
1.3 Heading bisa tersembunyi
2. Selalu lengkapi ALT-Text
Alternative text adalah komponen mahapenting nomer dua setelah heading dalam menerapkan aksesibilitas website. Hal ini dikarenakan speech sythesizer/screen reader tidak bisa mendeskripsikan gambar. Berikut ini contoh gambar dengan dan tanpa alt teks.
Alt text ini tidak hanya diterapkan pada foto tapi pada elemen visual apapun. Jika ada lebih dari satu elemen visual (foto, ilustrasi, infografis, tombol, icon, symbol) ada baiknya menggunakan kata penunjuk kategori visual tersebut agar mempermudah mengidentifikasi.
3. Pemilihan Redaksi Kata (Copywriting)
Dalam membuat copywriting, terutama untuk gambar, selalu lakukan pertimbangan dengan mengacu ke tujuh pertanyaan berikut:
- Informasi penting apa yang harus disampaikan dan apa tujuan informasi tersebut ada, baik itu tulisan maupun gambar?
- Apa atau siapa fokus pada gambar tersebut?
- Sepenting apa setting atau lokasi?
- 2E: Adakah ekspresi dan emosi yang terlihat dan penting untuk disampaikan
- Apakah warna penting untuk dijelaskan?
- Apakah subjek atau objek di dalam gambar tersebut sedang melakukan aksi?
- Adakah konteks dari gambar tersebut untuk dijelaskan?
3.1 Deskriptif
Jabarkan informasi secara deskriptif. Maksud deskriptif disini bukan melulu soal visual, tapi mengarahkan dan membantu ekspektasi membaca. Sebagai contoh, di Suarise, kami menghindari menggunakan kata “beberapa”. Alih-alih menggunakan kata tersebut, kami langsung menyebut jumlah atau kuantitasnya. Jadi, hindari menulis “ada beberapa hal yang harus dihindari…”, dan tulislah “ada 6 hal yang harus dihindari…”
Begitu pula dalam membuat deskripsi elemen visual berupa caption maupun Alt-Text. Jangan terlalu simpel, jangan pula terlalu panjang. Berapa banyak idealnya? Tidak ada kaidah tetap, selama alt teks tersebut ringkas dan concise. Kami dari Suarise menyarankan setidaknya 80 karakter atau jangan lebih banyak dari limitasi karakter di twitter 😉 Jangan lupa mencantumkan kategori dari elemen visual tersebut (foto, gambar, ilustrasi, desain, logo, symbol, icon, dll)
3.2 Instruksional
Redaksi yang sifatnya instruksional menjadi penting terutama bagi elemen visual yang memiliki action call–bisa di klik, bertujuan mengarah pada halaman website tertentu, ataupun mengarahkan ke aksi selanjutnya. Biasanya visual yang memiliki action call, alt teks-nya berisi 2 kalimat: kalimat pertama sifatnya deskriptif, kalimat kedua sifatnya instruksional.
Sebagai contoh, rekaman selanjutnya ini akan membaca layout diantara kalimat ini dengan rekaman tersebut.
3.3 Batasi animasi, dan hindari parallax scrolling
3.4 Kontras Warna 4,5:1
Sekilas mungkin terdengar membingungkan, kok aksesibilitas tunanetra membahas warna. Perlu diketahui, kawan-kawan tunanetra ada yg mengalami gangguan penglihatan total ada pula yang parsial (sebagian). Kontras dibutuhkan agar para tunanetra parsial bisa langsung mendeteksi pembagian halaman website dan yang paling penting identifikasi tombol action pada website tersebut.
Kontras ini juga bisa disebut luminance, dan untuk menghitung ini, kita harus menggunakan koefisien RGB. Nilai ini harus dibandingkan antar 2 warna, yaitu warna foreground dan warna background. Bingung? Jangan sedih. Penulis juga sempat bingung. Untuk mendemonstrasikan hal ini, penulis telah berkonsultasi ke senior software engineer, Didiet Noor agar hal ini lebih mudah dipahami yang terangkum dalam percakapan berikut ini:
Salah satu tips yang bisa diterapkan dalam mendesain website yang aksesibel bagi tunanetra adalah dengan berpedoman pada mobile first alias desain dan struktur dibuat untuk pengguna telepon genggam atau gawai seluler lainnya.
BONUS untuk pebisnis yang menerapkan website inklusif:
Website yang ramah bagi tuna netra sudah pasti memiliki performa dan usability yang tinggi. Salah satu yang diungkapkan oleh Sami Keijonen adalah dengan poin-poin aksesibilitas website cukup banyak yang overlapping dengan SEO. Dengan demikian, dengan menerapkan website inklusif berarti juga mendongkrak SEO score website tersebut.
Bulan depan, Suarise membahas cara dan tools-tools apa saja yang bisa membantu untuk mengecek tingkat aksesibilitas website yang sudah dibuat. Stay tune ya!
Lebih jauh tentang aksesibilitas website, silakan telusuri tautan berikut ini:
- https://www.w3.org/WAI/fundamentals/accessibility-intro/
- https://www.i-com.net/blog/how-make-your-website-accessible-visually-impaired-users
Artikel ini adalah bagian dari upaya Suarise untuk membangun ekosistem digital di Indonesia menjadi 100persenAksesibilitas. Untuk mengetahui lebih lanjut mengenai gerakan ini,
Ikuti tagar #BisaDiAkses di instagram dan akun instagram @tantanganAksesibilitas,
