Metin Boyutunu Değiştirme

Kısaca

Az gören pek çok kişi ekran okuyucu kullanmaz. Metni tarayıcı yakınlaştırmasıyla, telefonlarının daha büyük metin ayarıyla ya da sistemdeki bir metin boyutu ayarıyla büyütür. Bunu yaptıklarında sayfa bozuluyorsa, yani metin kesiliyor, kutular üst üste biniyor ve düğmeler kayboluyorsa onu kullanamazlar.

Bu kriter, metnin yardımcı teknoloji olmadan %200'e kadar büyütülebilmesini ve bunun içerik ya da işlev kaybına yol açmamasını ister. Altyazılar ve metin görselleri istisnadır.

Neleri kapsar?

• Yeniden boyutlandırma: Kullanıcı metni, platformun sunduğu yollarla büyütür; örneğin tarayıcı yakınlaştırması, yalnızca metin yakınlaştırması ya da sistemdeki büyük metin ayarı.
• Yüzde 200: %200'de her şey hâlâ çalışır. Hiçbir şey kesilmez, gizlenmez ya da üst üste binmez ve her kontrol kullanılabilir kalır.
• Web: Yakınlaştırmayı engellemeyin. Göreli birimler ve esnek kapsayıcılar kullanın; metin içeren öğelerin yüksekliğini sabitlemeyin.
• Mobil: iOS'taki Dynamic Type ve Android'deki yazı tipi ölçeği gibi sistem metin boyutu ayarını destekleyin.
• İstisnalar: Altyazılar ve metin görselleri.
• Kapsam dışı notlar: İçeriğin %400'de ve 320 px genişlikte yeniden akışı 1.4.10 kapsamındadır. Metin aralığı 1.4.12 kriterinin konusudur.

Kimleri etkiler?

Metni ekran okuyucu olmadan büyüten az gören kişiler. Yaşlı kullanıcılar. Küçük ekranları kötü koşullarda okuyanlar. Daha büyük metni tercih edebilen disleksili kişiler. Küçük bir yazı tipini okumak için yakınlaştıran herkes.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Büyütülebilen metin, "algılanabilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.4.4'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 1.4.4 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır. AA düzeyinde bir kriterdir.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Yakınlaştırmayı engellemeyin

Yakınlaştırmayı devre dışı bırakan bir viewport, az gören kişilerin telefonda metni büyütmesini engeller.

<meta name="viewport"
      content="width=device-width, initial-scale=1,
               maximum-scale=1, user-scalable=no">

<meta name="viewport"
      content="width=device-width, initial-scale=1">

2. Göreli birimler

Metin için piksel boyutları kullanıcının varsayılan yazı tipi boyutunu izlemez. Göreli birimler izler.

body { font-size: 14px; }
h1   { font-size: 24px; }

body { font-size: 1rem; }
h1   { font-size: 1.75rem; }

3. Metin kapsayıcılarının yüksekliğini sabitlemeyin

Sabit yükseklik büyütülmüş metni keser. Bir minimum yükseklik kullanın ve içeriğin büyümesine izin verin.

.kart { height: 120px; overflow: hidden; }

.kart { min-height: 120px; }

4. Birimsiz satır yüksekliği

Piksel cinsinden sabit bir satır yüksekliği metinle birlikte büyümez.

p { font-size: 1rem; line-height: 20px; }

p { font-size: 1rem; line-height: 1.5; }

5. em cinsinden medya sorguları

Piksel cinsinden kırılma noktaları metin büyütüldüğünde yer değiştirmez. em tabanlı olanlar değiştirir.

@media (min-width: 768px) { .menu { display: flex; } }

@media (min-width: 48em) { .menu { display: flex; } }

6. Kesmeyin, satıra sarın

Uzun metnin kesilmesi yerine satıra sarılmasına izin verin.

.etiket { white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; width: 100px; }

.etiket { overflow-wrap: anywhere; max-width: 100%; }

Mobil için kod örnekleri

Yerel mobil uygulamalarda aynı kural geçerlidir. Metnin sistem metin boyutu ayarını izlemesi için platformun metin stillerini ve birimlerini kullanın ve yerleşimin büyümesine izin verin.

iOS (SwiftUI)

import SwiftUI

struct MakaleKarti: View {
    // Metin boyutuyla birlikte büyüyen boşluk
    @ScaledMetric private var bosluk: CGFloat = 8

    var body: some View {
        VStack(alignment: .leading, spacing: bosluk) {
            // Kaçının: sabit boyut Dynamic Type'ı izlemez
            // Text("Başlık").font(.system(size: 14))

            // Dynamic Type'ı izleyen metin stillerini kullanın
            Text("Başlık").font(.headline)
            Text("Birkaç satıra sarılan daha uzun bir açıklama.")
                .font(.body)
                .fixedSize(horizontal: false, vertical: true)
        }
        .padding()
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.heightIn
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MakaleKarti() {
    // Sabit yükseklik değil, minimum yükseklik kullanın
    Column(modifier = Modifier.heightIn(min = 120.dp)) {
        // Metin stilleri, sistem yazı tipi ölçeğini izleyen sp kullanır.
        // Kaçının: sabit yükseklik ya da yazı tipi ölçeğini yok sayan metin boyutu
        Text("Başlık", style = MaterialTheme.typography.titleMedium)
        Text(
            "Birkaç satıra sarılan daha uzun bir açıklama.",
            style = MaterialTheme.typography.bodyMedium
        )
    }
}

Nasıl test edilir?

• Tarayıcıyı %200'e yakınlaştırın: Ctrl ve artı ya da Command ve artı kullanın. Tüm içerik hâlâ orada mı ve her kontrol hâlâ çalışıyor mu? Kesilen ya da üst üste binen bir şey var mı?
• Yalnızca metin yakınlaştırmasını deneyin: Tarayıcıda daha büyük bir minimum yazı tipi boyutu ayarlayın. Yerleşim dayanıyor mu?
• Viewport'u kontrol edin: Yakınlaştırma user-scalable=no ya da maximum-scale ile engellenmiş mi?
• Kodu inceleyin: Metin boyutları göreli birimlerde mi? Metin kapsayıcılarında sabit yükseklikler var mı?
• Mobili kontrol edin: Sistem metin boyutunu en büyük ayara getirin. Uygulama bunu izliyor mu ve yerleşim, metin kesilmeden uyum sağlıyor mu?
• Tüm akışı test edin: Bir görevi, örneğin bir girişi ya da ödemeyi, %200'de tamamlayın.
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar engellenmiş bir viewport'u bulabilir, ama içeriğin kesilip kesilmediğini yalnızca bir kişi görebilir.

Sık yapılan hatalar

• Yakınlaştırmayı viewport ile engellemek: Mobilde bu kriterin en sık görülen ihlali.
• Her yerde piksel cinsinden metin boyutları: Kullanıcının varsayılan boyutunu yok sayar.
• Sabit yükseklikler: Büyütülmüş metin kesilir ya da taşar.
• Taşan içeriği gizlemek: Metin büyüyünce içerik kaybolur.
• Metni üç nokta ile kesmek: Önemli metin kaybolabilir.
• Dynamic Type'ı ve yazı tipi ölçeğini yok saymak: Uygulama sistem ayarını izlemez.
• Yalnızca piksel cinsinden kırılma noktaları: Yerleşim daha büyük metne yanıt vermez.
• Yalnızca ana sayfayı test etmek: Formlar ve iletişim kutuları ilk bozulanlardır.

Kaynaklar

• Understanding SC 1.4.4: Resize Text (W3C), İngilizce, yeni sekmede açılır
• F69: Failure due to resizing text causing loss of content (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.