Materi
Kriteria 1.4.4 Resize Text (tingkat AA) meminta teks bisa diperbesar sampai 200 persen tanpa teknologi bantu dan tanpa kehilangan isi atau fungsi, kecuali takarir dan gambar teks. Dokumen Understanding menyebut dua kegagalan: F69, teks, gambar, atau kontrol terpotong atau tertutup saat diperbesar; dan F94, ukuran huruf dalam satuan viewport seperti vw, yang tidak ikut membesar saat pengguna memperbesar teks. Tekniknya memakai satuan relatif seperti persen dan em untuk huruf dan wadah teks.
Kriteria 1.4.10 Reflow (tingkat AA) meminta isi tetap utuh tanpa perlu menggulir dua arah pada lebar setara 320 CSS px untuk konten yang bergulir vertikal, dan tinggi setara 256 CSS px untuk konten yang bergulir horizontal. Dokumen Understanding menjelaskan 320 CSS px setara lebar awal 1280 CSS px pada zoom 400 persen. Bagian yang butuh tata letak dua dimensi dikecualikan, misalnya tabel data, peta, diagram, video, dan permainan, tetapi heading, kolom cari, dan teks di sekitarnya tetap harus menyesuaikan lebar.
Hitungannya: lebar CSS yang tersedia sama dengan lebar awal jendela dibagi faktor zoom. Jendela 1280 CSS px pada 200 persen menyisakan 640 CSS px, dan pada 400 persen menyisakan 320. Penyebab gagal yang paling sering adalah wadah berlebar tetap dalam px, misalnya width: 960px, yang memaksa gulir horizontal di bawah lebar itu. Menggantinya dengan max-width membiarkan wadah menyusut. Media query dan satuan rem dibahas di kelas CSS Tata Letak.
.artikel { max-width: 45rem; } /* menyusut di layar sempit */
h1 { font-size: 2rem; } /* ikut membesar saat teks diperbesar */
