Apa itu WCAG 1.4.4?

Teks pada halaman web harus dapat diperbesar hingga 200% tanpa merusak tata letak atau menghilangkan fungsionalitas. Ini memungkinkan pengguna yang membutuhkan teks lebih besar untuk membaca dengan nyaman tanpa perlu alat bantu tambahan seperti pembesar layar.

Mengapa ini penting?

Ketika teks tidak dapat diperbesar, membaca konten pada halaman menjadi sulit. Teks kecil dengan ukuran tetap memaksa pengguna untuk memaksakan mata, yang dapat menyebabkan kelelahan dan rasa frustrasi. Jika pengguna tidak dapat membaca konten, mereka mungkin akan meninggalkan situs tersebut.

Sebaliknya, jika teks bisa diperbesar tetapi justru merusak tata letak, ini bisa menimbulkan masalah lain, seperti merusak elemen interaktif atau menyebabkan teks saling menumpuk, sehingga tetap membuat teks sulit dibaca atau membuat navigasi situs menjadi tidak mungkin.

Siapa yang terpengaruh?

Pengguna low vision dan penglihatan terbatas.

Pengguna low vision dan penglihatan terbatas mungkin merasa teks kecil sulit dibaca, sehingga menghambat mereka dalam memahami atau berinteraksi dengan konten.

Cara menerapkan WCAG 1.4.4

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

Gunakan pengukuran relatif

Pastikan konten teks dapat diperbesar hingga 200% menggunakan fitur zoom browser tanpa merusak tata letak atau kegunaan. Ini dilakukan dengan menetapkan ukuran font, ukuran kontainer, dan posisi elemen menggunakan pengukuran relatif seperti rem, em, %, vw, atau vh.

Hindari menggunakan satuan absolut seperti piksel (px), poin (pt), pica, inci, atau sentimeter saat menentukan styling elemen dan tata letak.

Perbandingan zooming yang dijelaskan pada caption

Tampilan sebelum dan setelah untuk zooming pada browser. Contoh Resize 200% yang buruk: menggunakan campuran unit relatif dan absolut. Tata letaknya tampak rusak, dengan teks yang saling tumpang tindih, elemen yang keluar dari layar, dan beberapa teks yang tetap berukuran sama dan tidak terbaca. Contoh Resize 200% yang baik: mudah dibaca dan tata letaknya teratur dengan seluruh kontennya diperbesar dua kali lipat.

Periksa kembali di berbagai ukuran layar

Pastikan penskalaan teks bekerja dengan baik di semua ukuran layar, termasuk desain responsif yang beradaptasi melalui media query. Juga pastikan bahwa memperbesar teks tidak menyebabkan tumpang tindih, terpotong, atau kolom teks vertikal yang mengurangi keterbacaan.

Teks berbasis gambar

Teks berbasis gambar (images of text) adalah teks yang disimpan dalam bentuk gambar dan dipanggil menggunakan tag <img>.

Hindari menggunakan teks berupa gambar, karena teks berupa gambar tersebut tidak dapat diubah ukurannya dengan baik dan bisa kehilangan keterbacaan ketika diperbesar. Ini juga merupakan kriteria keberhasilan tersendiri, lihat WCAG 1.4.5 Gambar Teks untuk informasi lebih lanjut.

Ilustrasi perbesaran teks berbasis gambar

Teks berbasis gambar yang diperbesar pada perangkat mobile, teks tampak kabur dan sulit dibaca.

Kesimpulan

WCAG 1.4.4 memungkinkan teks untuk diperbesar hingga 200% tanpa kehilangan keterbacaan atau merusak tata letak. Pengguna dengan gangguan penglihatan atau siapa saja yang lebih suka teks yang lebih besar harus dapat menyesuaikan dengan mudah tanpa menghadapi tata letak halaman yang rusak atau konten yang sulit dibaca. Menggunakan unit relatif untuk ukuran font dan merancang tata letak yang fleksibel serta responsif dapat mencegah masalah ini dan menciptakan pengalaman pengguna yang lebih lancar.