Mendesain untuk Aksesibilitas Web

Sediakan kontras yang cukup antara latar depan dan latar belakang

Teks pada latar depan harus memiliki kontras yang cukup dengan warna latar belakangnya. Termasuk untuk teks pada gambar, latar belakang gradien, tombol, dan elemen lainnya. Hal ini tidak berlaku untuk logo, atau teks yang insidental, seperti teks yang kebetulan ada di dalam foto. Tautan di bawah memberikan informasi selengkapnya tentang rasio kontras minimum sebagaimana diharuskan oleh WCAG dan cara memeriksa tingkat kontrasnya. “Rasio kontras” adalah kependekan dari istilah “rasio kontras pencahayaan” yang secara teknis lebih tepat.

Jangan hanya menggunakan warna untuk menyampaikan informasi

Meskipun warna dapat berguna untuk menyampaikan informasi, warna seharusnya tidak menjadi satu-satunya cara dalam penyampaian informasi. Ketika menggunakan warna untuk membedakan elemen satu dan lainnya, berikan juga identifikasi tambahan yang tidak bergantung pada warna. Misalnya, selain warna gunakan pula asteris untuk menunjukkan kolom isian yang harus diisi, dan gunakan label untuk membedakan area pada sebuah grafik.

Pastikan elemen interaktif mudah diidentifikasi

Berikan gaya yang berbeda untuk elemen interaktif, seperti tautan dan tombol, agar mudah diidentifikasi. Misalnya dengan mengubah tampilan tautan ketika disoroti tetikus, difokuskan via kibor, dan diaktivasi via layar sentuh. Pastikan gaya dan penamaan elemen interaktif digunakan secara konsisten di seluruh situs web.

Sediakan opsi navigasi yang konsisten dan jelas

Pastikan navigasi di seluruh halaman dalam situs web memiliki penamaan, pemberian gaya, dan peletakan yang konsisten. Sediakan lebih dari satu metode navigasi situs web, seperti pencarian pada situs atau peta situs. Bantu pengguna memahami posisi mereka di situs web atau halaman dengan menyediakan petunjuk orientasi, seperti jejak roti dan judul yang jelas.

Pastikan elemen isian disertai label yang jelas

Pastikan semua bidang memiliki label deskriptif yang bersebelahan dengan bidang tersebut. Untuk bahasa yang ditulis dari kiri ke kanan, label biasanya diposisikan di sebelah kiri atau atas bidang, kecuali untuk kotak centang dan tombol radio, label biasanya diletakkan di sebelah kanan. Hindari memberikan terlalu banyak ruang antara label dan bidangnya.

Sediakan umpan balik yang mudah diidentifikasi

Berikan umpan balik untuk interaksi, seperti mengkonfirmasi pengiriman isian, memperingatkan pengguna ketika terjadi kesalahan, atau memberi tahu pengguna tentang perubahan pada halaman. Instruksi harus mudah diidentifikasi. Umpan balik penting yang memerlukan tindakan dari pengguna harus disajikan dengan gaya yang menonjol.

Gunakan judul dan spasi untuk mengelompokkan konten yang berhubungan

Gunakan spasi dan kedekatan posisi untuk membuat hubungan antar konten menjadi lebih jelas. Tatalah posisi judul untuk mengelompokkan konten, mengurangi kekusutan, dan membuat konten lebih mudah untuk dipindai dan dimengerti.

Buat desain untuk ukuran porta pandang yang berbeda

Pertimbangkan bagaimana informasi halaman disajikan dalam berbagai ukuran porta pandang, seperti ponsel atau jendela browser yang dizum. Posisi dan penyajian elemen utama, seperti tajuk dan navigasi bisa diubah untuk memanfaatkan ruang sebaik-baiknya. Pastikan ukuran teks dan lebar baris diatur untuk memaksimalkan keterbacaan dan kejelasan huruf (legibilitas).

Sertakan alternatif untuk gambar dan media dalam desain Anda

Sediakan tempat dalam desain Anda untuk alternatif dari gambar dan media. Misalnya, Anda mungkin memerlukan:

• Tautan yang tampak jelas ke transkrip audio
• Tautan yang tampak jelas ke versi dengan deskripsi audio
• Teks yang menyertai ikon dan tombol grafis
• Takarir dan deskripsi untuk tabel atau grafik yang kompleks

Bekerjalah bersama penulis dan pengembang konten untuk memberikan alternatif untuk konten nonteks.

Sediakan kontrol untuk konten yang dimulai secara otomatis

Tampilkan kontrol untuk memungkinkan pengguna menghentikan animasi atau suara yang diputar secara otomatis. Ini berlaku untuk korsel, gambar bergeser, suara latar belakang, dan video.