İşletim Sistemi Metin Ölçeğine Uyma

Web özellikleri: <meta name="text-scale">

Genel Bakış

Görme engelli kullanıcılar genellikle metin ölçeklendirmeyi işletim sistemi düzeyinde yapılandırır (ör. iOS'te Dinamik Tür veya Android/ChromeOS'te Yazı Tipi Boyutu ölçeklendirme). Mobil tarayıcılar, eski ve sabit pikselli web sitelerinin görsel olarak bozulmasını önlemek için varsayılan olarak bu işletim sistemi düzeyindeki erişilebilirlik ayarlarını yoksayar.

Sayfanızı statik tutmak veya özel, hassas JavaScript düzen hesaplamalarına güvenmek yerine <meta name="text-scale"> etiketini kullanarak yerel işletim sistemi metin ölçeklendirmesini etkinleştirin. Etkin olduğunda tarayıcı, kök yazı tipi boyutunu (1rem) kullanıcının OS tercihine uyacak şekilde dinamik olarak ölçeklendirir. Böylece tüm göreceli (rem/em) yazı tipi boyutları, düzenler ve boşluklar otomatik olarak ve düzgün bir şekilde ölçeklendirilir.

Uygulama

1. İşletim Sistemi Metin Ölçeklendirmeyi Etkinleştirme

<meta name="text-scale"> öğesini dokümanınızın <head> öğesinin içine yerleştirin. Bu, destekleyen tarayıcılara düzeninizin modern, uyarlanabilir ve ölçeklendirme için güvenli olduğunu bildirir:

<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. Göreli Tipografi ve Boşluk Kullanma

Yazı tipi boyutlarını sabit piksel (px) yerine göreli birimler (rem veya em) kullanarak tanımlayın. Satır yükseklikleri için birimsiz değerler kullanın. Böylece her öğenin hesaplanan yazı tipi boyutuyla orantılı olarak ölçeklendirilirler.

Boşluğun metin boyutuna bağlı olduğu veya metin ölçeklendirilirken uyarlanması gereken kenar boşlukları ve dolgular için göreceli birimler kullanın. Metinden bağımsız boşluklar, ölçeklendirmenin metin kırpılmasına, çakışmaya, içerik kaybına veya kullanılamaz bir düzene neden olmaması koşuluyla, uygun olduğunda sabit birimler kullanabilir:

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;
}

body öğesinde temel metin boyutunu yalnızca tasarımın devralınan tarayıcı varsayılanından farklı bir boyuta ihtiyacı olduğunda ayarlayın. Aksi takdirde, devralınmasına izin verin. Başlıklar gibi belirli öğelerin boyutlarını rem veya em gibi göreceli birimlerle ayarlayın. Kök yazı tipi boyutuna göre bir boyut için rem, boyutun üst öğenin yazı tipi boyutuna bağlı olması gerektiğinde ise em kullanın. :root veya html için özel yazı tipi boyutu ayarlamayın.

Akışkan Tipografi

Akıcı tipografi, yazı tipi boyutlarının rem veya em gibi yazı tipine göre değişen bir bileşen içermesi koşuluyla vw gibi görüntü alanına göre değişen birimler KULLANABİLİR. Kapsayıcı sorgu birimleri ve clamp() dahil olmak üzere daha fazla akıcı ölçeklendirme tekniği için Akıcı Ölçeklendirme başlıklı makaleyi inceleyin.

Metni yalnızca görüntü alanı birimleriyle boyutlandırmaktan kaçının:

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

Bunun yerine, yazı tipine göre değeri görüntü alanına göre ölçeklendirmeyle birleştirin ve göreli minimum ve maksimum sınırları kullanın:

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

Metnin, içerik veya işlev kaybı olmadan varsayılan boyutunun en az% 200'üne kadar yeniden boyutlandırılabildiğini test edin. Akıcı tipografide, maksimum yazı tipi boyutunun minimum yazı tipi boyutunun 2,5 katından fazla olmaması genel bir kuraldır. Ayrıca, 320 CSS piksel görüntü alanı genişliğinde (1280 CSS piksel genişliğindeki bir görüntü alanından% 400 yakınlaştırmaya eşdeğer) yeniden akışı test edin. İçerik, gerekli olduğu durumlar dışında iki boyutlu kaydırma olmadan kullanılabilir OLMALIDIR.

3. Ölçeklenebilir Duyarlı Kesme Noktaları Kullanma

Duyarlı kesme noktaları, metnin varsayılan boyutunda kalacağını varsaymamalıdır. Bir kesme noktasının metin için kullanılabilir alana yanıt vermesi amaçlandığında, sabit piksel eşikleri yerine içeriğe dayalı düzenleri, kapsayıcı sorgularını veya em tabanlı medya sorgularını tercih edin.

İşletim sistemi metin ölçeklendirme ve tarayıcı yakınlaştırma özellikleri etkinleştirilmiş şekilde duyarlı düzenleri test edin. Metin okunabilir, içerik ise görünür olmalıdır. Çakışma, kırpma veya yatay kaydırma OLMAMALIDIR.

4. İçerik sarmalama ve esnek yükseklikler sağlama

Metin büyüdüğünde, öğelerin kesilmesini veya üst üste binmesini önlemek için daha fazla dikey ve yatay alan gerekir. Bileşenlerinizin sağlam kalması için düzenlerinizi katı koordinatlara zorlamak yerine içeriğin etrafında dinamik olarak genişleyecek şekilde tasarlayın:

  • Metin kapsayıcılarının büyümesine izin verin: Metin içeren bileşenler ve kapsayıcılar, ölçeklendirilmiş metni sığdıracak şekilde büyüyebilmelidir. Kırpma veya taşmaya neden olabilecek sabit height ya da block-size değerlerinden ve kısıtlayıcı max-height veya max-block-size değerlerinden kaçının. İçeriğe dayalı boyutlandırmayı tercih edin. min-height veya min-block-size değerlerini yalnızca minimum boyut gerektiğinde kullanın.
  • Doğal Kaydırmaya İzin Ver: Cümle içeren bloklarda satır içi eksen metin kaydırmayı white-space: nowrap ile kısıtlamayın. Metnin yeni satırlara doğal bir şekilde kaydırılmasına izin verin.
  • Esnek Flexbox ve Grid sarmalama kullanın (İsteğe bağlı örnek): Çok sütunlu kart galerilerinde, göreceli genişlik eşikleri aşılırsa öğelerin dikey olarak yığılması için repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) gibi yeniden akış sütunları kullanın:
/* 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. Kök yazı tipi boyutunu geçersiz kılmayın

<meta name="text-scale" content="scale"> öğesi aracılığıyla etkinleştirirken stil sayfanızda kök font-size öğesini açıkça AYARLAMAYIN. Bu, :root veya html ile ilgili beyanları içerir ve mutlak birimler, göreceli birimler ve hesaplanan değerler için geçerlidir.

Örneğin, kök yazı tipi boyutunu sabit bir değerle geçersiz kılmayın:

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

İşletim sistemi metin ölçeklendirmesini manuel olarak uygulamak için <meta name="text-scale" content="scale"> etkinleştirme seçeneğini env(preferred-text-scale) ile birleştirmeyin. Tarayıcı, ölçeği meta etkinleştirme aracılığıyla uygular. Bu nedenle, her ikisinin de kullanılması iki kez ölçeklendirmeye neden olabilir:

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

Kök yazı tipi boyutunu tarayıcıya bırakın. Tarayıcı, işletim sistemi metin ölçeğini otomatik olarak işler ve kök yazı tipi boyutuna göre boyutlandırılmış içeriğe uygular.

Yedek Stratejiler

<meta name="text-scale" content="scale"> özelliğinin desteklenmediği tarayıcılarda düzen düzgün bir şekilde bozulur. Sayfa, düzeni tarayıcının standart varsayılan temel yazı tipi boyutunda (genellikle 16 piksel) gösterir ve kullanıcı standart manuel sayfa yakınlaştırma veya sıkıştırarak yakınlaştırma seçeneklerini kullanmaya devam edebilir.