WCAG 1.4.4: Metni Yeniden Boyutlandır

Bu Kuralın Anlamı

WCAG 1.4.4 Metni Yeniden Boyutlandırma (Seviye AA), metnin yardımcı teknoloji kullanılmadan ve içerik ya da işlevsellik kaybı olmadan %200’e kadar yeniden boyutlandırılabilir olmasını şart koşar. Basitçe ifade etmek gerekirse, bir kullanıcı tarayıcısını %200’e yakınlaştırdığında veya tarayıcı ya da işletim sistemi ayarları üzerinden temel yazı tipi boyutunu büyüttüğünde, sayfadaki tüm metin okunabilir kalmalı ve tüm işlevsellik eksiksiz çalışmaya devam etmelidir.

Bu ölçüt, bir web sayfasında görüntülenen tüm metinlere geniş biçimde uygulanır; gövde metni, başlıklar, etiketler, buton metinleri, form alanlarının içindeki yer tutucu metinler, gezinme bağlantıları, tablo içerikleri ve altyazılar buna dahildir. Bir logonun veya marka adının parçası olan metne ya da hiçbir bilgi iletmeyen ve yalnızca görsel içerik olarak sunulan süsleyici metne (örneğin, erişilebilir içerik metnin kendisi değil de yalnızca taranmış bir el yazısı not fotoğrafı olduğunda) uygulanmaz.

Başarılı sayılmak için, %200 yakınlaştırmada — ister tarayıcının yerleşik sayfa yakınlaştırması (Ctrl/Cmd + artı tuşu veya Görünüm > Yakınlaştır menüsü) ister tarayıcının asgari yazı tipi boyutu ayarı kullanılarak elde edilsin — şu koşulların sağlanması gerekir: hiçbir metin, bulunduğu kap tarafından kırpılmamalı veya gizlenmemeli, hiçbir metin başka metinlerle ya da etkileşimli öğelerle üst üste binmemeli, tam görünüm alanı genişliğinde yatay kaydırma çubuğu görünmemeli (haritalar veya veri tabloları gibi gerçekten iki boyutlu kaydırma gerektiren içerikler hariç) ve tüm etkileşimli kontroller kullanılabilir durumda kalmalıdır.

Başarısızlık, sabit piksel değerlerinin metni büyüyemeyeceği bir boyuta kilitlediği durumlarda, kapların taşan metni kırpan sabit yükseklikler kullandığı durumlarda, görünüm alanı meta etiketlerinin mobilde sıkıştırarak yakınlaştırmayı engellemek için user-scalable=no veya maximum-scale=1.0 kullandığı durumlarda ya da JavaScript’in ölçeklemeyi engellemek için yakınlaştırma hareketlerini yakaladığı durumlarda kaydedilir. Ölçüt, açıkça teknoloji bağımsızdır: uygulama CSS, SVG metni veya canvas üzerinde oluşturulan metin kullanıyor olsun, önemli olan kullanıcı için ortaya çıkan sonuçtur. SVG metnin ve canvas üzerinde oluşturulan metnin doğası gereği yeniden boyutlandırılmasının zor olduğunu ve genellikle ek mühendislik dikkati gerektirdiğini unutmayın.

Neden Önemlidir

Dünya Sağlık Örgütü’ne göre dünya genelinde yaklaşık 2,2 milyar insanın bir tür görme bozukluğu vardır. Bunların çok büyük bir kısmı, görmenin gözlük veya kontakt lensle tam olarak düzeltilemediği ancak kişinin tamamen kör olmadığı düşük görme durumunu yaşar. Düşük görme sahibi kullanıcılar, tarayıcı yakınlaştırmasını rutin olarak %150, %200 veya daha yüksek değerlere ayarlar ya da işletim sistemlerini metni daha büyük bir temel boyutta gösterecek şekilde yapılandırırlar. Web siteleri bu davranışı engellediğinde veya bozduğunda, bu kullanıcılar içerikten tamamen dışlanmış olur.

Teşhis edilmiş düşük görmenin ötesinde, durumsal faktörler neredeyse her internet kullanıcısını bir noktada etkiler: küçük ekranlar, parlak güneş ışığı, yorgunluk, yaşa bağlı görme değişiklikleri veya yabancı bir dilde okuma, küçük metnin anlaşılmasını zorlaştırabilir. Özellikle yaşlı yetişkinler — hem dünya genelinde hem de Türkiye’de hızla büyüyen bir demografik grup — çoğu zaman özel yardımcı teknolojilere başvurmadan önce, birinci basamak erişilebilirlik uyarlaması olarak yakınlaştırmaya güvenirler.

Somut bir senaryo düşünün: Altmışlı yaşlarında bir hasta, akıllı telefonundan bir hastane portalındaki çevrimiçi randevu onayını okumaya çalışıyor. Hastanenin mobil stil sayfası, gövde yazı tipi boyutunu sabit bir piksel değeri kullanarak 12px olarak ayarlamış ve görünüm alanı meta etiketi maximum-scale=1.0 içeriyor. Hasta sıkıştırarak yakınlaştırma yapmaya çalışıyor ancak arayüz kilitleniyor. Tarihi veya bölüm adını yeterince net okuyamıyor ve emin olamıyor. Hastane yardım masasını arıyor, bu da personel zamanını tüketiyor ve hasta için kaygı yaratıyor — ölçüt karşılansaydı tamamen önlenebilir bir sonuç.

Salt ticari açıdan bakıldığında, erişilebilir metin boyutlandırma, tüm kullanıcılara fayda sağlayan daha geniş kullanılabilirlik iyileştirmeleriyle ilişkilidir. Arama motorları da, normal ve büyütülmüş boyutlarda okunabilir metin sunan siteleri ödüllendirir; çünkü Googlebot, Core Web Vitals ve sayfa deneyimi sıralama faktörlerinin bir parçası olarak okunabilirlik sinyallerini değerlendirir. Yeniden boyutlandırma sorunlarını gidermek bu nedenle aynı anda SEO’yu iyileştirir, destek yükünü azaltır ve potansiyel kitleyi genişletir.

İlgili Axe-core Kuralları

WCAG 1.4.4 öncelikle manuel test gerektiren bir ölçüttür. Otomatik araçlar, metin yeniden boyutlandırmayı engellediği bilinen dar bir koşul kümesini işaretleyebilir, ancak %200 yakınlaştırmada tüm yerleşim sonuçlarını güvenilir biçimde simüle edip değerlendiremezler. Otomatik araçların tespit etmeye çalıştığı ve manuel takip gerektiren koşullar şunlardır:

• yakınlaştırmayı engelleyen viewport meta etiketi (manuel kontrol gerekli): Axe-core, user-scalable=no veya maximum-scale değerini 1.0 veya daha düşük bir değere ayarlayan herhangi bir <meta name='viewport'> etiketini işaretleyen meta-viewport kuralını içerir. Bu, ihlalin bildirime dayalı olduğu ve yerleşim sonucuna bağlı olmadığı tek tam otomatik tespit senaryosudur. Ancak, bu kural bile bir sitenin yakınlaştırmayı programatik olarak engellemek için JavaScript kullanıp kullanmadığını belirleyemez; bu nedenle her zaman manuel doğrulama gerekir.
• Piksel cinsinden sabit yazı tipi boyutları (manuel kontrol gerekli): Otomatik araçlar, CSS font-size değerleri göreli birimler (em, rem, % veya görünüm alanına göre birimler) yerine mutlak piksel birimlerinde (px) ayarlandığında bunu raporlayabilir. Ancak modern tarayıcılar, kullanıcı tarayıcı varsayılan yazı tipi boyutunu değiştirdiğinde mutlak piksel yazı tipi boyutlarını geçersiz kılar; bu nedenle tek başına piksel değeri, garantili bir başarısızlık anlamına gelmez — bu, tarayıcı davranışına ve sitenin font-size kalıtımına saygı gösterip göstermediğine bağlıdır. Gerçek bir başarısızlığı doğrulamak için hesaplanmış stillerin manuel incelenmesi ve görsel doğrulama gerekir.
• %200 yakınlaştırmada içerik taşması ve kırpılması (yalnızca manuel): Hiçbir otomatik araç, bir sayfayı %200’de güvenilir biçimde işleyip tüm metnin görünür kalıp kalmadığını ve tüm etkileşimli öğelerin kullanılabilir olup olmadığını değerlendiremez. Bu, bir insan testçinin tarayıcı yakınlaştırma seviyesini ayarlamasını, sayfayı kaydırmasını ve her içerik alanını doğrulamasını gerektirir. Otomatik araçların yakınlaştırma sonrası işlenmiş duruma erişimi yoktur.
• Görsellerde ve canvas üzerinde metin (yalnızca manuel): Raster görsellere gömülü metin (<img> etiketleri içinde metin ekran görüntüleri) veya bir <canvas> öğesi üzerine çizilen metin, tarayıcı tarafından hiç yeniden boyutlandırılamaz. Otomatik araçlar, manuel inceleme için canvas öğelerinin varlığını işaretleyebilir, ancak bu canvas öğelerinin kullanıcının okuması gereken anlamlı metin içerip içermediğini belirleyemez.

Nasıl Test Edilir

1. Önce otomatik bir tarama çalıştırın. Sayfayı Chrome veya Firefox’ta açın ve axe DevTools (tarayıcı eklentisi) veya Lighthouse’u (Chrome DevTools, Lighthouse sekmesi) çalıştırın. Özellikle meta-viewport kuralı ihlaline bakın. İşaretlenmişse, bunu kritik bir başarısızlık olarak not edin. Ayrıca axe en iyi uygulamalar uyarılarında görünen px birimindeki font-size bildirimleri için CSS denetimini kontrol edin.
2. Kaynakta viewport meta etiketini kontrol edin. DevTools’u (F12) açın, Öğeler sekmesine gidin ve meta name='viewport' ifadesini arayın. content özniteliğini dikkatle okuyun. user-scalable=no, user-scalable=0 veya maximum-scale=1 (veya 2’den küçük herhangi bir değer) içeriyorsa, bu doğrudan 1.4.4 ihlalidir.
3. Tarayıcı yakınlaştırmasını %200’e ayarlayın. Chrome veya Firefox’ta, tarayıcı yakınlaştırma göstergesi %200’ü gösterene kadar Ctrl + Artı (Windows/Linux) veya Cmd + Artı (macOS) tuşlarına art arda basın. Alternatif olarak, Görünüm > Yakınlaştır menüsüne gidin. macOS Safari’de Görünüm > Yakınlaştır’ı kullanın. Bu test için işletim sistemi düzeyinde ekran ölçeklendirmesini kullanmayın — özellikle tarayıcı yakınlaştırmasını kullanın.
4. %200 yakınlaştırmada sayfanın her bölümünü kaydırarak inceleyin. Sistematik olarak yukarıdan aşağıya kaydırın. Şunlara bakın: kabı tarafından kesilen veya gizlenen metin, kutusundan taşarak bitişik içerikle üst üste binen metin, girdilerinin arkasında kaybolan form etiketleri, metni kesilen butonlar, ekran dışına taşan ve görünüm alanına kaydırılamayan açılır menüler ve görünüm alanını aşan ve kaydırılamayan modal iletişim kutuları.
5. %200 yakınlaştırmada tüm etkileşimli işlevselliği test edin. Tüm gezinme menülerini etkinleştirin, tüm modalları açın, formları gönderin, araç ipuçlarını ve açılır pencereleri tetikleyin ve varsa karuseller veya akordeonlarla etkileşime geçin. Bunların yalnızca görsel olarak mevcut değil, tamamen kullanılabilir durumda kaldığını doğrulayın.
6. NVDA + Firefox (Windows) ile test edin. NVDA’yı etkinleştirin ve Firefox’u %200 yakınlaştırmada açın. Sekme ve ok tuşlarını kullanarak gezin. Odaklanabilir öğelerin odak alabildiğini, odak göstergelerinin görünür olduğunu (WCAG 2.4.7 ile örtüşür, ancak kontrol etmek faydalıdır) ve okuma sırasının büyütülmüş boyutta görsel sırayla eşleştiğini doğrulayın.
7. VoiceOver + Safari (macOS/iOS) ile test edin. VoiceOver’ı etkinleştirin. iOS’ta Ayarlar > Erişilebilirlik > Ekran ve Metin Boyutu’na gidin ve Daha Büyük Metin’i etkinleştirin. Aynı sayfada gezinerek içerik bütünlüğünü doğrulayın. Ayrıca sıkıştırarak yakınlaştırma hareketini kullanarak bunun engellenmediğini teyit edin.
8. Tarayıcı asgari yazı tipi boyutu ayarını test edin. Firefox’ta Ayarlar > Genel > Yazı Tipleri ve Renkler’e gidin ve asgari yazı tipi boyutunu 24px olarak ayarlayın. Sayfayı yeniden yükleyin ve tüm metnin bu asgari değeri karşıladığını ve yerleşimin bozulmadığını doğrulayın. Bu, aynı ölçütün farklı bir vektörünü test eder.
9. JAWS + Chrome (Windows) ile test edin. Sayfayı Chrome’da %200 yakınlaştırmada JAWS etkin durumdayken açın. JAWS okuma komutlarını (imleçten itibaren okumak için Insert + Aşağı Ok) kullanarak tüm metin içeriğinin seslendirildiğini ve taşma kırpması nedeniyle hiçbir içeriğin atlanmadığını doğrulayın.

Nasıl Düzeltilir

Yakınlaştırmayı engelleyen viewport meta etiketi — Hatalı

<!-- WRONG: user-scalable=no prevents pinch-to-zoom on mobile,
     directly violating WCAG 1.4.4 -->
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>

Yakınlaştırmayı engelleyen viewport meta etiketi — Doğru

<!-- CORRECT: Remove user-scalable=no and do not cap maximum-scale below 2.
     Allowing zoom to at least 2 (200%) satisfies WCAG 1.4.4. -->
<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Sabit piksel yazı tipi boyutları — Hatalı

<!-- WRONG: font-size in px ignores the user's browser font-size preference.
     If the user sets a larger default, px values override that preference. -->
<style>
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }
  .caption {
    font-size: 11px;
  }
</style>
<p>Your appointment is confirmed.</p>

Sabit piksel yazı tipi boyutları — Doğru

<!-- CORRECT: Use rem units relative to the root font size (typically 16px browser default).
     1rem = 16px by default, but scales with user preference.
     Setting font-size on :root in % rather than px also respects user settings. -->
<style>
  :root {
    font-size: 100%; /* inherits browser default, typically 16px */
  }
  body {
    font-size: 0.875rem; /* ~14px at default, but scales with user preference */
  }
  h1 {
    font-size: 1.5rem; /* ~24px at default */
  }
  .caption {
    font-size: 0.75rem; /* ~12px at default — still scalable */
  }
</style>
<p>Your appointment is confirmed.</p>

Metni kırpan sabit yükseklikte kaplar — Hatalı

<!-- WRONG: A fixed height with overflow:hidden will clip enlarged text.
     At 200% zoom, the text grows but the box does not, hiding content. -->
<style>
  .card {
    height: 120px;
    overflow: hidden;
  }
</style>
<div class='card'>
  <h2>Flight Confirmation</h2>
  <p>Your flight TK0001 to Istanbul departs at 09:30 on 15 July 2025. Gate B12.</p>
</div>

Metni kırpan sabit yükseklikte kaplar — Doğru

<!-- CORRECT: Use min-height instead of height so the container grows
     with the content when text is enlarged. -->
<style>
  .card {
    min-height: 7.5rem; /* sets a minimum but allows growth */
    overflow: visible; /* or remove overflow:hidden entirely */
  }
</style>
<div class='card'>
  <h2>Flight Confirmation</h2>
  <p>Your flight TK0001 to Istanbul departs at 09:30 on 15 July 2025. Gate B12.</p>
</div>

Görsellere gömülü metin — Hatalı

<!-- WRONG: A banner image containing text cannot be resized by the browser.
     Even with alt text, the visual text is inaccessible at high zoom levels. -->
<img src='promo-banner-with-text.jpg' alt='50% indirim — sadece bu hafta sonu'>

Görsellere gömülü metin — Doğru

<!-- CORRECT: Use real HTML text over a background image so the browser
     can resize it. The image is decorative background; text is live HTML. -->
<div class='promo-banner' role='region' aria-label='Promosyon'>
  <p class='promo-text'>50% İndirim &mdash; Sadece Bu Hafta Sonu</p>
</div>
<!-- CSS sets the background image on .promo-banner, while .promo-text
     uses rem font-size and contrasts safely against the background. -->

Yaygın Hatalar

• Mobilde “yerleşim bozulmasını” önlemek için viewport meta etiketine user-scalable=no eklemek — bu, 1.4.4’ün doğrudan ve test edilebilir bir ihlalidir ve asla kullanılmamalıdır. Kullanıcının yakınlaştırma yapma yeteneğini bastırmak yerine yerleşimi düzeltin.
• maximum-scale=1.0 veya 2.0’ın altındaki herhangi bir değeri ayarlamak — user-scalable=no olmasa bile, yakınlaştırmayı 1.0 veya 1.5’te sınırlandırmak, kullanıcıların %200’e ulaşmasını engeller ve ölçütü karşılamaz.
• JavaScript olay dinleyicilerini kullanarak sıkıştırarak yakınlaştırma veya tekerlek olaylarında event.preventDefault() çağırmak — yerel yakınlaştırmayı programatik olarak engellemek, işlevsel olarak viewport meta etiketi yaklaşımıyla eşdeğerdir ve aynı ölçütü ihlal eder.
• <html> veya <body> öğesinde font-size’ı piksel cinsinden ayarlayıp diğer her şey için em birimlerini kullanmak — kök yazı tipi boyutu px cinsinden sabitlenmişse, tüm em/rem alt öğeleri de fiilen sabitlenmiş olur ve kullanıcının tarayıcı yazı tipi boyutu tercihine yanıt vermez.
• Kart bileşenlerinde, kenar çubuklarında veya modal gövdelerinde min-height yerine height kullanmak — %200 yakınlaştırmada, büyütülmüş metin sabit yükseklikte kutulardan taşar ve overflow: hidden tarafından kırpılır, kritik içeriği gizler.
• Önemli metni yalnızca <canvas> öğeleri içine yerleştirmek — canvas üzerinde oluşturulan metin, rasterleştirilmiş bir bitmap’tir ve tarayıcının metin yeniden boyutlandırma veya yakınlaştırma mekanizmalarıyla ölçeklenemez. Kullanıcının okuması gereken anlamlı metin, gerçek HTML metni olarak veya en azından erişilebilir alternatif metin olarak sunulmalıdır.
• Mutlak koordinatlara ve viewBox ölçeklemesi olmayan SVG <text> öğeleri kullanmak — SVG, bir viewBox kullandığında ve göreli birimlerle boyutlandırıldığında ölçeklenebilir olabilir, ancak sabit width ve height değerlerine sahip bir SVG içinde piksel cinsinden sabit x, y, font-size öznitelikleriyle tanımlanan SVG metin, tüm tarayıcılarda tarayıcı yakınlaştırmasıyla yeniden boyutlandırılmaz.
• Tarayıcı yakınlaştırmasının ölçütü otomatik olarak karşıladığını varsaymak ve manuel testten kaçınmak — tarayıcı yakınlaştırması, görüntüler ve yerleşim dahil tüm sayfayı ölçeklendirir, ancak zaten %100’de çok küçük, kırpılmış veya üst üste binen metin, %200’de daha büyük bir sorun haline gelir. Yakınlaştırma seviyesinde manuel doğrulama her zaman gereklidir.
• Üçüncü taraf gömülü bileşenleri test etmeyi unutmak — sohbet bileşenleri, ödeme iframe’leri, çerez onay bantları ve analitik bindirmeleri çoğu zaman üçüncü taraflarca sabit px boyutları kullanılarak geliştirilir ve yakınlaştırmayı engelleyebilir. Kod üçüncü tarafa ait olsa bile, ölçüt kullanıcıya sunulan tüm sayfa için geçerlidir.
• Masaüstü yerleşimini yakınlaştırma için düzeltip mobil kırılma noktasını ihmal etmek — birçok ekip masaüstünde yakınlaştırmayı test eder ve başarı ilan eder, ancak %200 yakınlaştırmadaki mobil görünüm alanları, özellikle sabit piksel yüksekliklerine dayanan gezinme menüleri, sabit başlıklar ve alt gezinme çubukları için ayrı bir yerleşim zorlukları kümesi sunar.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

21 Haziran 2025’te 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi 2025/10, Türkiye’de faaliyet gösteren belirli kuruluşlar için zorunlu web ve mobil erişilebilirlik gereklilikleri getirir. Genelge, uluslararası alanda tanınan erişilebilirlik standartlarına atıfta bulunur — fiilen Türk gerekliliklerini uyum ölçütü olarak WCAG 2.1 ve WCAG 2.2 Seviye AA ile hizalar.

WCAG 1.4.4 Metni Yeniden Boyutlandırma, Seviye AA ölçütüdür ve Seviye AA uyumu, Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen Erişilebilirlik Logosu’nu elde etmek için gereken eşiktir. Erişilebilirlik Logosu hem kamusal bir güven işareti hem de düzenleyici bir kontrol noktasıdır — genelgeye tabi olup logoyu göstermek veya denetçilere uyumlarını kanıtlamak isteyen kuruluşlar, 1.4.4 dahil tüm Seviye AA ölçütlerini karşılamak zorundadır.

Cumhurbaşkanlığı Genelgesi 2025/10 kapsamındaki kuruluş kategorileri şunları içerir: tüm idari kademelerdeki kamu kurum ve kuruluşları; e-ticaret platformları ve çevrimiçi pazar yerleri; Bankacılık Düzenleme ve Denetleme Kurumu (BDDK) tarafından düzenlenen bankalar ve finansal hizmet sağlayıcıları; dijital hasta odaklı hizmetleri olan hastaneler, sağlık merkezleri ve diğer sağlık kuruluşları; 200.000 veya daha fazla abonesi olan telekomünikasyon işletmecileri; seyahat acenteleri ve çevrimiçi seyahat platformları; dijital biletleme veya rezervasyon hizmeti sunan özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar ve eğitim kurumları.

Bu kuruluş türlerinin her biri için 1.4.4’ün pratik etkisi önemlidir. Mobilde sıkıştırarak yakınlaştırmayı engelleyen bir bankanın çevrimiçi bankacılık portalı, yalnızca bir kullanılabilirlik hatası değildir — aynı zamanda denetim bulgularına veya Erişilebilirlik Logosu programından dışlanmaya yol açabilecek bir düzenleyici uyumsuzluktur. Sabit piksel yazı tipi boyutlarını kırpıcı kaplar içinde kullanan bir hastane randevu alma sistemi, düşük görme sahibi hastalara hizmet veremediği gibi, genelge kapsamındaki yükümlülüklerini de yerine getiremez. Metni ölçeklenebilir HTML metni yerine görsellere gömen bir özel okul kayıt platformu da benzer şekilde uyumsuzdur.

Kuruluşlar, WCAG 1.4.4’ü dar bir teknik onay kutusu olarak değil, görme bozukluğu olan kullanıcılara saygının asgari bir beklentisi olarak ele almalıdır — bu, Türk hukukunun, uluslararası en iyi uygulamaların ve temel kullanılabilirliğin kesiştiği bir beklentidir. Accsible’ın örtü SDK’sı, son kullanıcıların metin boyutunu tarayıcı yakınlaştırmasından bağımsız olarak artırmasına olanak tanıyan yapılandırılabilir yazı tipi ölçeklendirme kontrolleri sağlayarak metin yeniden boyutlandırma uyumluluğunu destekler; bu da sitelerin kendilerinin uygulamak zorunda olduğu asgari gerekliliklerin üzerine ek bir uyum katmanı sunar.