Mengikuti Skala Teks Sistem Operasi

Fitur web: <meta name="text-scale">

Ringkasan

Pengguna dengan gangguan penglihatan sering kali mengonfigurasi penskalaan teks di tingkat sistem operasi (seperti Jenis Dinamis di iOS atau penskalaan Ukuran Font di Android/ChromeOS). Secara default, browser seluler mengabaikan setelan aksesibilitas tingkat OS ini untuk mencegah situs lama dengan piksel tetap mengalami kerusakan visual.

Daripada membuat halaman Anda statis atau mengandalkan penghitungan tata letak JavaScript kustom yang rentan, pilih penskalaan teks sistem operasi native menggunakan tag <meta name="text-scale">. Saat aktif, browser akan menskalakan ukuran font root (1rem) secara dinamis agar sesuai dengan preferensi OS pengguna, sehingga semua ukuran font, tata letak, dan spasi relatif (rem/em) dapat diskalakan secara otomatis dan lancar.

Penerapan

1. Memilih Menggunakan Penskalaan Teks OS

Tempatkan elemen <meta name="text-scale"> di dalam <head> dokumen Anda. Hal ini memberi sinyal kepada browser pendukung bahwa tata letak Anda modern, adaptif, dan aman untuk diskalakan:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. Menggunakan Tipografi & Spasi Relatif

Tentukan ukuran font menggunakan unit relatif (rem atau em), bukan piksel tetap (px). Gunakan nilai tanpa unit untuk tinggi baris agar diskalakan secara proporsional dengan ukuran font yang dihitung untuk setiap elemen.

Gunakan unit relatif untuk margin dan padding yang spasinya digabungkan dengan ukuran teks atau harus beradaptasi saat teks diskalakan. Spasi yang tidak bergantung pada teks dapat menggunakan unit tetap jika sesuai, asalkan penskalaan tidak menyebabkan pemotongan teks, tumpang-tindih, hilangnya konten, atau tata letak yang tidak dapat digunakan:

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

Tetapkan ukuran teks dasar pada body hanya jika desain memerlukan ukuran yang berbeda dari default browser yang diwariskan; jika tidak, biarkan diwariskan. Tetapkan ukuran pada elemen tertentu, seperti judul, dengan unit relatif seperti rem atau em. Gunakan rem untuk ukuran yang relatif terhadap ukuran font root, dan em jika ukuran harus bergantung pada ukuran font elemen induk. Jangan tetapkan ukuran font kustom pada :root atau html.

Tipografi Fluid

Tipografi adaptif DAPAT menggunakan unit relatif area pandang seperti vw, asalkan ukuran font juga menyertakan komponen relatif font seperti rem atau em. Untuk teknik penskalaan yang lebih fleksibel, termasuk unit kueri penampung dan clamp(), lihat Penskalaan Fleksibel.

Hindari menentukan ukuran teks secara eksklusif dengan unit area pandang:

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

Sebagai gantinya, gabungkan nilai relatif font dengan penskalaan relatif area pandang dan gunakan batas minimum dan maksimum relatif:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

Uji apakah teks dapat diubah ukurannya menjadi setidaknya 200% dari ukuran defaultnya tanpa kehilangan konten atau fungsi. Untuk tipografi fluid, aturan praktis yang berguna adalah menjaga ukuran font maksimum tidak lebih dari 2,5 kali ukuran minimum. Uji juga penyesuaian tata letak pada lebar area pandang 320 piksel CSS (setara dengan zoom 400% dari area pandang selebar 1280 piksel CSS); konten HARUS tetap tersedia tanpa scroll dua dimensi, kecuali jika diperlukan.

3. Menggunakan Titik Henti Sementara Responsif yang Skalabel

Titik henti sementara yang responsif TIDAK BOLEH mengasumsikan bahwa teks akan tetap dalam ukuran defaultnya. Jika titik henti sementara dimaksudkan untuk merespons ruang yang tersedia untuk teks, pilih tata letak berbasis konten, kueri penampung, atau kueri media berbasis em, bukan nilai minimum piksel tetap.

Uji tata letak responsif dengan penskalaan teks sistem operasi dan zoom browser diaktifkan. Teks HARUS tetap dapat dibaca dan konten HARUS tetap terlihat tanpa tumpang-tindih, terpotong, atau scrolling horizontal.

4. Memastikan Penggabungan Konten & Tinggi Fleksibel

Saat teks diperbesar, elemen memerlukan lebih banyak ruang vertikal dan horizontal untuk mencegah pemotongan atau tumpang-tindih. Agar komponen Anda tetap tangguh, desain tata letak Anda agar dapat diperluas secara dinamis di sekitar konten, bukan memaksakan koordinat yang kaku:

  • Izinkan Penampung Teks Membesar: Komponen dan penampung yang berisi teks HARUS dapat membesar untuk mengakomodasi teks yang diskalakan. Hindari nilai height atau block-size tetap dan nilai max-height atau max-block-size yang ketat yang dapat menyebabkan pemangkasan atau overflow. Pilih ukuran berbasis konten; gunakan min-height atau min-block-size hanya jika ukuran minimum diperlukan.
  • Izinkan Pengemasan Alami: Jangan batasi pengemasan teks sumbu inline dengan white-space: nowrap pada blok yang berisi kalimat. Biarkan teks mengalir kembali ke baris baru secara alami.
  • Gunakan penggabungan Flexbox & Grid yang Fleksibel (Contoh Opsional): Untuk galeri kartu multi-kolom, gunakan kolom yang mengalir ulang seperti repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) sehingga item ditumpuk secara vertikal jika batas lebar relatifnya terlampaui:
/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. JANGAN Ganti Ukuran Font Root

Saat mengaktifkan melalui elemen <meta name="text-scale" content="scale">, JANGAN menetapkan font-size root secara eksplisit di stylesheet Anda. Hal ini mencakup deklarasi pada :root atau html, dan berlaku untuk unit absolut, unit relatif, dan nilai yang dihitung.

Misalnya, jangan ganti ukuran font root dengan nilai tetap:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

Jangan gabungkan keikutsertaan <meta name="text-scale" content="scale"> dengan env(preferred-text-scale) untuk menerapkan penskalaan teks sistem operasi secara manual. Browser menerapkan skala melalui keikutsertaan meta, sehingga menggunakan keduanya dapat menghasilkan penskalaan ganda:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

Biarkan ukuran font root diatur oleh browser. Browser menangani skala teks sistem operasi secara otomatis dan menerapkannya ke konten yang ukurannya relatif terhadap ukuran font root.

Strategi Penggantian

Di browser yang tidak mendukung <meta name="text-scale" content="scale">, tata letak akan menurun secara halus. Halaman akan menampilkan tata letak pada ukuran font dasar default standar browser (biasanya 16 px), dan pengguna masih dapat menggunakan opsi zoom halaman manual standar atau cubit untuk zoom.