Bu Kural Ne Anlama Gelir

WCAG 1.4.4, metnin standart tarayıcı mekanizmaları kullanılarak orijinal boyutunun %200'üne kadar büyütülebilmesini ve bu sırada içerik veya işlevsellik kaybı yaşanmamasını gerektirir. Kullanıcılar tarayıcılarında yakınlaştırma yapabilmeli veya metin boyutunu ayarlayabilmeli ve sayfa düzgün çalışmaya devam etmelidir — kırpılmış metin, üst üste binen öğeler veya gizlenen kontroller olmamalıdır.

Bu ölçüt özellikle tarayıcı düzeyinde yakınlaştırma ve metin boyutu ayarlamalarına odaklanır, yardımcı teknoloji büyütmesine değil. Kullanıcı Ctrl+Plus (veya Cmd+Plus) ile %200 yakınlaştırma yaptığında sayfa işlevsel kalmalıdır.

Neden Önemlidir

Az gören birçok kullanıcı, birincil uyumlaştırma olarak tarayıcı yakınlaştırmasına güvenir. Ekran büyüteçlerinden farklı olarak tarayıcı yakınlaştırma ücretsizdir, yerleşiktir ve kurulum gerektirmez. Bir web sitesi yakınlaştırmayı engeller veya %200'de bozulursa, bu kullanıcılar içeriği okuma becerisini kaybeder.

Görme bozukluğu olan mobil kullanıcılar, viewport meta etiketleri parmakla yakınlaştırmayı devre dışı bıraktığında özellikle etkilenir. Bu, erişilebilirlik gereksinimleriyle doğrudan çelişen yaygın bir duyarlı tasarım kalıbıdır.

İlgili axe-core Kuralları

meta-viewport — Viewport meta etiketinin maximum-scale değerini 2'den küçük ayarladığı veya user-scalable=no olarak belirlediği sayfaları işaretler.
meta-viewport-large — maximum-scale değerinin 5'ten küçük ayarlandığı sayfaları işaretler; bu doğrudan bir WCAG hatası olmasa da %200'den fazla yakınlaştırma ihtiyaçı olan kullanıcıları kısıtlar.

Nasıl Test Edilir

Sayfayı masaüstü tarayıcısında açın ve Ctrl+Plus (Mac'te Cmd+Plus) ile %200 yakınlaştırın.
Tüm metin içeriğinin hâlâ görünür olduğunu ve hiçbir metnin kırpılmadığını veya diğer öğelerin arkasında gizlenmediğini doğrulayın.
Tüm etkileşimli kontrollerin hâlâ kullanılabilir olduğunu ve işlevsellik kaybı olmadığını sağlayın.
Sayfanın yatay kaydırma gerektirmek yerine içeriği yeniden akıttığını kontrol edin.
<meta name="viewport"> etiketini inceleyin. user-scalable=no veya 2'den küçük maximum-scale içermemelidir.

Nasıl Düzeltilir

Yakınlaştırmaya izin veren doğru bir viewport meta etiketi ile başlayın:

<!-- Doğru: yakınlaştırmaya izin verir -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Yanlış: yakınlaştırmayı engeller -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Metnin tarayıcı ayarlarıyla ölçeklenmesi için göreceli birimler kullanın:

/* Tutarlı ölçekleme için rem kullanın */
body {
  font-size: 1rem; /* Varsayılan 16px, tarayıcıyla ölçeklenir */
}

h1 { font-size: 2rem; }    /* Varsayılanda 32px */
h2 { font-size: 1.5rem; }  /* Varsayılanda 24px */
p  { font-size: 1rem; }    /* Varsayılanda 16px */

/* Metin için sabit piksel boyutlarından kaçının */
/* Kötü: p { font-size: 14px; } */

/* Bileşene göre boyutlandırma için em kullanın */
.card-title {
  font-size: 1.25em;
}

Kapsayıcıların daha büyük metni barındıracak şekilde genişlediğinden emin olun:

.content-box {
  /* Sabit yükseklik yerine minimum yükseklik kullanın */
  min-height: 200px;
  /* height: 200px; <-- Daha büyük boyutlarda metni kırpar */

  /* Metin kapsayıcılarında overflow: hidden kullanmaktan kaçının */
  overflow: visible;
}

.nav-item {
  /* Sabit genişlik yerine sarmalamaya izin verin */
  white-space: normal;
  /* white-space: nowrap; <-- Kırpılmaya neden olur */
}

Sık Yapılan Hatalar

Mobilde parmakla yakınlaştırmayı engellemek için viewport meta etiketinde user-scalable=no veya maximum-scale=1 ayarlamak.
Metin içeren kapsayıcılarda sabit piksel yüksekliği kullanmak; daha büyük metin boyutlarında taşma kırpmasına neden olur.
Yazı boyutlarını rem veya em yerine px ile ayarlamak; metnin tarayıcı ayarlarıyla ölçeklenmesini engeller.
Metin büyütüldüğünde taşan veya bozulan, menü öğelerini gizleyen gezinme çubukları.
Metin boyutu arttığında diğer içerikle örtüşen mutlak konumlandırılmış metin öğeleri.

1.4.4 Metin Boyutlandırma