Intinya...

Blok teks (seperti paragraf) harus

  • memiliki tinggi baris minimal 1,5,
  • tidak dibuat rata kanan-kiri, dan
  • memiliki lebar maksimal 80 karakter (atau 40 untuk aksara CJK).
  • pengguna bisa mengatur spasi dan warnanya menggunakan style kustom.

Apa itu WCAG 1.4.8?

Blok teks harus mudah dibaca dan cukup fleksibel agar pengguna dapat menyesuaikannya dengan kebutuhan mereka. Panduan ini menjelaskan praktik terbaik tentang bagaimana teks harus ditampilkan, seperti menggunakan jarak antar baris yang baik, menghindari perataan kanan-kiri, membatasi lebar baris, dan memungkinkan pengguna mengubah warna.

Beberapa pengguna membutuhkan lebih banyak kontrol atas bagaimana teks terlihat agar dapat membaca dengan nyaman. Jadi, aturan ini membantu memastikan desain tidak menghalangi pemahaman.

Penerapan teks yang mudah dibaca

Ilustrasi berjudul 'Good Visual Presentation for Text' menunjukkan sebuah blok teks. Callout yang diberi label menyoroti fitur utama: lebar 80 karakter, teks rata kiri, jarak antar baris 1,5x, kemampuan untuk mengubah warna teks dan latar belakang, dan tidak perlu scrolling horizontal pada zoom 200%.

Mengapa ini penting?

Jika pengguna tidak bisa mengontrol bagaimana teks terlihat, baik itu warna, ukuran teks, jarak antar baris, atau lebar teks, membaca bisa menjadi sulit atau bahkan tidak mungkin. Gaya teks tertentu, seperti perataan kanan-kiri atau baris yang terlalu sempit, bisa membingungkan atau sulit diikuti, terutama bagi pengguna dengan disabilitas kognitif atau gangguan penglihatan.

Selain itu, baris teks panjang yang membentang di seluruh layar bisa membuat pengguna kehilangan tempat mereka, membuat membaca bahkan konten yang sederhana menjadi frustrasi. Memungkinkan pengguna untuk menyesuaikan hal-hal seperti warna, lebar, dan jarak membuat mereka lebih mudah membaca dan tetap terhubung dengan kontenmu.

Siapa yang terpengaruh?

Pengguna dengan low vision dan penglihatan terbatas, dan pengguna dengan disabilitas kognitif atau pembelajaran.

Pengguna low vision mungkin perlu mengubah warna, memperbesar, atau menambahkan ruang antar baris untuk melihat lebih jelas.

Pengguna dengan disleksia atau disabilitas pembelajaran lainnya sering mendapat manfaat dari panjang baris yang lebih pendek, ruang yang cukup, dan teks yang sederhana dengan perataan kiri.

Cara menerapkan WCAG 1.4.8

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

Panduan ini memiliki beberapa bagian, dan semuanya harus dipenuhi untuk memenuhi persyaratan sepenuhnya. Mari kita uraikan:

Izinkan pengguna mengubah warna teks dan latar belakang

Biarkan pengguna mengubah warna teks dan latar belakang. Kamu tidak perlu membuat pemilih warna, yang penting adalah jangan menghalangi pengguna untuk menggunakan pengaturan atau ekstensi browser mereka sendiri.

Hindari:

  • CSS yang menggunakan !important saat mengatur warna
    body { background-color: #ffffff !important; color: #000000 !important;}
  • Gaya inline yang mengatur warna secara hardcode
    <p style="color: #000000;">This is hard to override.</p>
  • Gambar latar belakang di balik teks, karena pengguna tidak bisa mengontrol warna dalam gambar tersebut.

Untuk menguji, gunakan ekstensi browser atau stylesheet kustom sederhana untuk menggantikan warna teks dan latar belakang halaman. Jika semua blok teks diperbarui dengan benar, kamu sudah memenuhi persyaratan ini.

Berikut adalah contoh stylesheet dasar yang bisa kamu tambahkan ke halaman untuk tujuan pengujian saja:

body {
color: yellow !important;
background-color: black !important;
}

Developer harus menghindari penggunaan !important untuk warna dalam CSS, karena ini dapat menghalangi pengguna untuk mengganti pengaturan warna mereka sendiri. Namun, stylesheet pengguna seperti ini boleh menggunakan !important untuk menegakkan preferensi mereka.

Perbandingan mode terang dan gelap

Dua screenshot berdampingan dari teks yang sama dalam mode gelap. Satu menampilkan latar belakang yang lebih terang dengan teks gelap, dan yang lainnya menampilkan latar belakang gelap dengan teks terang, menunjukkan bahwa pengguna dapat dengan sukses mengganti warna teks dan latar belakang.

Menjaga max-width untuk blok teks

Pertahankan panjang baris yang wajar. Blok teks sebaiknya tidak lebih dari sekitar 80 karakter per baris (40 untuk bahasa seperti Mandarin, Jepang, atau Korea, karena karakter mereka lebih lebar). Ini akan membantu karena kolom yang lebih sempit memudahkan pengguna untuk melacak posisi mereka saat membaca blok teks.

Menetapkan lebar maksimum di CSS adalah cara terbaik untuk memastikan blok teks tidak terlalu panjang. Menggunakan satuan relatif seperti ch, em, rem, atau % membantu menjaga tata letak tetap fleksibel dan mudah dibaca di berbagai ukuran layar dan tingkat zoom.

Hindari blok teks dengan lebar penuh untuk teks tubuh atau konten panjang.

.article-content {
max-width: 70ch;
}

Meskipun tidak diwajibkan, menggunakan satuan ch untuk mengatur lebar teks bisa sangat membantu. 1ch kira-kira setara dengan lebar karakter "0" (nol) pada font halaman, jadi mengatur lebar maksimum kontainer teks menjadi 70ch akan membantu kamu memenuhi persyaratan ini.

Walaupun pedoman WCAG mengizinkan hingga 80 karakter, kamu bisa mempertimbangkan untuk menggunakan 70 daripada 80 untuk memberi sedikit ruang tambahan untuk elemen seperti padding, margin, atau perbedaan font kecil yang bisa membuat baris teks menjadi terlalu panjang.

Contoh perbandingan penerapan lebar karakter 70ch

Dua contoh yang menunjukkan lebar teks 70 karakter (70ch). Bagian atas menunjukkan paragraf teks tentang aardvark yang dibatasi dengan lebar yang dapat dibaca, dan bagian bawah menunjukkan satu baris dengan tujuh puluh karakter '0' yang memenuhi lebar yang sama.

Penyelarasan teks ke satu sisi

Hindari penataan teks secara penuh (justified), yaitu saat teks dipaksa untuk menyentuh kedua sisi kiri dan kanan. Penataan teks harus diatur ke kiri atau kanan, tergantung pada bahasa, untuk menjaga jarak antar kata tetap konsisten dan mudah diikuti.

Teks yang diselaraskan di tengah memang lebih baik daripada teks yang sepenuhnya dibenarkan, namun tetap bukan pilihan terbaik untuk blok teks panjang. Karena tidak ada sisi kiri yang konsisten, mata menjadi lebih sulit untuk mengikuti baris berikutnya. Teks yang diselaraskan di tengah masih baik untuk potongan pendek seperti judul, kutipan, atau undangan, tetapi untuk blok teks panjang dan pembacaan berkelanjutan, ini akan cepat membuat lelah dan membingungkan.

Perbandingan paragraf rata kiri, rata tengah, dan rata kanan

Tiga contoh berdampingan yang diberi label: Left-Aligned (thumbs-up), Center-Aligned (thumbs-up netral), dan Full-Justified (thumbs-down). Semua menggunakan teks aardvark yang sama, menunjukkan bagaimana berbagai penataan teks mempengaruhi keterbacaan.

Tambahkan spasi lebih antara baris

Untuk memberikan spasi yang jelas, gunakan setidaknya 1,5 kali tinggi baris di dalam blok teks dan 2,25 kali tinggi baris antar blok teks. Ruang pernapasan ini membantu pengguna membaca baris demi baris tanpa kehilangan tempat.

Menerapkan properti CSS line-height dan margin-bottom secara eksplisit memungkinkan kamu mengontrol jarak minimum di dalam dan antar blok teks. Berikut adalah contoh penerapan line-height dan margin-bottom secara eksplisit pada elemen <p>:

/* Add extra spacing for better readability:
- 1.5 line height spaces out lines within paragraphs.
- 2.25em margin adds extra space after each paragraph (about 1.5x the line height).
*/
p {
line-height: 1.5;
margin-bottom: 2.25em;
}

Meskipun mirip, WCAG 1.4.12 Spasi Teks lebih fokus pada mempertahankan spasi saat pengguna melakukan perubahan. Pedoman ini berfokus pada pengaturan spasi yang baik secara default.

Perbandingan line spacing yang memengaruhi kenyamanan membaca

Dua contoh perbandingan jarak antar baris dan paragraf. Yang di atas (thumbs-up) menunjukkan teks dengan jarak antar baris 1,5x dan jarak antar paragraf 2,25x, membuatnya mudah dibaca. Yang di bawah (thumbs-down) menunjukkan teks dengan jarak antar baris dan paragraf yang sempit 1,0, membuatnya terlihat sesak.

Biarkan peningkatan ukuran tanpa scroll horizontal

Tata letak kamu harus mengalir ulang saat pengguna memperbesar hingga 200%. Itu berarti tidak ada scrolling horizontal hanya untuk membaca satu kalimat. Desain responsif sehingga blok teks membungkus dengan benar dan menyesuaikan untuk memenuhi layar—bahkan di tablet atau perangkat mobile.

Peningkatan ukuran tanpa merusak tata letak juga tercakup dalam WCAG 1.4.4 Mengubah Ukuran Teks dan WCAG 1.4.10 Penyusunan Ulang.

Ilustrasi perbesaran 200% yang dijelaskan pada caption

Sebuah halaman web yang diperbesar hingga 200% dengan scroll horizontal diperlukan untuk membaca. Judulnya bertuliskan 'Bad 200% Resize' dengan ikon thumbs-down. Teks tentang aardvarks meluap dari container yang memerlukan scrolling horizontal.

Kesimpulan

WCAG 1.4.8 berfokus untuk menjaga blok teks tetap mudah dibaca dan fleksibel digunakan. Memberikan kontrol kepada pengguna atas hal-hal seperti warna, spasi, dan tata letak bukan hanya berguna, tetapi sangat penting bagi pengguna dengan gangguan penglihatan dan kognitif. Dan sejujurnya, ini juga menciptakan pengalaman yang lebih baik untuk semua orang.