ArticleTurn Compassion Menjadi Tindakan Dengan Menghindari 8 Kesalahan Desain yang Dapat Diakses Ini

Desain yang dapat diakses menghormati keunikan semua individu, tanpa memandang usia dan kemampuan. Dimulai dengan menyadari bahwa tidak semua orang sama seperti Anda.

Untuk melayani pengguna yang berbeda dengan cara terbaik, sangat penting untuk memahami dan berempati dengan semua jenis orang. Mengikuti pedoman WCAG 2.0 AA membuat konten dapat diakses oleh lebih banyak penyandang disabilitas, termasuk kebutaan dan gangguan penglihatan, tuli dan gangguan pendengaran, ketidakmampuan belajar, keterbatasan kognitif, keterbatasan gerak, ketidakmampuan berbicara, atau fotosensitifitas. Untuk memastikan Anda melayani setiap pengguna yang mengunjungi situs web Anda, hindari delapan kesalahan desain yang mudah diakses ini.

1. Perangkap Keyboard

Beberapa orang yang menggunakan teknologi bantu mengandalkan tindakan di layar yang terlihat. Oleh karena itu, desain yang baik memastikan bahwa semua konten yang terkait dengan navigasi terlihat. Pastikan untuk memesan item secara logis (kiri atas ke kanan bawah) untuk membantu pengguna memahami konten dan membuat pilihan berdasarkan informasi tentang navigasi.

Kiat:

• Konten utama: Pertimbangkan untuk menyediakan cara bagi pengguna untuk dengan mudah melewati navigasi tingkat atas untuk mengakses konten utama.
• Pola UI: Ikuti semantik pola umum seperti Toggle, Tabs, Tables, Modal Windows, dan atribut ARIA.
• Penggunaan hover: Jangan sembunyikan teks atau tindakan di balik status hover. Jika pengguna hanya keyboard tidak dapat melihat bahwa ada konten/tombol, mereka tidak dapat menavigasi halaman.

Contoh Lewati Tautan yang Baik #1

Contoh Lewati Tautan yang Baik #2

2. Kontras Warna Tidak Memadai

Kontras warna yang tidak memadai mempengaruhi kemampuan orang untuk menerima informasi secara visual. Pastikan ada cukup kontras antara teks dan latar belakangnya untuk memastikan teks dapat dibaca. Rasio kontras antara teks dan latar belakang teks harus minimal 4,5 hingga 1. Namun, jika teks Anda setidaknya 24 piksel atau 19 piksel tebal, minimum turun menjadi 3 banding 1.

Kiat:

• Palet warna: Perhatikan warna primer. Selain itu, perhatikan persyaratan kontras warna saat memilih warna.
• Jangan mengandalkan warna saja: Gunakan kombinasi bentuk, warna dan teks (bukan hanya satu saja) untuk menyampaikan makna, dan konsisten. Berikan setidaknya dua indikator agar orang yang tidak mudah membedakan warna tetap dapat memahami konten Anda.
• Pengecualian: Teks, gambar teks, gambar, dan logo yang tidak diperlukan untuk memahami makna konten, atau murni “dekorasi”.

Contoh Kontras yang Tidak Memadai

3. Teks dalam Gambar

Hindari menggunakan gambar teks yang dimaksudkan untuk dibaca. Gunakan teks aktual yang ditata dengan CSS daripada presentasi teks berbasis gambar. Dalam situasi di mana gambar teks harus digunakan, teks alternatif harus berisi teks yang sama yang disajikan dalam gambar.

Kiat:

• Diagram, bagan, tabel: Gunakan teks nyata dalam visualisasi data. Jika teks nyata tidak memungkinkan, representasi tekstual dari informasi penting yang disampaikan oleh gambar sangat penting. Contoh: Deskripsi panjang atau tampilan daftar.
• Pengecualian: Logo, elemen branding, dan grafik yang memiliki alternatif teks deskriptif yang baik.

Contoh Teks Bagus di Gambar

4. Status Fokus Tersembunyi

Status fokus membantu pengguna menavigasi dan memahami di mana mereka berada. Jangan pernah menyembunyikan mereka. Status fokus penting bagi pengguna keyboard. Ini membantu mereka memahami di mana mereka berada di halaman. Untuk menguji situs Anda, cobalah menelusuri halaman Anda dan temukan fokus Anda.

Kiat:

• Status fokus: Jika Anda menghapus status fokus default, pastikan untuk menggantinya dengan sesuatu yang berfungsi lebih baik daripada yang disediakan browser Anda.
• Status input: Pertimbangkan apa yang terjadi pada label saat Anda fokus di dalam input.
• Tindakan halaman: Tentukan dengan jelas efek samping fokus tindakan.

Status Fokus Tersembunyi

Status Fokus yang Baik

5. Struktur Hirarki yang Membingungkan

Buat hubungan yang jelas antara konten yang dapat dipahami dan yang dapat ditentukan secara terprogram. Rancang halaman yang masuk akal secara semantik sehingga pengembang dapat menerjemahkannya dari desain ke kode dan pembaca layar dapat menentukan urutan pembacaan yang benar.

Kiat:

• Semantik: Sertakan bidang dan label wajib pada formulir. Desain tabel dengan judul kolom.
• Pengelompokan Logis: Mengelompokkan elemen terkait dengan ruang yang cukup atau warna latar belakang. Menyajikan informasi secara berurutan, seperti diagram proses atau instruksi langkah demi langkah.
• Pengungkapan Progresif: Desain untuk manipulasi langsung. Menyajikan hal yang tepat pada waktu yang tepat. Lakukan pengungkapan progresif.
• Pencarian jalan: Buat isyarat yang konsisten untuk navigasi. Gunakan heading untuk membuat landmark yang jelas di dalam halaman.
• Konsistensi: Menyajikan hal-hal yang sama dengan cara yang sama.
• Bedakan: Membedakan jenis konten yang berbeda.

Hirarki Buruk

Hirarki yang baik

6. Beban Kognitif Berlebihan

Komunikasikan informasi dengan jelas sehingga mudah dipahami. Rancang informasi sedemikian rupa sehingga mudah dikonsumsi bagi mereka yang hidup dengan gangguan attention deficit hyperactivity (ADHD), dan autisme atau gangguan spektrum autisme.

Kiat:

• Ringkas: Gunakan kalimat pendek dan isyarat visual untuk memisahkan informasi. Contoh: daftar grup menggunakan angka atau poin.
• Minimalkan beban kognitif: Buat narasi yang menyajikan informasi di tempat yang tepat pada waktu yang tepat. Hindari menyajikan paragraf padat informasi yang dapat dipecah-pecah. Hindari tindakan garis panjang.

7. Hyperlink yang Tidak Dibedakan

Tautan adalah salah satu elemen paling umum di web, dan seringkali penting untuk menavigasi situs web. Tautan harus terlihat seperti tautan, dan tidak ada yang lain. Pengguna mungkin merasa frustrasi jika mereka mencoba mengklik frasa tekstual atau grafik yang terlihat seperti tautan tetapi sebenarnya tidak. Tautan harus masuk akal di luar konteks.

Kiat:

• Dapatkan spesifik: Gunakan kata-kata deskriptif untuk tombol alih-alih terminologi yang tidak jelas sehingga hasilnya dapat diprediksi.
• Tautan yang tidak digarisbawahi: Teks tautan harus memiliki rasio kontras 3:1 dari teks non-tautan di sekitarnya.
• Jangan mengandalkan warna saja: Tautan harus menampilkan "penanda non-warna" pada kursor mouse dan fokus keyboard. Contoh: bayangan jatuh, skala, transisi/ transformasi, perubahan warna, atau garis bawah.

Hyperlink yang buruk

Hyperlink yang bagus

8. Tipografi yang Tidak Terbaca

Sebagian besar informasi di situs web dikomunikasikan melalui teks, jadi jenisnya harus dapat dibaca dan dibaca. Ini membantu orang dengan penglihatan rendah dengan mudah melihat karakter. Ini dapat mengurangi ketegangan membaca bagi seseorang dengan ketidakmampuan belajar. Gunakan tipografi yang bersih dan sederhana dengan spasi yang baik. Terapkan kerning dan leading yang nyaman untuk memastikan teks mudah dibaca.

Tips

• Beri pengguna kontrol: Jangan mencegah pengguna menyesuaikan pengalaman membaca mereka sendiri dengan mengubah ukuran body copy ke ukuran font yang lebih kecil. Anda dapat melakukan ini dengan menyetel ukuran font ke 100%, dan menggunakan ukuran relatif untuk membuat hierarki di antara judul. Teks harus tetap terbaca pada 200%.
• Kurangi garis bawah, miring, dan kapital: Bentuk huruf ini lebih sulit dikenali dan dibaca.
• Sejajarkan teks format panjang ke kiri: Buat tata letak yang konsisten dengan jalur linier untuk diikuti mata.

Perbesar 100%

Ubah ukuran teks Anda. Pastikan halaman Anda dapat diakses dan digunakan oleh pengguna dengan gangguan penglihatan dan pengguna dengan gangguan penglihatan. Ubah ukuran teks dan pastikan semua yang ada di halaman berfungsi. Ulangi sampai Anda mendapatkan zoom 200%. Tampaknya sederhana? Dia.

Langkah-langkah untuk memeriksa tipografi Anda:

1. Buka browser Anda dan ubah ukuran teks menjadi 200 persen. Klik Lihat, pilih Zoom, lalu klik Perbesar (Ctrl/Cmd++) untuk memperbesar ukuran teks.
2. Lihatlah bagaimana konten di layar merespons. Semua konten pada halaman harus tetap dapat dibaca dan tidak ada fungsi yang hilang.
3. Periksa untuk melihat apakah interaksi masih berfungsi, apakah teksnya tumpang tindih, apakah teks penting telah terpotong, atau apakah teks telah terpotong.

Perbesar 200%

Kiat:

1. Buka browser Anda dan ubah ukuran teks menjadi 200 persen. Klik Lihat, pilih Zoom, lalu klik Perbesar (Ctrl/Cmd++) untuk memperbesar ukuran teks.
2. Lihatlah bagaimana konten di layar merespons. Semua konten pada halaman harus tetap dapat dibaca dan tidak ada fungsi yang hilang.
3. Periksa untuk melihat apakah interaksi masih berfungsi, apakah teks tumpang tindih, apakah teks penting telah terpotong, atau apakah teks telah terpotong.

Sumber daya

Kira-kira satu dari delapan orang di Amerika Serikat memiliki disabilitas. Jika definisi tersebut diperluas untuk mencakup mereka yang mengalami gangguan sedang, jumlah itu melonjak menjadi hampir satu dari lima.

Kegagalan untuk mengakomodasi audiens yang begitu besar membatasi dampak positif situs web terhadap bisnis Anda – belum lagi kemampuan merek Anda untuk beresonansi dengan orang-orang dan menginspirasi kepercayaan. Membangun situs web yang dapat diakses yang dapat digunakan di sebanyak mungkin browser dan oleh sebanyak mungkin orang dapat membantu bisnis Anda – tetapi ini juga merupakan hal yang benar untuk dilakukan. Jadi kami telah mengumpulkan beberapa sumber lain tentang topik ini.

• Cari tahu mengapa penting bagi bisnis untuk mempertimbangkan aksesibilitas web (dan menghindari tuntutan hukum perusahaan).
• Dengarkan Podcast Pemecahan untuk B° tentang pentingnya aksesibilitas web.

Kontras Warna

• Pemeriksa Kontras AIM Web
• Pemeriksa Kontras Berwarna

Struktur

• Judul Peta Ekstensi Chrome
• Pustaka Pola Proyek A11Y

Kredit

• Proyek A11Y
• w3.org- WCAG 2.0
• w3.org- Standar & Ikhtisar
• Kegunaan.org
• Penelitian Aksesibilitas di IBM
• Museum Carnegie di PittsburghDisney.com hierarki yang baik