Aksesibilitas mungkin bukan hal pertama yang Anda pikirkan saat merencanakan situs web baru, namun ini adalah salah satu hal terpenting yang harus dilakukan dengan benar. Jika dilakukan dengan benar, desain yang mudah diakses kemungkinan besar akan luput dari perhatian — namun jika dilakukan dengan salah, hal itu dapat mengganggu pengguna dan membuat situs Anda tidak dapat digunakan!
Di bawah ini saya telah mencantumkan beberapa bidang utama yang perlu dipikirkan sebelum merancang proyek Anda berikutnya.
Pemilihan Warna
Jika pemilihan warna Anda kurang kontras, konten apa pun akan sulit dibaca — terutama bagi pengguna dengan gangguan penglihatan.
Sumber daya yang luar biasa di sini adalah Pemeriksa Kontras WebAIM. Situs ini memungkinkan Anda memilih kombinasi warna latar belakang dan latar depan dan akan memberi tahu Anda apakah kontrasnya cukup.
Penting untuk mencoba berbagai kombinasi warna serta mempertimbangkan dampak pilihan tertentu terhadap pengguna buta warna.
Ukuran huruf
Saat menempatkan teks apa pun di halaman, teks itu harus ditampilkan dengan jelas. Lagi pula, untuk apa menulis sesuatu jika tidak ada yang mampu membacanya?
Ada sejumlah parameter yang dapat Anda gunakan untuk mengontrol ini: jenis font, ukuran font, spasi huruf, spasi baris, dll.
Pertama, Anda harus memastikan bahwa font yang dipilih adaptif dengan ukuran layar yang berbeda. Salah satu cara untuk melakukan ini adalah dengan mengatur font Anda untuk menggunakan ukuran relatif (misalnya menggunakan “1.5rem” sebagai parameter, bukan “20px”). Dari sana Anda dapat membuat beberapa media queries untuk mengoptimalkan unit dasar dan mengontrol skala seluruh situs.
Meskipun tampaknya sulit untuk mengetahui spasi atau ukuran mana yang harus digunakan, ada Pedoman Aksesibilitas Konten Web (WCAG) yang menetapkan standar untuk semua ini — seperti ukuran font di atas 18 piksel dan spasi baris 1,5.
Interaksi Intuitif
Saat menggulir halaman web, ada banyak cara agar desain menjadi intuitif. Jika kita melihat sepotong teks berwarna biru dan bergaris bawah, pikiran kita mengasosiasikannya dengan sebuah tautan sehingga kita akan tahu untuk mencoba dan mengekliknya. Jika kursor kita melayang di atas sebuah kotak dan berubah menjadi sebuah pointer, kita akan merasakan bahwa itu adalah konten yang dapat diklik. Penting untuk memanfaatkan respons intuitif ini saat merancang situs sehingga pengguna tidak frustrasi saat mencari tautan.
Cara lain untuk menerapkan hal ini adalah dengan menggunakan status “::focus” untuk menunjukkan bidang mana yang sedang aktif. Ini berguna bagi pengguna yang melakukan navigasi tanpa mouse. Anda juga dapat mengatur status untuk mengeluarkan kesalahan atau peringatan ketika kolom input salah diisi.
Struktur Halaman
Cara Anda menyusun konten berdampak besar pada kemudahan pemahamannya. Memastikan alur judul yang tepat (dimulai dengan h1 dan berlanjut hingga h6) memungkinkan pengguna mengetahui kapan mereka memasuki bagian baru atau apakah paragraf berikutnya adalah sub-bagian dari paragraf terakhir.
Tata letak teks juga penting. Sebagai seseorang yang dulunya menyukai konten yang dibenarkan, sebenarnya metode penyelarasan ini sebaiknya Anda pilih terakhir karena spasi kata yang tidak rata dapat menyulitkan pembacaan konten.
Sebagai standar, Anda harus menargetkan 45–85 karakter per baris saat memposting teks di situs Anda (ditentukan di WCAG — tautan ada di bagian atas). Untuk mencapai hal ini, Anda dapat menggunakan unit “ch” untuk menjaga teks per baris tetap optimal bahkan saat situs web Anda diskalakan.
Teks Alternatif
Teks Alt memberikan konteks gambar kepada pengguna dengan gangguan visibilitas. Selalu penting untuk mengisi sesuatu di bidang Teks Alt sehingga pembaca layar dan pengguna dengan gangguan visibilitas dapat menikmati situs Anda sepenuhnya. Ini dilakukan dengan menambahkan atribut alt ke kode HTML Anda:
<img src="./images/sunflower" alt="Sunflower in Bloom">
Teks yang digunakan harus ringkas dan menjelaskan gambar dengan jelas. Jika isi gambar tidak penting atau tidak dapat dijelaskan, gunakan spasi kosong (“ ”) agar pembaca yang menggunakan Teks Alt mengetahui bahwa deskripsi tidak dilupakan.
Pengaturan Bahasa
Ini mungkin tampak seperti poin kecil tetapi penting untuk menyatakan dalam HTML bahasa apa yang Anda gunakan. Hal ini memungkinkan browser (atau perangkat aksesibilitas apa pun seperti pembaca layar) mengetahui bahasa apa yang digunakan situs tersebut.
<!DOCTYPE HTML> <HTML lang="en">
Deklarasi ini harus selalu berada dalam tag HTML dan bukan tag Body agar dapat menyertakan penguraian metadata apa pun dalam bagian ‹head›.
Pengaturan pencetakan
Saya yakin Anda pernah menemukan halaman web yang meskipun layarnya mudah dinavigasi, namun saat mencoba mencetaknya, kontennya menjadi tidak terbaca. Sidebar atau header yang besar memenuhi area pencetakan dan mengaburkan konten yang sebenarnya ingin Anda lihat.
Kueri '@media print' dapat ditulis untuk menghapus elemen yang tidak diinginkan dan memastikan bahwa hanya konten yang dapat dicetak yang diurai. Misalnya, Anda dapat mengatur kueri untuk menghapus sidebar, link navigasi, atau bahkan untuk menampilkan sumber link yang direferensikan pada halaman.
Saya sangat berharap artikel ini dapat membantu Anda. Jika Anda tertarik untuk menerapkan ini lebih lanjut pada proyek Anda, saya sangat menyarankan Anda memeriksa tautan di bawah ke laman A11y Coffee yang merinci berbagai cara untuk membuat situs Anda lebih mudah diakses.
Jika Anda menyukai postingan ini dan ingin membaca lebih lanjut, pastikan untuk memeriksa profil saya untuk postingan serupa. Pertimbangkan untuk menjadi anggota Medium untuk mendapatkan akses tak terbatas ke ide dan penulis terbaik.
"Jika Anda bergabung dengan Medium melalui tautan ini, saya akan menerima sejumlah kecil dari biaya Anda — dan Anda tidak akan dikenakan biaya tambahan apa pun! Terima kasih sebelumnya. »💰
Terima kasih telah membaca!
Konten lainnya di
