Seberapa hebat desain memengaruhi aksesibilitas situs web

Apakah Anda mencari titik awal ke dalam disiplin aksesibilitas yang luas? Kami akan mempelajari praktik dan alat nyata yang dapat Anda terapkan ke dalam proses desain Anda untuk meningkatkan produk digital Anda dengan menjadikannya inklusif bagi lebih banyak pengguna Anda.

Apa itu aksesibilitas?

Situs web yang dapat diakses memungkinkan lebih banyak pengguna untuk terlibat dengan konten di situs web Anda tanpa hambatan. Baik kita mendekati topik dari perspektif UI atau UX, fokusnya adalah menciptakan produk berkualitas yang sesuai dengan beragam audiens.

Pemirsa yang beragam ini “meluas kepada siapa saja yang mengalami kecacatan permanen, sementara atau situasional, misalnya hanya memiliki satu tangan adalah kondisi permanen, memiliki lengan yang terluka bersifat sementara, dan menggendong bayi dengan satu tangan adalah situasional — dalam setiap kasus, pengguna dapat menyelesaikan tugas hanya dengan satu tangan.” (Avinash Kaur, 2018).

Mengapa aksesibilitas penting?

Sebagai desainer, merupakan tanggung jawab kami untuk memastikan bahwa kami mendesain dengan cara yang dapat diakses oleh semua pengguna terlepas dari situasi, kemampuan, atau konteks mereka. Hasilnya, web dapat menjadi ruang yang inklusif bagi semua, baik mereka yang memiliki disabilitas kognitif, gangguan penglihatan, atau disabilitas fisik.

Membuat situs web yang dapat diakses tidak harus membutuhkan anggaran atau perubahan dalam jumlah besar. Karena tidak menuntut fitur atau konten tambahan, aksesibilitas dapat dicapai melalui pendidikan dan kesadaran di awal proyek desain.

Ini juga bisa dibilang penting untuk bisnis: penelitian menunjukkan bahwa situs web yang dapat diakses memiliki hasil pencarian yang lebih baik, mereka menjangkau audiens yang lebih besar, mereka ramah SEO, memiliki waktu pengunduhan yang lebih cepat, mendorong praktik pengkodean yang baik, dan mereka selalu memiliki kegunaan yang lebih baik.

Bagaimana kita mencapai aksesibilitas?

Anda harus melakukan penyesuaian tertentu dan mengikuti kerangka kerja untuk memastikan bahwa Anda mendesain dengan beragam kemampuan, usia, dan tingkat pengalaman dengan perangkat.

Aksesibilitas adalah disiplin mandiri yang terus berkembang agar sesuai dengan produk digital. Tetapi dengan cara yang sama, solusi perangkat lunak juga berkembang. Artinya, kami tidak dapat membahas semua yang ada dalam topik tersebut, tetapi jika menurut Anda artikel ini bermanfaat, kami dapat melakukan bagian 2!

Kita akan menyelami 5 area besar:

1. Kontras warna
2. Teks alternatif
3. Status fokus
4. Formulir
5. Tipografi

Kontras warna

Memastikan ada kontras warna yang cukup antara teks dan latar belakang membantu pengguna yang kesulitan melihat. Ini memengaruhi jumlah pengguna yang lebih tinggi dari yang diharapkan dan sering diabaikan sebagai masalah. Namun, sebanyak 1 dari 12 pria buta warna dan banyak lainnya dengan low vision atau buta.

Untuk memulainya, pedoman aksesibilitas mendikte bahwa warna tidak boleh menjadi satu-satunya cara untuk menyampaikan informasi. Dengan kata lain, harus ada petunjuk tambahan bagi pengguna yang melihat warna secara berbeda dan mungkin melewatkan instruksi berbasis warna kami.

Untuk mempertahankan kontras yang layak antara teks dan latar belakang, rasio yang baik untuk diikuti adalah minimal 4,5 hingga 1. Ini memungkinkan kejelasan bagi pengguna dengan penglihatan rendah atau buta warna untuk membedakan keduanya.

Rasio kontras 4,5 banding 1 mengikuti tingkat kesesuaian AA (dari tiga tingkat: A, AA, dan AAA) tetapi ini berubah berdasarkan ukuran font dan tingkat kesesuaian mana yang ingin Anda capai. Font yang lebih besar memerlukan rasio kontras yang lebih kecil hanya 3 banding 1 jika jenisnya 18 pt (atau 14 pt dicetak tebal).

Rasio minimum ini tidak berlaku untuk teks yang ada di dalam logo atau nama merek, tetapi berguna untuk memeriksa sendiri rasio kontras Anda menggunakan alat praktis ini.

Teks alternatif

Bagi pengguna yang mengakses web menggunakan pembaca layar, konten yang ditampilkan tidak selalu tersampaikan dengan benar. Teks alternatif (alt) adalah apa yang digunakan pembaca layar untuk memberi tahu pengguna gambar apa yang ada di halaman.

Ini dapat dilakukan dengan mengubah teks alt menjadi braille, deskripsi audio, atau membaca teks secara visual. Ini berarti penting untuk menjelaskan secara akurat apa yang terjadi dalam gambar bagi mereka yang tidak dapat melihatnya.

Terkadang mungkin tidak perlu menambahkan teks alternatif. Misalnya, mungkin ada cukup indikator kontekstual di sekitar gambar atau gambar tidak memiliki fungsi lain selain estetika.

Status fokus

Anda kemungkinan besar sudah akrab dengan indikator fokus tanpa menyadarinya. Status fokus adalah (sering) garis biru yang muncul saat elemen dipilih, misalnya tautan, menu, tombol, dan bidang formulir.

Sinyal ini adalah elemen mana yang menjadi fokus pengguna saat menggunakan keyboard. Seringkali indikator-indikator ini dipandang tidak sedap dipandang atau seolah-olah tidak memiliki tujuan tetapi sebenarnya sangat penting. Banyak pengguna terbatas pada penggunaan hanya keyboard dan orang-orang tunanetra yang menggunakan pembaca layar juga memerlukan indikator fokus untuk membantu navigasi halaman.

Indikator fokus adalah cara sederhana untuk membuat navigasi halaman Anda jelas dan dapat diakses dengan sangat sedikit usaha namun perbedaan besar bagi pengguna. Mereka dapat dengan mulus mengikat merek menggunakan warna yang sesuai, mereka hanya harus kontras sehingga elemennya menonjol.

Formulir

Formulir bisa menjadi rumit bagi siapa saja, tetapi mereka yang memiliki masalah aksesibilitas tambahan sering kali kesulitan saat formulir terlalu minimalis dan tidak jelas. Di bawah ini tercantum beberapa item umum yang perlu ditangani untuk mengatasi aksesibilitas:

• Label – menggunakan teks placeholder sebagai label daripada teks di luar bidang menciptakan kebingungan saat teks menghilang saat pengguna mulai mengetik. Mengabaikan petunjuk penting bagi pengguna yang mendukung minimalis atau estetika adalah kesalahan besar yang harus dihindari.
• Perbatasan – sesuatu yang sederhana seperti batas di sekitar input teks penting bagi pengguna dengan disabilitas kognitif sehingga jelas di mana mereka perlu mengeklik
• Instruksi tambahan – seringkali formulir menggunakan pendekatan minimalis dalam upaya untuk mendeklarasikan desain, namun, ini menghalangi kegunaan dan karena itu aksesibilitas.
• Pesan kesalahan – ini harus ditunjukkan oleh beberapa elemen, biasanya warna digunakan tetapi selain kesalahan ini harus ditunjukkan melalui simbol atau teks.
• Tinjauan – formulir harus memungkinkan periode tinjauan sebelum pengiriman untuk memungkinkan pengguna mengoreksi informasi apa pun.

Tipografi

Informasi lebih mudah dicerna jika tidak berantakan dan terlalu banyak dalam satu ruang. Ini juga berlaku untuk situs web yang dapat diakses. Seperti disebutkan sebelumnya, ukuran font dapat mengubah persyaratan minimum untuk rasio kontras, tetapi ukuran font tidak boleh di bawah 10 pt.

Seperti yang Anda lihat, sulit untuk membaca dalam 9 pt.

Meningkatkan jumlah spasi putih antara kedua baris teks dan kata-kata individual dapat membantu pengguna yang mengalami gangguan penglihatan atau disleksia. Spasi minimum berikut memastikan bahwa persyaratan pengguna tersebut terpenuhi:

• Spasi huruf : x0.12 ukuran font
• Spasi kata : x0.16 ukuran font
• Spasi baris : x1.5 ukuran font font
• Spasi paragraf : x2 ukuran font

Kesimpulan

Anehnya, perubahan kecil ini dapat membuat perbedaan besar pada aksesibilitas. Itu tidak memerlukan anggaran besar dan banyak waktu untuk membuat situs web Anda sesuai dengan Pedoman Aksesibilitas Konten Web tetapi dapat secara dramatis mengubah pengalaman pengguna dan karenanya meningkatkan bisnis Anda juga.

Menambahkan saran ini ke dalam proses desain Anda dapat menjadi kebiasaan, membuka jalan bagi masa depan situs web yang lebih mudah diakses – terserah kami sebagai desainer.

Jika Anda memerlukan bantuan dengan Materi Kreatif Anda, jangan ragu untuk menghubungi kami.