Desain Inklusif: Cara Membuat Visual Anda Dapat Diakses oleh Semua Orang

Infografis adalah cara yang sangat efektif untuk menyampaikan pesan Anda dengan cepat. Namun, jika Anda tidak mengingat pengguna saat membuat infografis, pesan Anda mungkin tidak menjangkau semua orang yang seharusnya.

Membuat infografis Anda dapat diakses berarti menghilangkan batasan yang dapat mencegah sebuahpengguna, dengan atau tanpa disabilitas, untuk dapat melihatnya. Aksesibilitas yang lebih baik berarti lebih banyak orang dapat melihat dan membagikan kreasi Anda – dan mesin pencari akan lebih mudah menemukannya. Semua ini mengarah pada “kemenangan” besar bagi Anda, tetapi Inilah part: dapat dilakukan dengan mudah dan cepat.

Untuk bacaan terkait, baca panduan kami mengenai keseimbangan asimetris.

Ikuti terus dengan membuat akun secara gratis dan memilih templat dari galeri infografis.

Pembaca layar adalah program yang digunakan tunanetra dan tunanetra untuk menelusuri dan menavigasi situs web. Pembaca layar bekerja dengan menerjemahkan teks ke huruf braille atau suara. Kecuali… gambar jelas bukan teks. Di situlah teks alternatif berperan!

Gambar di sebelah kiri: Pembaca layar tidak akan mendaftarkan gambar kecuali jika gambar tersebut memiliki teks alt.
Gambar di sebelah kanan: Dengan menggunakan teks alt, Anda menyediakan konten yang dapat dipindai oleh pembaca layar.

Teks alt adalah atribut yang dapat Anda tambahkan ke gambar apa pun di situs Anda, termasuk infografis. Pembaca layar (dan bahkan mesin pencari seperti Google) dapat membaca teks alt untuk memahami apa yang ditampilkan oleh gambar. Jika Anda menggunakan kerangka kerja seperti Wordpress di situs Anda, menambahkan teks alt sangatlah mudah (ditunjukkan di bawah). Pastikan Anda menggunakan titik dalam teks alt. Ini adalah cara pembaca layar mengetahui kapan sebuah kalimat berakhir.

Langkah 1: Di dasbor Wordpress Anda, buka Perpustakaan Media.

Anda mungkin juga menemukan artikel kami mengenai desain prinsip penekanan yang berguna.

Langkah 2: Pilih gambar apa pun untuk melihat opsinya.

Langkah 3: Tambahkan teks alt Anda dan Wordpress akan secara otomatis menyimpannya.

Ketika membuat infografis dengan Piktochart, Anda dapat memilih untuk mempublikasikan dan membagikan proyek Anda alih-alih mengunduhnya sebagai gambar. Dengan melakukan ini, Piktochart akan menampilkan infografis dengan cara yang dapat dibaca oleh pembaca layar dan mesin pencari – tanpa perlu teks alternatif apa pun! Cobalah dengan mendaftar secara gratis.

Perlu diketahui bahwa teks pada Piktochart akan dapat dibaca melalui pembaca layar jika visualnya dibagikan secara elektronik melalui HTML. Menurut postingan blog tentang topik ini, Anda hanya perlu menambahkan “alt-text” dengan menggunakan WordPress, lalu menyematkannya di situs web Anda. Apa yang terjadi adalah “alt text” akan ditambahkan ke infografis secara keseluruhan, bukan hanya untuk setiap gambar dan ikon.

Sayangnya, pada tahap ini, Anda tidak dapat menambahkan tag “alt text” untuk gambar dan ikon. Selain itu, peta dan grafik data tidak akan dapat diakses melalui pembaca layar.

Jika infografis Anda memiliki banyak konten, menggunakan teks alt mungkin bukan solusi yang ideal. Selain itu, tidak semua orang dengan gangguan penglihatan atau low vision menggunakan pembaca layar. Orang dengan buta warna mungkin tidak dapat melihat cahaya merah dan hijau – itu jenis buta warna yang paling umum – sering kali mengubah warna yang sebenarnya mereka lihat. Hal ini membuat tidak mungkin untuk mendesain infografis yang dapat dilihat oleh semua orang dengan cara yang sama.

Dalam hal ini, Anda cukup mengetikkan apa yang dikatakan infografis Anda di bawah (atau di atasnya). Pembaca layar masih dapat memindainya, sehingga Anda memiliki kontrol lebih besar untuk memformat teks. Menggunakan teks alternatif atau versi teks adalah sama-sama menguntungkan bagi Anda: mereka yang memiliki disabilitas memiliki akses ke gambar Anda, dan Anda meningkatkan peluang untuk muncul dalam pencarian.

Mencari lebih banyak lagi? Lihat desain informasi.

[clickToTweet tweet=”Use alt text or summarize the content of your visual to make it easily accessible to everyone” quote=”Use alt text or summarize the content of your visual to make it easily accessible to everyone”]

Kebutaan bukan satu-satunya gangguan penglihatan. Anda juga harus mempertimbangkan buta warna dan low vision. Jangan bersikap skeptis juga – menurut Federasi Nasional Tunanetra, ada lebih dari 7,3 juta orang dengan gangguan penglihatan di Amerika Serikat sajadan WebAIM memperkirakan bahwa 93% dari tunanetra menggunakan pembaca layar.

[clickToTweet tweet=”There are 7.3M people with visual impairments in the US alone. Are your designs accessible to all?” quote=”There are 7.3M people with visual impairments in the US alone. Are your designs accessible to all?”]

Untungnya, memperhatikan tunanetra itu mudah dilakukan. Ini hanya masalah membuat segala sesuatunya mudah dibaca dan menonjol – dan pada akhirnya benar-benar membantu semua orang.

Berikut ini beberapa kiat:

Gunakan ukuran huruf yang tidak perlu menyipitkan mata untuk membacanya. Saya sarankan untuk tetap menggunakan 14px atau “medium” untuk ukuran font terkecil Anda setidaknya. Smashing Magazine, sumber otoritatif yang didedikasikan untuk desain web, melangkah lebih jauh dengan menyarankan Anda harus menggunakan 16px sebagai ukuran font untuk teks tubuh Anda. Jika Anda merasa hal ini membuat visual Anda terlalu panjang, pertimbangkan untuk menggunakan bahasa yang lebih ringkas, menghapus poin yang kurang penting, atau mempersempit fokus visual Anda.

Kami juga membahas hal ini dalam artikel kami tentang prinsip-prinsip desain.

Kita semua menyukai font yang terlihat mewah, tetapi umumnya sulit dibaca sebagai paragraf. Pilihlah jenis huruf dasar untuk teks yang berukuran besar. Font seperti Georgia, Times, Arial, Helvetica, dan Calibri adalah pilihan yang bagus, tetapi itu bukan satu-satunya pilihan Anda. Karena judul umumnya menggunakan font yang lebih besar dan lebih pendek daripada paragraf, Anda memiliki lebih banyak fleksibilitas dengan gaya font. Namun, tetap hindari penggunaan Webdings meskipun. Berikut ini semua yang perlu Anda ketahui tentang memasangkan font untuk visual Anda.

Untuk font dan visual yang menyampaikan informasi, gunakan warna yang memiliki kontras yang tinggi. Jangan biarkan hal ini membatasi kreativitas Anda – hindari situasi seperti menempatkan teks biru pada latar belakang ungu. Dalam situasi ini, warna biru dan kuning atau oranye akan lebih tepat. Jika Anda ingin tahu seberapa baik kontras warna Anda, cobalah ini:

Kiat Pro: Anda juga bisa desaturasi gambar, yang akan menggantikan warna dengan nuansa abu-abu. Jika Anda tidak dapat membedakan warna abu-abu, maka warna aslinya tidak memiliki kontras yang tinggi.

Hindari menggunakan blok besar teks putih pada latar belakang hitam (atau bahkan gelap). Seiring waktu, hal ini akan melelahkan mata pengguna dan mengganggu keterbacaan. Idealnya, Anda teks paragraf harus berupa font yang lebih gelap dengan latar belakang yang lebih terang. Jika Anda harus gunakan warna terang untuk teks tubuh Anda, pertimbangkan warna nilai menengah untuk latar belakang Anda, seperti merah atau biru yang diredam atau 60% abu-abu, tetapi ingatlah poin sebelumnya tentang kontras. Hal ini tidak terlalu menjadi masalah untuk judul – selama judulnya cukup pendek.

Tunanetra bukanlah satu-satunya pengguna yang perlu dipertimbangkan dalam hal aksesibilitas.

Untuk bacaan terkait, lihat panduan kami tentang prinsip-prinsip desain kesatuan.

Di dunia di mana internet cepat tersedia secara luas, mudah untuk melupakan bahwa banyak orang Amerika yang masih menggunakan layanan dial-up untuk terhubung ke internet, lebih dari 2 juta pada kenyataannya. Namun, ada kelompok yang lebih besar lagi yang terkadang mengalami kecepatan koneksi yang lambat: pengguna seluler.

Gambar dengan ukuran file yang besar akan membutuhkan waktu lama untuk dimuat bagi orang-orang dengan kecepatan koneksi yang lambat. Ukuran file tidak mengacu pada seberapa besar tampilan gambar; Anda dapat menganggap ukuran file seperti kepadatan. Jika dua gambar memiliki ukuran yang sama, gambar yang memiliki kepadatan yang lebih tinggi akan lebih berat. Anda dapat mengurangi ukuran file gambar Anda tanpa menurunkan kualitasnya dengan menggunakan kompresi. Hasil akhirnya adalah infografis yang terlihat fantastis dan dimuat dengan cepat.

Ada beberapa program yang bisa Anda gunakan yang memiliki fitur alat kompresi, tetapi banyak di antaranya, seperti Photoshop, adalah layanan atau perangkat lunak berbayar. Jika situs Anda berjalan pada kerangka kerja seperti Wordpress atau Joomla, ada plugin, seperti Kompresi dan Pengoptimalan Gambar Smushyang akan mengompres gambar untuk Anda tanpa menggunakan layanan berbayar. Ini akan membutuhkan sedikit usaha dari Anda.

Piktochart menyediakan fitur kompresi bawaan yang mudah digunakan – Bahkan, hanya memerlukan satu klik mouse. Anda dapat mengakses opsi kompresi ketika Anda mengunduh proyek Anda sebagai gambar.

Langkah 1:Akses opsi kompresi dengan memilih “Unduh” di bagian kanan atas editor Piktochart.

Langkah 2: Pilih di antara “Original”, “Medium”, dan “Hi Res” untuk level kompresi yang paling sesuai dengan kebutuhan Anda.

Anda mungkin juga akan menemukan artikel kami mengenai psikologi bentuk yang bermanfaat.

Piktochart menawarkan templat profesional untuk membuat presentasi, infografis, poster, brosur, laporan, dan banyak lagi. Hanya dengan membuat akun gratisAnda mendapatkan akses tak terbatas ke templat, fitur kolaboratif, bayar per unduhan, dan folder untuk mengatur visual Anda! Mulailah sekarang.

Mencari yang lainnya? Lihat hierarki visual.