7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. General

6 Tips untuk Meningkatkan Aksesibilitas Situs Web

Scroll to top
Read Time: 10 mins

Indonesian (Bahasa Indonesia) translation by Riska Aprianti (you can also view the original English article)

Idealnya, aksesibilitas harus dipertimbangkan sebagai bagian dari setiap proyek web untuk meningkatkan ketersediaan kepada audiens seluas mungkin. Namun di dunia nyata, itu dapat dengan mudah diabaikan. Pada artikel ini kita akan melihat cara mudah untuk meningkatkan aksesibilitas situs Anda tanpa harus membuat perubahan drastis atau menghabiskan waktu.


Pengantar

"Sayangnya, kekuatan dan kemampuan beradaptasi dari Web tidak selalu dimanfaatkan sepenuhnya"

World Wide Web adalah sumber yang luar biasa dan telah membuka kemungkinan baru yang menarik. Semakin banyak orang sekarang dapat mengakses informasi dan hiburan yang sebelumnya tidak tersedia bagi mereka melalui bentuk media tradisional. World Wide Web sangat penting bagi mereka yang cacat karena sejumlah besar informasi digital yang disimpan dapat dimanipulasi untuk memenuhi persyaratan yang berbeda. Sayangnya, kekuatan dan kemampuan beradaptasi dari Web tidak selalu sepenuhnya digunakan dan mereka yang cacat dapat menemukan kesulitan untuk menavigasi situs web dan memiliki pengalaman negatif dengan Web pada umumnya.

Ada banyak alasan mengapa Anda harus berupaya meningkatkan aksesibilitas situs Anda, salah satunya adalah hukum di banyak negara. Di Inggris misalnya, aksesibilitas web berada di bawah Undang-undang Diskriminasi Disabilitas dan jika situs web Anda gagal untuk mematuhi, tindakan hukum dapat diajukan terhadap Anda. Selain masalah hukum, mengapa Anda tidak ingin membuka situs Anda untuk audiens seluas mungkin dengan membuatnya dapat diakses oleh semua orang?

Inisiatif Aksesibilitas Web (WAI) didirikan oleh W3C untuk mempromosikan aksesibilitas di Web. WAI berupaya mengedukasi orang-orang tentang bagaimana para penyandang cacat menggunakan Web dan telah membuat panduan untuk diikuti oleh perancang dan pengembang web. Anda akan menemukan bahwa banyak pedoman mudah diikuti dan diterapkan. Di bawah ini kita akan membahas beberapa metode mudah yang akan membantu Anda memenuhi panduan ini dan meningkatkan aksesibilitas situs Anda.


Tip 01: Pertimbangkan Warna Anda

Improving Web AccessibilityImproving Web AccessibilityImproving Web Accessibility

Diperkirakan sekitar sepuluh juta pria menderita semacam kebutaan warna di AS. Jenis yang paling umum adalah Protanopia dan Deuteranopia; dan mereka yang menderita ini memiliki kesulitan membedakan antara warna merah, hijau dan sejenisnya. Dengan prevalensi yang tinggi dari kondisi ini, sangat layak dipertimbangkan ketika merancang dan mengkode situs web Anda.

Sebagian besar, tidak ada langkah radikal yang perlu diambil ketika mendesain dengan buta warna - seperti halnya sebagian besar saran dalam artikel ini. Situs web yang dirancang dengan baik umumnya tidak akan menyebabkan masalah besar bagi pengguna yang buta warna. Akan tetapi, ada baiknya mengambil pertimbangan ekstra, ketika mendesain elemen interaktif atau ajakan bertindak. Sebagai contoh; tautan teks sederhana, ditata merah tanpa hiasan lain mungkin tidak mungkin untuk melihat apakah ada dalam blok teks abu-abu atau hitam. Tidak ada yang menyarankan Anda untuk tetap menggunakan style tautan default, tetapi sangat membantu untuk menggunakan lebih dari satu jenis dekorasi seperti garis bawah atau warna latar belakang.

Alat yang berguna untuk para desainer dapat ditemukan di colorfilter.wickline.org yang menyediakan beberapa filter berbeda yang meniru bagaimana berbagai jenis pengguna yang buta warna akan melihat sebuah situs web. Cukup ketik URL situs web dan pilih filter yang ingin Anda gunakan - namun butuh sedikit waktu untuk memuat, jadi Anda harus bersabar.

Anda juga perlu mempertimbangkan tingkat kontras antara elemen latar depan dan latar belakang situs web Anda. Tingkat kontras yang tinggi akan menguntungkan semua orang, bukan hanya mereka yang tunanetra. Pedoman Aksesibilitas Web menyarankan rasio kontras minimum 4,5: 1 dan rasio ideal 7: 1 untuk teks isi berukuran standar. Jelas pilihan paling aman adalah teks hitam dengan latar belakang putih atau sebaliknya.

Anda dapat memeriksa rasio kontras beberapa elemen di situs menggunakan ekstensi Firefox Contrast Analyzer Warna dari Juicy Studio. Ini akan menganalisis setiap elemen pada halaman dan memberikan laporan apakah itu sesuai dengan pedoman WAI.


Tip 02: Tautan Kontekstual

Mereka yang menggunakan pembaca layar akan sering memiliki opsi untuk menavigasi halaman web dengan melewatkan tautan untuk menemukan sesuatu yang menarik. Dalam kasus tautan teks, pengguna hanya akan mendengar kata secara terpisah, terlepas dari konten yang mengelilinginya. Karenanya sangat tidak membantu ketika semua yang didengar pengguna adalah 'klik di sini' atau 'lebih' - jenis tautan ini tidak memberikan informasi tentang di mana mereka mengarahkan pengguna atau ke apa yang mereka maksud.

Opsi yang jauh lebih baik adalah menyediakan tautan yang lebih deskriptif. Tautan yang membawa pengguna ke artikel lengkap di blog dapat membaca ‘pelajari lebih lanjut tentang S.E.O’ atau ‘klik di sini untuk artikel selengkapnya tentang S.E.O’.


Tip 03: Konten Alternatif

Improving Web AccessibilityImproving Web AccessibilityImproving Web Accessibility

Salah satu prinsip inti dari Inisiatif Aksesibilitas Web adalah membuat konten di web tersedia untuk semua orang terlepas dari cacat apa pun yang mungkin mereka miliki. Ada sejumlah teknik, seperti yang dibahas dalam artikel ini, yang akan membantu menuju tujuan WAI. Akan selalu ada beberapa jenis konten, yang tidak dapat diakses oleh beberapa pengguna, seperti audio bagi mereka yang tuli. Dalam skenario ini, Anda harus selalu menyediakan konten alternatif jika memungkinkan.

Pedoman Aksesibilitas Konten Web 1.1:

Berikan alternatif teks untuk konten non-teks apa pun sehingga dapat diubah menjadi bentuk lain yang diperlukan orang seperti cetak besar, huruf Braille, simbol, atau bahasa yang lebih sederhana.

Misalnya, jika Anda memiliki video wawancara di situs Anda, Anda dapat mempertimbangkan untuk menyertakan transkrip percakapan bagi pengguna untuk mengunduh atau membaca di situs. Metode lain adalah menambahkan teks ke video - metode yang sedang diujicobakan oleh YouTube dengan menggunakan perangkat lunak pengenalan suara.

Pendekatan yang bahkan lebih lengkap adalah dengan memberikan tautan ke versi situs web khusus teks saja. Metode ini juga akan membuat situs Anda lebih mudah diakses oleh mereka yang koneksi internetnya lambat seperti yang masih menggunakan koneksi dial-up atau menjelajah untuk perangkat seluler.


Kiat 04: Indeks Tab

Indeks Tab pada dasarnya menetapkan urutan elemen yang akan dilalui pengguna saat menggunakan kunci ‘Tab’. Dalam sebagian besar kasus, jika desain halaman mengikuti urutan logis dan membangun hierarki yang kuat menggunakan heading, sub-heading, dll. Maka Anda tidak perlu terlalu khawatir tentang hal ini. Ini adalah dengan menggunakan bentuk namun fungsi ini benar-benar berharga.

Formulir dapat memasukkan banyak elemen kecil seperti kotak centang dan tombol radio yang dapat memerlukan gerakan dan klik mouse yang tepat. Seseorang dengan disabilitas motorik mungkin tidak memiliki kontrol yang diperlukan untuk melakukan tindakan yang tepat. Dengan Tab Indeks yang benar ditetapkan pengguna akan dapat menelusuri dan berinteraksi dengan setiap elemen bentuk menggunakan penekanan sederhana pada keyboard. Tab Indeks juga akan menguntungkan mereka yang tidak memiliki akses ke mouse dan hanya mengandalkan pengguna keyboard untuk menavigasi situs web.


Tip 05: Penggunaan Atribut Alt yang Tepat

Improving Web AccessibilityImproving Web AccessibilityImproving Web Accessibility

Kita semua tahu tentang teks alternatif. Teks itulah yang perlu kita tambahkan ke gambar agar situs kita dapat divalidasi. Semua orang menggunakannya kan? Sebenarnya ada banyak situs web yang tidak dan yang sering salah menggunakannya. Bahkan, ada banyak perdebatan tentang penggunaan atribut alt yang benar.

Atribut alt melayani tiga tujuan utama:

  • Teknologi bantu seperti pembaca layar menggunakan teks alternatif dan membacanya dengan keras kepada pengguna.
  • Alt teks ditampilkan sebagai ganti gambar ketika gambar telah dinonaktifkan oleh mereka yang memiliki koneksi internet lambat atau mereka yang menggunakan browser hanya teks.
  • Mesin pencari juga menggunakan teks alternatif untuk menyimpan informasi tentang halaman karena mereka tidak dapat membaca konten gambar.

"Yang benar adalah teks alternatif untuk gambar tergantung pada konteks penempatannya"

Jadi pada dasarnya alt teks adalah teks yang setara dengan gambar atau sumber media lain dan digunakan ketika gambar tidak dapat diakses karena berbagai alasan. Jadi informasi apa yang sebenarnya kita gunakan untuk atribut alt? Beberapa orang menempatkan deskripsi rinci gambar sementara yang lain memuatnya dengan kata kunci dalam upaya membantu peringkat pencarian mereka. Yang benar adalah bahwa teks alternatif untuk gambar tergantung pada konteks penempatannya.

Misalnya, adalah umum untuk gambar yang relevan untuk menyertai posting blog, seperti mesin tik untuk artikel tentang penulisan lepas. Artikel itu sendiri tidak membuat referensi ke gambar sehingga karena itu sangat berlebihan. Beberapa orang mungkin memberikan atribut alt nilai 'mesin tik' atau 'gambar mesin tik' atau mungkin mereka akan memberikan nilai judul artikel. Namun semua metode ini salah. Mari kita lihat alasannya.

Pertama-tama kita perlu membayangkan bahwa kita tidak dapat melihat gambar. Jadi jika nilai dari atribut alt adalah 'mesin tik' kita akan melihat judul posting blog, kata 'mesin tik' sendiri maka teks utama artikel - ini tidak masuk akal bila dilihat sebagai teks dan itu akan menjadi bahkan lebih membingungkan jika Anda menggunakan pembaca layar dan mendengar 'mesin tik' secara acak.

Sebagai aturan umum, yang terbaik adalah Anda tidak menggunakan frasa seperti image gambar ’atau of gambar’ saat memberikan nilai atribut alt. Atribut alt hanya akan bermanfaat bagi mereka yang tidak dapat melihat gambar karena berbagai alasan sehingga memberi tahu para pengguna ini bahwa ada gambar di sana tidak menawarkan nilai nyata selain membersihkan beberapa kebingungan yang disebabkan oleh metode di atas.

Terakhir, memberikan atribut alt nilai judul posting blog hanya akan menghasilkan judul yang ditampilkan dua kali sebagai teks atau diulang dua kali saat menggunakan pembaca layar. Alt text tidak boleh mengulangi informasi yang sudah disediakan sebagai teks, itu hanya tidak perlu dan berpotensi membingungkan.

Opsi terbaik dalam skenario ini adalah hanya untuk memberikan nilai atribut alt kosong. Nilai kosong memastikan tidak ada informasi yang berpotensi membingungkan atau tidak relevan dikomunikasikan dan tidak ada kerusakan pada pemahaman artikel karena gambar tidak penting untuk ini. Beberapa orang mungkin berpendapat bahwa karena gambar itu murni estetika, maka itu bukan konten dan karena itu tidak termasuk dalam HTML dan harus ditampilkan menggunakan CSS, ada pandangan yang berbeda tentang ini.

Seperti yang Anda lihat, memberikan nilai atribut alt yang benar bisa rumit dan sangat tergantung pada situasinya. Saran terbaik adalah menilai setiap skenario secara individual, memutuskan apakah gambar diperlukan untuk memahami dan menggunakan penilaian terbaik Anda.


Tip 06: Tombol Akses

Improving Web AccessibilityImproving Web AccessibilityImproving Web Accessibility

Seperti Indeks Tab, Tombol Akses adalah fitur berharga bagi pengguna yang bergantung pada keyboard untuk menavigasi situs web. Sayangnya, Tombol Akses adalah salah satu elemen HTML yang paling jarang digunakan, terutama karena banyak orang tidak menyadarinya dan mereka yang memilih untuk tidak mengimplementasikannya meskipun sangat sederhana.

Tombol akses pada dasarnya adalah cara pintas keyboard yang membantu pengguna keyboard menavigasi ke bagian-bagian tertentu dari sebuah situs web dengan cepat. Tombol akses dapat digunakan dengan menekan tombol fungsi (biasanya Alt pada Windows) atau Ctrl pada Mac dan menekan huruf tertentu atau tombol angka yang sesuai dengan bagian dari situs.

Seperti yang saya sebutkan sebelumnya, Tombol Akses sangat mudah diimplementasikan. Yang diperlukan hanyalah sepotong kode HTML yang ditambahkan ke tag jangkar navigasi situs Anda -

Sederhana.

Masalah dengan Tombol Akses adalah bahwa tidak ada set tombol universal yang ditetapkan yang dapat diharapkan pengguna untuk digunakan dan dikombinasikan dengan tidak ada standar nyata untuk menginformasikan pengguna tentang orang-orang yang telah benar-benar digunakan mengakibatkan Tombol Akses menjadi sangat tidak efektif.

Namun pemerintah Inggris memiliki satu set Tombol Akses yang direkomendasikan untuk ditugaskan, yaitu:

  • S - Skip navigation
  • 1 - Home Page
  • 2 - News/Updates
  • 3 - Site Map
  • 4 - Search
  • 5 - Frequently Askes Questions (F.A.Q)
  • 6 - Help
  • 7 - Complaints Procedure
  • 8 - Term and Conditions
  • 9 - Feedback Form
  • 10 - Access Key Information

Pikiran terakhir

Seperti yang Anda lihat, banyak metode di atas sangat mudah diimplementasikan dan hanya membutuhkan pengetahuan dasar tentang HTML. Membuat situs web Anda lebih mudah diakses tidak perlu menghabiskan waktu, memerlukan modifikasi besar-besaran atau merusak daya tarik situs web.

Saya percaya penting bagi desainer dan pengembang untuk memiliki pengetahuan tentang aksesibilitas dan mempertimbangkannya dalam berbagai tahap membangun situs web. Semakin awal dalam proses desain yang perhatian dan pemikiran dibayar untuk aksesibilitas, semakin mudah untuk menggabungkan metode ini dan mencapai hasil yang lebih baik.

Penting juga untuk diingat bahwa sebagian besar metode yang dijelaskan di atas tidak hanya akan membantu mereka yang cacat, tetapi juga akan menguntungkan semua pengguna situs web Anda. Beberapa tips bahkan dapat meningkatkan peringkat Anda dengan mesin pencari.

Kita telah membahas beberapa tips yang akan membuat situs web Anda lebih mudah diakses, tetapi jika Anda benar-benar berkomitmen, Anda mungkin ingin memeriksa bagaimana Anda dapat menyesuaikan diri dengan daftar lengkap Panduan Aksesibilitas Konten Web.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.