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.

Contoh penerapan spasi yang buruk

Contoh penerapan buruk untuk jarak teks di mana teks yang tumpang tindih membuat halaman tidak dapat dibaca.

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

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

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 atau rem untuk memastikan mereka menyesuaikan dengan perubahan ukuran teks. Unit tetap seperti px dan pt 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

Contoh halaman yang menerapkan spasi yang baik

Tata letak halaman web yang memungkinkan untuk pengaturan jarak teks diubah dan telah memperhitungkan perubahan potensial, dengan perbandingan sebelum dan sesudah perubahan.

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.