WCAG

Faktor yang Mempengaruhi Aksesibilitas di Game Berbasis Web, Apps dan Konsol

2560 1801 Rahma Utami

Pernahkah kalian melihat teman-teman difabel bermain game digital di hp, komputer, ataupun konsol? Pernah terpikirkan gak bagaimana game yang mereka mainkan memfasilitasi tunarungu yang tidak bisa mendengar suara, tunanetra yang tidak bisa melihat grafis, atau tunadaksa yang memiliki kesulitan memegang kontrol? Jika  teman-teman difabel bisa memainkan tugas dalam game baik tanpa ataupun dengan assistive technology, artinya game tersebut memiliki aksesibilitas yang baik. Tapi apa saja sih faktor aksesibilitas di game?

Perlu diingat bahwa pada saat berbicara tentang aksesibilitas, tak terkecuali pada game, artinya kita sedang membicarakan akomodasi untuk beragam tipe disabilitas, bukan hanya satu disabilitas saja. Namun, tidak bisa dipungkiri beberapa game lebih ramah pada kategori difabel yang satu dibandingkan yang lainnya.

Faktor yang Mempengaruhi Aksesibilitas pada Game

Ada 3 hal perlu diperhatikan saat ingin membuat game yang aksesibilitasnya baik bagi difabel: game design, struktur teknis, dan sound design. Secara garis besar, ketiga hal ini juga berlaku bagi game-game konsol seperti Xbox, Nitendo, maupun Sony Playstation.

1. Game Design

Game yang bisa dimainkan difabel belum tentu dedesain khusus dengan fitur aksesibilitas. Terkadang, game design dan game mechanic itu menjadi faktor utama yang membuat game tersebut memiliki aksesibilitas yang baik. Umumnya hal ini sering terjadi untuk tipe game casual.

Sudah banyak casual game yang menerapkan kaidah aksesibilitas sehingga ramah dimainkan oleh difabel. Namun demikian, bukan berarti hanya casual game yang bisa menjadi ramah bagi difabel. Berbagai macam implementasi pada game RPG juga bisa membuat game ini ramah difabel, seperti pada game Gears of War, dan lebih jauh lagi seperti yang kemudian diterapkan pada Last of Us Part II.

Faktor-faktor seperti (device) input, mekanisme untuk melakukan action, mekanisme memenuhi dan menyajikan quest, hingga bagaimana display informasi pada game adalah beberapa hal yang perlu dipertimbangakan sejak awal pembuatan game.

Foto joystik play station di depan sebuah laptop

Input menjadi pertimbangan mendasar saat ingin membuat game yang inklusif

2. Struktur Teknis

Karena game digital non konsol pada dasarnya juga merupakan website dan atau aplikasi selular. Maka dari itu, prinsip-prinsip POUR (Perceivable-Operable-Understanable-Robust) dan WCAG juga berlaku untuk menjamin kelangsungan aksesibilitas game diluar gameplay atau game mechanic. Beberapa diantaranya adalah:

  • Menggunakan label pada tombol, sehingga tunanetra bisa mendengar label tombol itu dengan menggunakan screen reader
  • Tidak menggunakan gambar untuk teks, sehingga bisa di zoom, diubah warnanya, dan di suarakan oleh berbagai jenis assistive technology
  • Jika terpaksa image text, maka gambar tersebut dilengkapi Alt text
  • Menggunakan script yang benar sehingga jika ada action yang mengeluarkan notifikasi, maka screen reader bisa langsung menyuarakan dan fokus keyboardnya langsung pindah jika diperlukan
  • Kontras warna yang baik untuk teks maupun komponen game yang memiliki nilai informasi sehingga mudah dibaca oleh orang dengan butawarna
  • Dan lain sebagainya.
Contoh penamaan tombol dengan atribut aria-label. Aria-label=menu pada icon 3 garis horizontal (hamburger)

Label tombol, faktor penunjang aksesibilitas yang sederhana tapi paling sering dilupakan, tak terkecuali di game.

Implementasi WCAG yang benar menjamin website dan aplikasi bisa diakses orang-orang dengan latar belakang disabilitas. Hal ini dikarenakan implementasi WCAG memastikan website dan aplikasi seluler kompatibel dengan berbagai jenis input (mouse, keyboard, haptic) dan berbagai jenis assistive technology (magnifier, colour enhancer, screen reader, dragon naturally speaking, dll).

3. Sound design vs Caption

Sound design menjadi komponen penting saat mendesain aksesibilitas game.  Immersive sound experience juga menjadi hal yang dilirik agar game menawarkan pengalaman maksimal bagi gamer tunanetra. Bagi tunanetra, suara menjadi petunjuk indikasi aksi dan narasi.

Sebaliknya, bagi tunarungu, apapun informasi yang disampaikan melalui suara harus bisa dimunculkan dalam teks/caption. Caption juga berguna bagi gamer pada umumnya jika tidak menggunakan headphone ataupun sedang dalam situasi yang tidak memungkinkan untuk menyalakan suara.

Contoh sederhana dari implementasi sound design adalah pada game Frequency Missing. Sementara itu, pada game yang lebih advance, sound design memiliki berbagai turunan yang membuat kompleksitas game RPG sehingga memungkinkan untuk dimainkan oleh tunanetra sekalipun.

 

Baca juga: Sound Design, Aksesibilitas pada Game RPG sebelum Last of Us Part II

Jika kamu adalah seorang  developer game…

Dan ingin membuat game yang kamu buat bisa di akses seluruh kalangan difabel, atau ramah difabel tertentu, kamu bisa mulai menerapkan WCAG. Selain itu, mengaktifkan fitur assistive technology seperti screen reader untuk melakukan testing juga merupakan komponen yang penting. Bisa juga dengan mematikan seluruh volume suara dan hanya bermodalkan visual, atau malah memejamkan mata dan hanya menggunakan suara pada saat memainkan game tersebut untuk simulasi.

Selain itu, kamu juga bisa berkolaborasi dengan Suarise. Suarise menyediakan jasa konsultan dan user testing dengan tester dari berbagai latar belakang disabilitas, khususnya tunanetra. Kami merupakan satu-satunya konsultan khusus di bidang aksesibilitas digital di Indonesia. Tim kami sebelumnya telah berpengalaman dalam melakukan accessibility audit di Inggris.

Yuk jadikan game semakin inklusif dan #BisaDiAkses semua orang tanpa kecuali!

Bagikan ke lini masa Anda untuk mendukung iklim inklusif di Indonesia

5 Pedoman Pembuatan Website Inklusif bagi Tunanetra untuk Pengembang Perangkat Lunak

150 150 Rahma Utami

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:

Simulasi cara menghitung kontras warna 4,5:1 untuk aksesibilitas website melalui percakapan whatsapp

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:


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, 

Bagikan ke lini masa Anda untuk mendukung iklim inklusif di Indonesia