Tips Membuat Visualisasi Data Dapat Diakses

Jan 12 2023

Ringkasan 10 tips untuk berbagi kesadaran aksesibilitas dalam visualisasi data.

Gambar dari www.pexels.com

Lebih dari sekali Anda telah melihat grafik di aplikasi, misalnya grafik langkah Anda di Aplikasi Kesehatan dari iPhone atau Aplikasi Google Fit di perangkat Android Anda. Setidaknya jika salah satu resolusi Tahun Baru Anda adalah menjadi bugar, Anda tahu apa yang saya bicarakan. Ada banyak cara untuk mendesain dan menampilkan visualisasi data, tetapi pernahkah Anda mempertimbangkan aksesibilitasnya?

Untuk memulai saya akan mengklarifikasi apa itu visualisasi data. Menurut The Center of User Experience dari University of Wisconsin-Madison, visualisasi data adalah cara untuk merepresentasikan data yang kompleks melalui representasi visual yang mudah dengan bagan, grafik, peta, dan infografis.

Memiliki visualisasi data yang baik di sistem kami membuat pengalaman kami lebih lancar tanpa hambatan apa pun di jalan, tetapi memikirkan penyandang disabilitas terkadang konteksnya tidak sama, mereka mengalami beberapa hambatan di platform atau sistem yang tidak menangani aksesibilitas sebagai prioritas. Membuat sesuatu dapat diakses berarti bahwa sebagai perancang atau pengembang, Anda akan berupaya mengurangi semua hambatan ini sebanyak yang Anda bisa karena salah satu kebenaran tentang aksesibilitas adalah bahwa tidak ada satu cara yang benar untuk melakukannya.

Bagaimana saya bisa mengurangi semua hambatan ini? Membuat pengguna tidak ketinggalan data apapun dan visualisasinya dipahami oleh semua orang.

Untuk memahami konteksnya, mari kita bahas tentang hambatan paling umum untuk membuat visualisasi data dapat diakses:

Arsitektur informasi tidak terstruktur dengan baik untuk orang yang bernavigasi dengan pembaca layar. Misalnya, pengguna tidak dapat mengakses tautan atau tombol dengan keyboard.
Kontras warna tidak cukup untuk orang dengan buta warna atau low vision.
Elemen multimedia tidak dapat dijangkau dengan keyboard.
Kurangnya label dalam data dan variabel.
Kurangnya Alt Text untuk memberikan ringkasan konten dan membiarkan pengguna melewatinya jika diperlukan.

1. Gunakan Format SVG.

Secara umum, ada banyak alasan untuk memilih format SVG seperti peningkatan dukungan browser asli untuk SVG, kontrol kode untuk memberi gaya dan menganimasikan gambar, dan ukuran file kode SVG yang kecil agar memiliki kinerja yang lebih baik. Dalam hal desain responsif, format SVG dapat membantu Anda menambahkan ikon yang sesuai dengan ukuran layar yang berbeda tanpa takut kehilangan kualitas.

Jika Anda memerlukan lebih banyak alasan untuk menggunakan SVG, SVG tidak dapat mem-flash dengan kecepatan tiga kali per detik atau lebih. Beberapa pengguna dapat dipicu untuk mengalami kejang karena kedipan atau kedipan tersebut. Ini adalah Alat Analisis Epilepsi Fotosensitif (PEAT) gratis dari University of Maryland yang dapat Anda unduh dan gunakan untuk mengidentifikasi risiko kejang di web. Jika Anda berencana untuk membuat animasi lebih dari lima detik, Anda harus mempertimbangkan untuk menambahkan cara untuk menjedanya karena ini dapat mengganggu orang dengan disabilitas kognitif.

2. Tambahkan Judul dan Deskripsi Teks.

Memiliki judul dan deskripsi sebelum visualisasi data adalah suatu keharusan untuk memberi tahu pengguna tentang informasi yang akan datang dan membiarkan mereka memutuskan apakah mereka ingin membacanya dengan pembaca layar atau jika mereka ingin melewatkannya karena itu bukan minat mereka. Ini membantu mereka menghemat waktu dan memiliki pengalaman yang lebih baik. Deskripsi teks harus cukup panjang untuk menyebutkan mengapa konten itu bermanfaat atau tujuannya, sertakan juga tautan untuk mengunduh file CSV.

3. Tambahkan Teks Alternatif.

Teks Alternatif membuat navigasi lebih mudah karena memungkinkan pembaca layar memaparkan ringkasan konten dari grafik, bagan, tabel, infografis, gambar, dll. Memiliki informasi kunci konten akan memungkinkan pengguna melewati atau membaca sesuai kebutuhan mereka. Saran lain untuk Teks Alt adalah mempertimbangkan panjang deskripsi untuk menutupi informasi penting dan dibutuhkan dan menghindari menulis novel.

4. Tambahkan Tabel Data.

Untuk penyandang disabilitas mungkin mudah untuk hanya melihat grafik atau bagan, tetapi untuk penyandang disabilitas bisa jadi sulit dan penambahan tabel data bisa menjadi pembeda untuk pemahaman data yang lebih baik. Tabel yang dapat diakses harus memiliki deskripsi di atas tabel, judul harus diberi label, dan konten harus jelas dan sederhana.

Jika menurut Anda menambahkan tabel data terlalu banyak, Anda dapat mencoba menambahkan tautan untuk mengunduh file CSV dan membiarkan pengguna membacanya di aplikasi pilihan mereka. Dokumentasi semacam ini akan mengurangi kesalahpahaman data. Ini bisa berlaku tidak hanya untuk grafik atau bagan tetapi juga untuk infografis.

5. Label.

Memberi label kode Anda dari awal dan langsung mengurangi biaya produksi dan menghemat waktu bagi pengguna. Memberi label secara langsung menghindari pengguna untuk masuk ke legenda untuk memahami konten grafik, bagan, infografis, dll. Untuk konteks ini, saya sarankan menggunakan label secara langsung dan menambahkan legenda, untuk menekankan konten.

6. Kontras Warna dan Pola.

Untuk mengidentifikasi item pada grafik, bagan, tabel, atau infografis, Anda tidak boleh hanya memilih warna sebagai penanda. Rekomendasinya adalah menerapkan bentuk dan tekstur dengan diferensiasi warna. Misalnya, dalam legenda grafik.

Bagi penderita buta warna, pastikan warna kontras antara warna latar belakang dan warna latar depan minimal 4,5:1 sebagai skala minimum. Level minimum ini bisa rumit karena beberapa kontras melewatinya, tetapi itu tidak berarti mereka dapat diakses, jadi harap berhati-hati tentang ini. Seperti yang saya sebutkan, ini adalah skala minimum. Inilah Penganalisis Kontras Warna (CCA) yang dapat membantu Anda memeriksa kontras.

Beberapa rekomendasi lagi terkait warna adalah hindari penggunaan warna merah dan hijau, biru dan kuning, dan kurangi penggunaan transparansi sebanyak mungkin.

7. Interaksi Dan Animasi.

Saat Anda mendesain grafik, pertimbangkan bahwa konten apa pun harus memfokuskan pemicu dengan keyboard, misalnya, menunjukkan jumlah pendengar musik rock. Rekomendasi di sini adalah untuk menghindari efek hover-over.

Saya telah menyebutkan ini sebelumnya tentang penggunaan tip format SVG, tetapi berikut adalah pengingat yang ramah untuk menghindari animasi berkedip yang dapat memicu kejang. Jika Anda melewatkannya, berikut adalah Alat Analisis Epilepsi Fotosensitif (PEAT) gratis dari University of Maryland yang dapat Anda unduh dan gunakan untuk mengidentifikasi risiko kejang di web. Juga, ingat bahwa jika Anda berencana untuk membuat animasi lebih dari lima detik, Anda harus mempertimbangkan untuk menambahkan cara untuk menjedanya karena ini dapat mengganggu orang dengan disabilitas kognitif.

8. Hindari Tren Desain.

Saat Anda melakukan tinjauan dengan pemangku kepentingan, Anda mungkin kesulitan menerima sudut pandang berbeda yang mungkin berlawanan di antara mereka. Sebagai seorang desainer, Anda harus berhati-hati dengan umpan balik yang Anda dengarkan, mempertimbangkan bias konteks mereka, dan kemudian memutuskan. Terkadang umpan balik dapat datang dengan tangkapan layar dari *masukkan di sini aplikasi preferensi mereka* tetapi hanya karena aplikasi lain mengikuti pola atau tren desain, bukan berarti aplikasi tersebut dapat diakses, percayalah. Tren desain bisa terlihat bagus tetapi menerapkannya dengan benar akan membutuhkan waktu ekstra dari pengembang yang kadang-kadang ruang lingkup proyek tidak memungkinkan mereka untuk mencapai atau akan membuat kurangnya aksesibilitas karenanya. Rekomendasi di sini adalah jika Anda mencoba menerapkan tren desain, cobalah fokus untuk membuatnya dapat diakses. Jika Anda membutuhkan banyak waktu untuk itu,

**9. Desain Untuk Fokusabilitas .**

Sebagian besar waktu kami menggunakan status hover untuk menunjukkan perubahan dalam CTA kami, tetapi ini hanya berfungsi untuk mouse. Jika kita ingin menerapkan aksesibilitas, kita harus mengimplementasikan fokus untuk memberikan akses ke semua item dengan keyboard. Focusability adalah kemampuan untuk mengakses elemen UI penting tanpa mouse dan menggunakan keyboard. Itu harus dibuat tata letak untuk memetakan prioritas konten di layar. Alat bantu navigasi yang baik memungkinkan aliran yang lancar dan mengurangi kekacauan audio atau overhead pembaca layar yang tidak perlu.

10. Jadilah Fleksibel.

Di jalan Anda akan menghadapi beberapa pemblokir yang berasal dari pemangku kepentingan yang berbeda, jangan tersinggung, terkadang mereka mempertimbangkan bisnis, atau ruang lingkup proyek dan mereka akan menempatkan fitur aksesibilitas untuk implementasi di masa mendatang. Lakukan sebanyak yang Anda bisa untuk mendorong tetapi jangan lupa untuk mengikuti keputusan tim Anda dan beri tahu mereka kekhawatiran Anda terkait aksesibilitas dan risiko yang akan dibawanya di jalan. Seperti yang saya sebutkan di awal, kebenaran tentang aksesibilitas adalah tidak ada satu cara untuk melakukannya atau mengimplementasikannya. Dibutuhkan banyak pertemuan untuk mendapatkan kesepakatan dengan pemangku kepentingan. Harapan terbaik saya untuk Anda semua dalam hal ini. Saya mendorong Anda untuk melakukan upaya ekstra untuk membuat dunia ini lebih mudah diakses.

Sayangnya, kami telah mencapai akhir dari daftar tip ini untuk membuat visualisasi data dapat diakses, semoga membantu Anda dalam perjalanan Anda dan jika Anda memiliki lebih banyak tip, bagikan tip Anda di komentar untuk menyebarkan kesadaran kepada komunitas. Semoga hari mu menyenangkan!