Pengguna dengan penglihatan rendah jarang membaca halaman pada ukuran huruf bawaan — sebagian menaikkan ukuran font bawaan browser, sebagian lainnya memperbesar seluruh halaman dengan zoom. Kriteria Resize Text WCAG 1.4.4 menuntut kedua jalur itu bekerja: teks harus tetap dapat diperbesar hingga 200% tanpa kehilangan isi atau fungsi. Peran CSS di sini sangat menentukan — satuan yang kita pilih menentukan apakah preferensi pengguna dihormati atau diabaikan. Chapter ini membahas pemilihan satuan, jaga-jaga agar layout tidak pecah, dan cara mengujinya.

rem Menghormati Preferensi, px Mengabaikannya #

Ketika pengguna menaikkan ukuran font bawaan browser (misalnya dari 16px menjadi 20px), satu-satunya satuan yang ikut menyesuaikan adalah rem dan em — keduanya didefinisikan relatif terhadap ukuran font. Teks yang ditulis dalam px tetap seukuran apa pun pengaturan pengguna:

css 
.artikel {
  font-size: 1rem;        /* 16px pada pengaturan bawaan */
  max-width: 40rem;       /* ikut membesar bersama teksnya */
}
.artikel h2 {
  font-size: 1.5rem;      /* 24px pada pengaturan bawaan */
}
.artikel .catatan {
  font-size: 0.875rem;    /* 14px pada pengaturan bawaan */
}

Hasil di Browser:

text 
Artikel tampil dengan teks 1rem (computed font-size "16px"), judul
sub 1.5rem ("24px"), dan catatan 0.875rem ("14px") — semuanya dihitung
dari root 16px bawaan headless browser. Kolom teks memiliki
max-width "640px" (40rem) dan kartu samping min-width "256px" (16rem).
Ketika pengguna menaikkan font bawaan browser, seluruh angka tersebut
berpindah proporsional tanpa perubahan satu baris CSS pun.

Menghitung rem dengan teliti penting agar angka di panel Computed tidak mengejutkan: 1rem pada root 16px berarti 16px, 1.5rem berarti 24px, dan 0.875rem berarti 14px. Konversi satuan lebih lengkapnya dibahas pada Chapter Absolute dan Relative Units , sedangkan pengaruhnya pada hierarki tipografi ada di Chapter Font-size dan Weight .

Menjaga Layout Tetap Utuh #

Teks yang membesar tanpa wadah yang menyesuaikan berujung pada teks terpotong atau kolom yang saling menumpuk. Tiga jaga-jaga berikut menutup sebagian besar kasus:

  1. Wadah teks memakai satuan relatif: max-width dalam rem atau ch membuat lebar kolom tumbuh bersama teksnya, sehingga ukuran baris (panjang baca) tetap nyaman.
  2. Hindari tinggi tetap pada wadah teks: height yang dipatok membuat teks meluber saat membesar; gunakan min-height dan biarkan tinggi mengikuti isi.
  3. Beri ruang minimum pada elemen interaktif: tombol dan kartu yang memakai min-width atau min-height (dalam rem) akan melapisi teks yang lebih panjang alih-alih memotongnya.

Menguji Zoom 200% #

Zoom halaman bekerja berbeda dari pengaturan font: zoom memperbesar seluruh halaman secara proporsional, sementara pengaturan font hanya memperbesar teks. WCAG menuntut keduanya. Cara menguji keduanya secara manual:

  1. Zoom 200%: buka halaman, tekan Ctrl + + (macOS: Cmd + +) tiga kali dari 100% hingga mencapai 200%. Pastikan tidak ada isi yang hilang: tidak ada teks terpotong, tidak ada kolom yang bertumpuk, dan seluruh kontrol tetap dapat dijangkau — termasuk menu yang harus tetap terbuka atau bisa digulir.
  2. Pengaturan font browser: naikkan ukuran font bawaan (Chrome: Settings > Appearance > Font size; Firefox: Settings > General > Language and Appearance) menjadi 20px, lalu muat ulang halaman. Hanya teks yang ditulis dalam rem/em yang ikut membesar — teks px tetap kecil, dan itulah temuan yang perlu diperbaiki.
  3. DevTools untuk iterasi cepat: tab Rendering pada DevTools dapat meniru kondisi tertentu, tetapi zoom 200% paling akurat diuji dengan zoom sungguhan karena alur gulir dan patahan layout ikut berperilaku nyata.

Demo chapter ini (ukuran-teks.html) membawa artikel contoh dengan lima pemeriksaan data-expected pada font-size, max-width, dan min-width — seluruh nilai rem di atas terverifikasi dalam piksel oleh harness.