Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Dasar-dasar Aksesibilitas: Mendesain untuk Penderita Kekurangan Penglihatan

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Dengan 4,5% populasi dunia yang menderita buta warna, 4% di antaranya menderita penglihatan yang rendah, dan 0,6% lainnya tuna netra. Kesulitan visual dalam menggunakan web ternyata banyak dijumpai lebih dari yang Anda mungkin bayangkan. Pedoman ini akan melihat bagaimana dengan mendesain untuk orang-orang dengan kekurangan penglihatan dapat membuat web menjadi lebih baik untuk semua orang.

Aksesibilitas untuk Semua Orang

Web masa kini tentu telah dibuat dapat diakses oleh semua kalangan—tak peduli disabilitas maupun kekurangannya.

“Aksesibilitas menjamin orang-orang dengan diabilitas dapat mengakses informasi yang sama dari sistem seperti halnya orang lain, juga mendapatkan keuntungan yang sama”

Seperti yang dijabarkan pada article sebelumnya, ada banyak sekali kekurangan, dari lima area yang penting:

  • Pendengaran
  • Kognitif
  • Neurologis
  • Fisik
  • Wicara
  • Penglihatan

Pedoman ini akan berfokus pada mendesain untuk penderita kekurangan penglihatan, yang bisa jadi cukup lumrah ditemui, berkisar dari disabilitas ringan hingga berat.  Pada faktanya, Cathy O’Conner (desainer dan penulis Smashing Magazine) memperkirakan bahwa setiap dua juta pelanggan online, sekitar 200.000 akan diuntungkan dari desain yang lebih mudah dilihat. 

Ini merupakan perkiraan yang wajar, terutama mengingat bagaimana semua orang berpotensi memiliki kekurangan penglihatan seiring dengan bertambahnya usia.  Kekurangan penglihatan yang umum ditemui biasanya adalah:

Buta Warna

Buta warna melibatkan kesulitan dalam menerima atau membedakan antar warna, juga terhadap sensitivitas kecerahan warna. Hal ini mempengaruhi sekitar 4,5% populasi penduduk dunia.

From httpcolorvisiontestingcom

Penglihatan yang Berkurang

Kurangnya penglihatan dapat melibatkan penglihatan sebagian pada salah satu atau kedua mata, ketajaman penglihatan yang buruk (penglihatan yang kabur), penglihatan terowongan (hanya bisa melihat jika berada di tengah), kehilangan bagian tengah penglihatan, dan penglihatan yang gelap.  Hal ini diderita 246 juta orang, atau sekitar 4% dari populasi dunia.

Low vision on googlecom

Kebutaan

Kebutaan merupakan kehilangan penglihatan yang substansial pada kedua mata seseorang.  Hal ini diderita oleh setidaknya 39 juta orang, atau 0,6% dari penduduk dunia.

Orang-orang Melihat Web dengan Cara yang Berbeda

Beragamnya sifat dasar dari kekurangan ini dapat menciptakan variasi yang luas tentang bagaimana halaman web terlihat bagi orang-orang dengan kemampuan visual yang berbeda-beda ini. Seperti yang telah dijabarkan di atas, banyak orang yang menderita kekurangan penglihatan ini, sehingga kita harus memastikan bahwa mereka dapat mengakses dan mengartikan semua fitur web dengan cara yang sama dengan yang lainnya.

Melihat Halaman Depan Tumblr dengan Kekurangan Penglihatan

Sebagai contoh, pikirkanlah halaman depan Tumblr, di mana latar belakang halaman diatur dengan gambar yang besar (dibuat oleh penggunanya):

the Tumblr Homepage
Halaman Depan Tumblr

Halaman Depan Tumblr Tergantung pada tipe dan level dari keurangan penglihatan yang seseorang mungkin miliki, situs ini dapat dilihat dengan beberapa cara (berikut adalah simulasi dengan ekstensi NoCoffee Chrome):

Peripheral blocked vision eg glaucoma
1. Penglihatan yang menghalangi penglihatan samping (misalnya. glaukoma)
Large spots of blocked vision diabetic retinopathy
2. Penglihatan Bintik Hitam Besar (retinipati diabetes)
Loss of acuity blurred vision
3. Kehilangan ketajaman (penglihatan kabur)
Ghosting issues
4. Menghilang    
Tritanopia color blindness
5. Buta warna tritanopia

Contoh di atas menunjukkan bagaimana tipe-tipe berbeda dari kekurangan penglihatan, juga beberapa contoh kebutaan terhadap warna. Untuk menyimpulkannya: Untuk menyimpulkannya:

  • Penglihatan terowongan (lihat gambar 1) adalah tipe penglihatan samping yang terblokir, yang mengurangi jumlah elemen yang terlihat pada layar. Pengguna hanya dapat melihat elemen tengah. 
  • Kehilangan ketajaman, atau rabun (lihat gambar 3), membuat teks menjadi sulit untuk dibaca, dikarenakan huruf-hurufnya menjadi kabur untuk pengguna.
  • Buta warna (lihat gambar 5) mengurangi jumlah warna yang dapat dilihat oleh pengguna, sehingga ada lebih banyak kemungkinan bahwa elemen-elemen tertentu terlihat mirip.

Variasi Tangkapan Penglihatan Mempengaruhi Penggunaan

DIkarenakan tangkapan penglihatan yang bervariasi, elemen kunci dari website tertentu dapat menjadi tidak dapat terakses (sehingga kurang bermanfaat) bergantung pada sejauh apa kekurangan penglihatan yang diderita.

Fitur yang Tidak Dapat Diakses

Contohnya, rabun dapat membuat kolom pencarian pada website Tumblr hampir menghilang pada latar belakang. Hal yang serupa dapat terjadi juga pada tombol login: 

Bandingkan kolom pencarian pada gambar kiri dengan gambar kanan-pada bagian kanan, kolom pencarian telah menyatu dengan latar belakang, dan hampir tidak terlihat.

Warna Kehilangan Kepentingannya

Berpinda dari contoh Tumblr, bayangkan seseorang dengan kebutaan warna pada merah/hijau (protanopia).  Pada halaman pencarian Google, warna yang digunakan untuk menunjukkan hasil halaman saat ini terlihat tidak terlalu signifikan pada pengguna yang buta warna, berkemungkinan membuatnya sedikit tidak berarti:

Google Protonopia example
Contoh Protonopia Google

Kontras warna dari merah dan kuning, tidak terlihat jelas bagi pengguna buta warna, dan terlihat lebih seperti warna kehijau-hijauan berlawanan dengan warna hijau tua.

Presentasi Isi

Kedua contoh di atas menunjukkan bagaimana variasi penglihatan dapat mempengaruhi penggunaan dari fitur-fitur inti. Untungnya, orang-orang dengan kekurangan visual tersebut dapat mengubah isi presentasinya sehingga elemen-elemennya dapat lebih mudah diakses dan bermanfaat bagi mereka. Hal ini dapat dilakukan dengan: Hal ini dapat dilakukan dengan:

  • 🔍Memperbesar ukuran teks
  • 🎞 Subtitle atau keterangan pada video deos
    📝 Teks gambar alternative untuk menjelaskan gambarimages
      ExtensionAccessibility Developer Tools: Tambahkan audit Aksesibilitas, dan panel kolom samping Accessibility (aksesibilitas) pada tab Elements, pada Chrome Developer Tools Anda.Tools.Kontras Tinggi: berselancar di web dengan warna berkontras tinggi sesuai pilihan Anda yand didesain untuk memudahkan Anda membaca teks. text.ChromeVox: bawa kecepatan, fleksibilitas, dan keamanan Chrome pada pengguna yang memiliki kekurangan penglihatan.  sers.
      Example of an accessibility browser plugin being used to change the contrast of a web page bahkan pada level coding (pembuatan kode). Hal ini dikarenakan, penting untuk untuk menjaga hirarki informasi yang jelas, Sebagaimana orang-orang dapat menggunakan tujuan berbeda untuk menampilkan informasi tersebut. Mari kita lihat beberapa praktik terbaik untuk memastikan konten kita selalu dapat diakses, tidak peduli bagaimana ia ditampilkan:layed:
      An example of a website layout model using correct semantic tagsteks alternatif yang menjelaskan tentang gambar atu menyuarakan gambar, dari pada hanya sekedar melihat gambarnya. Jika teks seperti itu tidak disajikan, atau gagal untuk cukup mendeskripsikan, maka mereka tidak akan menerima informasi seperti yang diniatkan pengembang.ended.
      Example of accurate alternative text usage on an imageAbility.net menyajikan lima peraturan penting untuk menggunakan tag alt (tag alternatif) dengan tepat untuk membuat website Anda lebih dapat diakses:sible:
      form input with red outline
      inputs with icons and messagesBootstrap v4v4
      How color blind users perceive green brown and red
      Without texture with texture color blind friendly labels on Trellopaletton.com:  :
      monochromatic palette created with palettoncom
      Monochrome on BIGSOUND Buzz
      Monochrome on BIGSOUND Buzz
      BIGSOUND Buzz for color blind
      contrast sensitivity chartaccessebility.psu.edu:u:
      example of contrast ratios from from accessebilitypsuedu tuna netra akan memberikan fondasi yang hebat untuk mereka yang dapat melihat. Hal ini dikarenakan kita akan berada pada posisi yang memastikan bahwa struktur website kita berdiri sendiri dari tampilannya, dan dapat diinterpretasikan dengan teknologi bantu seperti halnya manusia lain. Maka, jika tampilan website tiba-tiba berubah untuk suatu alasan, struktur website akan tetap dapat diakses. ible.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.