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

Asas-asas Kebolehcapaian: Merancang untuk Kerosakan Visual

by
Length:MediumLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Dengan 4.5% daripada populasi global yang mengalami buta warna, 4% menderita penglihatan rendah, dan 0.6% lagi buta, kesukaran visual dengan menggunakan web lebih luas daripada yang anda mungkin menghargai. Panduan ini akan melihat bagaimana mereka bentuk untuk orang yang mengalami masalah visual dapat meningkatkan web untuk semua orang.

Kebolehcapaian untuk Semua Orang

Web hari ini mesti dijadikan mudah untuk semua orang-tanpa mengira kebolehan atau kecacatan seseorang.

'Kebolehcapaian memastikan orang kurang upaya boleh mengakses maklumat yang sama dari sistem seperti orang lain, dan juga mendapat faedah yang sama'

Seperti yang digariskan dalam artikel sebelumnya, terdapat pelbagai gangguan, dari lima bidang yang ketara:

  • auditori
  • kognitif
  • Neurological
  • fizikal
  • ucapan
  • penglihatan

This guide will focus on designing for visual impairments, which can be quite common, ranging from mild to extreme disabilities. Malah, Cathy O'Conner (pereka, dan pengarang untuk Majalah Smashing) menganggarkan bahawa bagi setiap dua juta pelanggan dalam talian, kira-kira 200,000 akan mendapat manfaat daripada reka bentuk yang lebih mudah dilihat.

Itulah anggaran yang munasabah, terutamanya mengingati bagaimana sesiapa sahaja boleh mengalami masalah penglihatan yang rendah apabila mereka semakin tua. Kecacatan visual yang biasa termasuk:

Buta warna

Warna Blindness melibatkan kesukaran untuk melihat atau membezakan antara warna, serta kepekaan kepada kecerahan warna. Ia menjejaskan kira-kira 4.5% daripada keseluruhan populasi global.

From httpcolorvisiontestingcom

Visi Rendah

Penglihatan yang rendah boleh termasuk penglihatan separa dalam satu atau kedua-dua mata, ketajaman yang kurang (penglihatan kabur), penglihatan terowong, kehilangan medan pusat, dan penglihatan yang mendung. Ia menjejaskan 246 juta orang, atau kira-kira 4% penduduk dunia.

Low vision on googlecom

kebutaan

Kebutaan adalah kehilangan penglihatan yang besar di mata seseorang. Ia menjejaskan kira-kira 39 juta orang, atau 0.6% orang.

Orang Melihat Web Berbeza

Sifat yang berbeza dari kecacatan ini boleh membuat variasi yang luas dalam bagaimana laman web dilihat oleh orang yang mempunyai kebolehan visual yang berbeza. Seperti yang digariskan di atas, sebilangan besar orang mengalami masalah penglihatan, jadi kita mesti memastikan mereka boleh mengakses dan mentafsirkan semua ciri yang sama.

Melihat Homepage Tumblr Dengan Kecacatan Visual

Sebagai contoh, pertimbangkan laman utama Tumblr, di mana latar belakang halaman ditetapkan kepada imej yang besar (dicipta oleh pengguna mereka):

the Tumblr Homepage
Laman web Tumblr

Bergantung pada jenis dan tahap gangguan visual seseorang mungkin mempunyai, laman web itu dapat dilihat dalam beberapa cara (di sini disimulasikan dengan sambungan Chrome NoCoffee):

Peripheral blocked vision eg glaucoma
1. Penglihatan yang disekat periferi (cth. Glaukoma)
Large spots of blocked vision diabetic retinopathy
2. Tompok besar penglihatan yang disekat (retinopati diabetik)
Loss of acuity blurred vision
3. Kehilangan ketajaman (penglihatan kabur)
Ghosting issues
4. Masalah ghost
Tritanopia color blindness
5. Tritanopia buta warna

Contoh-contoh di atas menunjukkan pelbagai jenis masalah penglihatan yang rendah, dan juga beberapa contoh buta warna. Untuk meringkaskan:

  • Visi terowong (lihat gambar 1) adalah sejenis visi periferal yang disekat, yang mengurangkan jumlah elemen yang kelihatan di skrin. Pengguna hanya boleh melihat elemen pusat.
  • Kehilangan ketajaman, atau penglihatan kabur (lihat gambar 3), membuat teks sukar dibaca, kerana ia menjadi kabur kepada pengguna.
  • Kebutaan warna (lihat gambar 5) mengurangkan bilangan warna yang dapat dilihat oleh pengguna, jadi terdapat lebih banyak kemungkinan unsur-unsur kelihatan sama.

Variasi Persepsi Mempengaruhi Kegunaan

Oleh kerana variasi dalam persepsi ini, elemen utama laman web tertentu boleh menjadi kurang diakses (dan oleh itu tidak dapat digunakan) bergantung pada sejauh mana gangguan visual pengguna.

Ciri-ciri yang tidak boleh diakses

Sebagai contoh, kehilangan ketajaman (penglihatan kabur) boleh membuat bar carian di laman web Tumblr hampir hilang ke latar belakang. Perkara yang sama boleh dikatakan untuk butang log masuk:

Bandingkan bar carian pada imej ke kiri dengan yang di sebelah kanan di sebelah kanan, bar carian telah dicampur ke latar belakang, dan hampir tidak kelihatan.

Warna kehilangan makna

Beralih dari contoh Tumblr, pertimbangkan seseorang yang mempunyai buta berwarna merah / hijau (protanopia). Pada halaman hasil carian Google, warna yang digunakan untuk mewakili halaman hasil semasa kelihatan kurang penting kepada pengguna buta warna, mungkin menjadikannya sedikit kurang bermakna:

Google Protonopia example
Contoh Google Protonopia

Sebaliknya dari merah dan kuning, kurang jelas kepada pengguna buta warna, dan kelihatan lebih seperti warna hijau kehijauan terhadap hijau gelap.

Pembentangan Kandungan

Kedua-dua contoh di atas menunjukkan bagaimana variasi persepsi boleh mempengaruhi kegunaan ciri teras. Malangnya, orang yang mengalami masalah visual dapat mengubah persembahan kandungan supaya elemen menjadi lebih mudah diakses dan dapat digunakan untuk mereka. Ini boleh dilakukan dengan:

  • 🔍 Memperbesar saiz teks
  • 🎞 Sari kata atau keterangan pada video deos
    Text Teks imej alternatif untuk menggambarkan imejimages
      Alat Pembangun Kebolehlanjutan Extension: tambah audit Kebolehcapaian, dan anak panah Sidebar Aksesibiliti dalam tab Unsur, ke Alat Pembangun Chrome anda.Tools.Kontras Tinggi: semak imbas web dengan pilihan beberapa penapis warna kontras tinggi yang direka untuk memudahkan teks membaca. text.ChromeVox: membawa kelajuan, serba boleh, dan keselamatan Chrome kepada pengguna yang cacat penglihatan. sers.
      Example of an accessibility browser plugin being used to change the contrast of a web page dan pelbagai alat yang boleh digunakan untuk mengubah cara kandungan muncul, menjadi jelas bahawa kita tidak boleh selalu menentukan bagaimana laman web akan dipaparkan atau dirasakan oleh orang.eople.walaupun pada tahap pengekodan. Itu kerana ia menjadi penting untuk mengekalkan hierarki maklumat yang jelas, kerana orang boleh menggunakan cara yang berbeza untuk membentangkan maklumat itu. Mari kita lihat beberapa amalan terbaik untuk memastikan kandungan kami sentiasa boleh diakses, tidak kira bagaimana ia dipaparkan:layed: W3C3C
      An example of a website layout model using correct semantic tagsteks alternatif yang dikaitkan dengan imej yang dibaca, dan bukannya melihat imej. Sekiranya teks itu tidak hadir, atau gagal menjadi cukup deskriptif, mereka tidak akan dapat melihat maklumat yang dimaksudkan.ended.
      Example of accurate alternative text usage on an imageAbility.net menyediakan lima peraturan keemasan untuk menggunakan tag alt (alternatif teks) dengan betul untuk menjadikan laman web lebih mudah diakses:sible: <img> mesti mempunyai alt = '' atributribute
      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 palettoncomBIGSOUND Buzz adalah laman web yang menggunakan banyak skema warna monokromatik:cheme:
      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 tidak mempunyai visi boleh meletakkan asas yang baik bagi mereka yang dapat melihatnya. Ini kerana ia meletakkan kami dalam kedudukan untuk memastikan bahawa struktur laman web bebas dari persembahannya, dan boleh ditafsirkan oleh teknologi bantuan serta orang. Oleh itu, jika perubahan persembahan berlaku untuk apa-apa sebab lain, struktur laman web masih boleh 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.