Intinya...
Teks tetap terbaca dan dapat digunakan walau spasinya diganti menggunakan style kustom dengan pengaturan
- 1,5x tinggi baris,
- 2x spasi antar paragraf,
- 0,12x spasi huruf,
- 0,16x spasi kata,
tanpa membuat kontennya tersembunyi, terpotong, atau berantakan.
Apa itu WCAG 1.4.12?
Konten teks harus dapat beradaptasi dengan pengaturan jarak teks yang ditentukan oleh pengguna, seperti tinggi baris, jarak antar paragraf, jarak antar huruf, dan jarak antar kata. Properti teks ini tidak boleh menyebabkan konten terputus, tumpang tindih, atau terpotong.
Tujuannya adalah untuk membuat teks lebih mudah dibaca sambil menjaga desain dan tata letak halaman tetap utuh dan fungsional.
Mengapa ini penting?
Beberapa pengguna, seperti mereka yang memiliki gangguan penglihatan rendah atau disleksia, membutuhkan pengaturan jarak teks khusus untuk membaca dengan efektif. Tanpa fleksibilitas ini, konten bisa menjadi tidak dapat dibaca karena teks yang tumpang tindih atau terpotong.
Jarak teks yang tepat:
- Membantu pembaca fokus
- Mengurangi ketegangan mata
- Meningkatkan kecepatan membaca
Ketika konten web menyesuaikan dengan baik, semua orang mendapat manfaatnya, apakah mereka menggunakan teknologi bantu atau hanya menyesuaikan pengaturan untuk kenyamanan pribadi.
Siapa yang terpengaruh?
Pengguna low vision dan penglihatan terbatas, pengguna disleksia, dan pengguna dengan gangguan kognitif.
Pengguna low vision membutuhkan teks yang lebih besar dan lebih banyak ruang untuk membantu membedakan antara karakter, baris, dan kata.
Pengguna disleksia dapat memanfaatkan jarak yang lebih besar antara baris, kata, dan huruf untuk menghindari kebingungannya dan meningkatkan kecepatan membaca.
Pengguna dengan gangguan kognitif yang mengandalkan struktur visual yang jelas juga dapat memproses konten dengan lebih baik ketika white space diterapkan antara blok teks untuk membantu mereka membedakan antar bagian.
Cara menerapkan WCAG 1.4.12
Izinkan pengaturan jarak teks diubah
Konten harus memungkinkan pengguna untuk menyesuaikan jarak teks dengan stylesheet, ekstensi, atau aplikasi. Kuncinya adalah memastikan bahwa container teks memiliki ruang untuk berkembang atau diperluas untuk mencegah konten terpotong atau tumpang tindih.
- Hindari menetapkan tinggi tetap untuk area teks, biarkan mereka beradaptasi sesuai kebutuhan untuk menyesuaikan konten.
- Untuk teks yang non-wrapping, pastikan containernya setidaknya 20% lebih lebar dari lebar default untuk memperhitungkan penyesuaian jarak. Ini membantu mencegah wrapping yang tidak diinginkan.
- Tentukan lebar dan tinggi container teks menggunakan unit
em
ataurem
untuk memastikan mereka menyesuaikan dengan perubahan ukuran teks. Unit tetap sepertipx
danpt
berisiko memotong teks saat diubah ukurannya.
Saat menguji, pastikan bahwa kamu dapat memenuhi persyaratan ini:
- Tinggi baris setidaknya 1,5 kali ukuran font
- Jarak antar paragraf setidaknya 2 kali ukuran font
- Jarak antar huruf setidaknya 0,12 kali ukuran font
- Jarak antar kata setidaknya 0,16 kali ukuran font
Sebagai contoh, teks dengan ukuran font default 1em
atau 16px
perlu diperiksa untuk:
- Tinggi baris: 1,5 × 16px = 24px
- Jarak antar paragraf: 2 × 16px = 32px
- Jarak antar huruf: 0,12 × 16px = 1,92px
- Jarak antar kata: 0,16 × 16px = 2,56px
CSS di bawah ini dapat digunakan untuk menguji persyaratan tersebut; jika tata letak halaman dan konten masih terlihat baik setelah melakukan penyesuaian ini, maka kriteria keberhasilan telah dipenuhi.
/* Base font size of 16px or 1rem */
body { font-size: 1rem; }
/* Line height set to at least 1.5 times the font size */
p { line-height: 1.5; /* This automatically calculates as 24px for a 16px font size */ }
/* Paragraph spacing set to at least 2 times the font size */
p + p { margin-top: 2em; /* This ensures spacing between paragraphs is 32px */ }
/* Letter spacing set to at least 0.12 times the font size */
p { letter-spacing: 0.12em; /* This is 1.92px for a 16px font size */ }
/* Word spacing set to at least 0.16 times the font size */
p { word-spacing: 0.16em; /* This is 2.56px for a 16px font size */ }
Kesimpulan
Memberikan kontrol kepada pengguna atas pengaturan jarak teks konten sangat penting untuk memastikan pengguna dapat membaca dengan nyaman. Dengan mengikuti WCAG 1.4.12, kamu memastikan bahwa situs web kamu dapat digunakan oleh semua orang, termasuk mereka yang memiliki low vision, disleksia, atau tantangan membaca lainnya.