Mendesain halaman yang aksesibel

Halaman yang aksesibel bisa dipakai semua orang: orang yang memakai pembaca layar, yang penglihatannya kurang baik, yang menghindari gerakan di layar, atau yang sekadar melihat ponsel di bawah terik matahari. LinkHarbor mengurus banyak hal secara otomatis; sebagian lainnya tergantung Anda. Artikel ini menunjukkan apa yang perlu diperhatikan.

#Yang dilakukan LinkHarbor secara otomatis

• Jika pengunjung menyalakan “Reduce motion” (Kurangi gerakan) di sistemnya, video latar tidak diputar, dan efek gulir dan parallax serta animasi hover dimatikan
• Blok “Judul” dikeluarkan sebagai judul sungguhan yang dipakai pembaca layar untuk orientasi
• Gambar dari blok “Gambar” dan “Galeri” mendapat teks alt Anda sebagai deskripsinya
• Jika Anda belum memilih warna teks sendiri untuk tombol, LinkHarbor memilih warna yang sesuai dengan warna tombol

#Teks alt untuk gambar

Teks alt menjelaskan apa yang terlihat di gambar. Pembaca layar membacakannya, dan teks ini muncul saat gambar tidak termuat.

Blok “Gambar”

Kolom “Teks alternatif” di editor blok.

Blok “Galeri”

“Teks alternatif” hingga 200 karakter per gambar.

• Jelaskan isinya, bukan filenya: “Cappuccino dengan latte art di atas meja kayu”, bukan “IMG_2041”
• Untuk gambar yang berisi teks, teksnya dimasukkan ke teks alt
• Buat singkat – satu kalimat biasanya sudah cukup

Letak kolom-kolomnya dijelaskan di Blok gratis secara detail dan Blok konten.

#Struktur dengan judul

Bagi halaman yang lebih panjang dengan blok “Judul”, bukan dengan teks besar. Pengguna pembaca layar melompat dari judul ke judul sehingga cepat menemukan yang mereka cari – seperti “Jam buka” atau “Kontak”.

#Judul tautan yang jelas

• Setiap tautan harus bisa dipahami sendiri: “Menu dalam PDF”, bukan “Klik di sini”
• Hindari judul yang sama untuk tujuan yang berbeda
• Emoji di awal judul ikut dibacakan; gunakan secukupnya

Selengkapnya tentang tautan di Menambah dan menata tautan.

#Kontras dan keterbacaan

• Pastikan kontras antara teks dan latar belakang cukup, terutama dengan warna pastel yang terang
• Jika teks berada di atas gambar atau video latar, gunakan “Opasitas lapisan” di tema agar tetap terbaca
• Jangan taruh teks penting hanya di dalam gambar – pengunjung dengan pembaca layar tidak bisa membacanya
• Pilih font yang mudah dibaca dan ukuran font yang tidak terlalu kecil untuk blok teks

Warna, latar belakang, dan font Anda atur di tema, lihat Desain.

#Gunakan CSS kustom dengan hati-hati

Dengan CSS kustom Anda bisa mengubah hampir apa saja – termasuk hal-hal yang penting untuk aksesibilitas. Jangan sembunyikan garis fokus, jangan terlalu mengecilkan teks, dan setelah melakukan perubahan, uji juga halaman dengan keyboard. Lihat CSS kustom.

#Uji sendiri

1. Nyalakan pembaca layar di ponsel Anda (VoiceOver di iPhone, TalkBack di Android) dan dengarkan halaman Anda
2. Perbesar ukuran teks di pengaturan sistem dan periksa apakah semuanya tetap terbaca
3. Lihat halaman dalam cahaya terang dan dalam mode gelap