Metin Aralığı

Kısaca

Disleksisi olan ya da az gören kişiler metni okumak için çoğu zaman aralığını değiştirir: satırlar, harfler, sözcükler ve paragraflar arasında daha fazla boşluk bırakır. Sayfa, bunu yaptıklarında metni keserse ya da üst üste bindirirse sayfa okunamaz hâle gelir.

Bu kriter, kullanıcı satır yüksekliğini yazı tipi boyutunun 1,5 katına, paragraf aralığını 2 katına, harf aralığını 0,12 katına ve sözcük aralığını 0,16 katına ayarladığında hiçbir içerik ya da işlev kaybının olmamasını ister. Yazarların bu değerleri kullanmasını değil, içeriğin bunlara dayanmasını ister.

Neleri kapsar?

• Satır yüksekliği: Yazı tipi boyutunun en az 1,5 katı yerleşimi bozmamalıdır.
• Paragraf aralığı: Paragraflardan sonra yazı tipi boyutunun en az 2 katı.
• Harf aralığı: Yazı tipi boyutunun 0,12 katı.
• Sözcük aralığı: Yazı tipi boyutunun 0,16 katı.
• Nasıl test edilir: Bir kullanıcı stili ya da yer imi betiği dördünü birden uygular. Metin kesilmemeli, üst üste binmemeli ya da kaybolmamalı ve kontroller çalışmaya devam etmelidir.
• Diller ve yazı sistemleri: Bu özellikleri kullanan yazı sistemleri için geçerlidir. Bir yazı sistemi bunlardan birini kullanmıyorsa o özellik gerekmez.
• Kapsam dışı notlar: Metnin kendisinin yeniden boyutlandırılması 1.4.4, yeniden akış 1.4.10 kapsamındadır.

Kimleri etkiler?

Disleksisi ve başka okuma farklılıkları olan kişiler. Aralığı ayarlayan az gören kişiler. Metni değiştirmek için tarayıcı eklentisi ya da kullanıcı stil sayfası kullananlar. Daha geniş aralıkla daha iyi okuyan bilişsel farklılıkları olan 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. Kullanıcının aralık değişikliklerine dayanan metin, "algılanabilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.4.12'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.12 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. Metin kutularının yüksekliğini sabitlemeyin

Sabit yükseklik, satır yüksekliği büyür büyümez metni keser.

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

.kart { min-height: 100px; }

2. Satır yüksekliğini piksel olarak sabitlemeyin

Piksel cinsinden satır yüksekliği, kullanıcı stil sayfasında yazı tipi boyutunu ya da aralığı değiştirse de aynı kalır. Birimsiz değer ölçeklenir.

p { line-height: 18px !important; }

p { line-height: 1.5; }

3. Düğmelerde ve etiketlerde kesilmeyi önleyin

Sabit genişlikler ve satıra sarılmayan etiketler, harfler ve sözcükler genişleyince metni keser.

.etiket { width: 80px; white-space: nowrap; overflow: hidden; }

.etiket { min-width: 5rem; padding-inline: 0.5rem; }

4. Gezinmenin sarmasına izin verin

Sabit yükseklikli tek satırlık bir menü, sözcükleri genişleyince sonrasındaki içeriğin üstüne biner.

.gezinme { height: 40px; display: flex; flex-wrap: nowrap; }

.gezinme { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }

5. Aralıkta !important kullanmayın

CSS'iniz bu özelliklerde !important kullandığında kullanıcı stil sayfası onu geçersiz kılamaz.

body { letter-spacing: 0 !important; word-spacing: 0 !important; }

body { letter-spacing: normal; word-spacing: normal; }

6. Dört değerle test edin

Neyin bozulduğunu görmek için geliştirici araçlarında bu stili kullanın.

/* Aralık geçersiz kılmalarıyla test yok */

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

Mobil için kod örnekleri

Yerel uygulamalar kullanıcıların aralığı doğrudan geçersiz kılmasına nadiren izin verir, ama büyük metinde de aynı savunmacı kural işe yarar: kapsayıcıların büyümesine izin verin ve metni kesmeyin.

iOS (SwiftUI)

import SwiftUI

struct EtiketMetni: View {
    let baslik: String

    var body: some View {
        Text(baslik)
            .font(.callout)
            // Kaçının: .lineLimit(1) ile birlikte .frame(width: 80, height: 24) ve kesme
            .lineSpacing(4)                       // ek satır aralığına izin verilir
            .padding(.horizontal, 8)
            .padding(.vertical, 4)
            .fixedSize(horizontal: false, vertical: true) // metniyle birlikte büyür
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun EtiketMetni(baslik: String) {
    Text(
        text = baslik,
        // Kaçının: maxLines = 1 ve kesme ile Modifier.height(24.dp)
        modifier = Modifier
            .heightIn(min = 24.dp)
            .padding(horizontal = 8.dp, vertical = 4.dp),
        lineHeight = 22.sp,       // sıkışık aralık yerine rahat bir satır yüksekliği belirleyin
        letterSpacing = 0.5.sp
    )
}

Nasıl test edilir?

• Dört değeri uygulayın: Satır yüksekliğini 1,5, paragraf aralığını 2, harf aralığını 0,12em ve sözcük aralığını 0,16em yapmak için bir yer imi betiği, tarayıcı eklentisi ya da geliştirici araçları stili kullanın.
• Kayıp arayın: Kesilen, gizlenen ya da başka metnin üstüne binen metin var mı? Etiketini kaybeden kontrol var mı?
• Ana bileşenleri kontrol edin: Gezinme, düğmeler, sekmeler, kartlar, form etiketleri, ipuçları ve tablolar en olası bozulanlardır.
• Kodu kontrol edin: Sabit yükseklikleri, overflow: hidden, nowrap ve aralık özelliklerinde !important ifadesini arayın.
• Her şablonu test edin: Bunu ana sayfada, bir makalede, bir formda ve ödemede yapın.
• Mobili kontrol edin: En büyük metin boyutunu ayarlayın. Yerleşim kesmek yerine büyüyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar aralık geçersiz kılmalarını iyi uygulayıp yargılayamaz. Bir kişi test etmelidir.

Sık yapılan hatalar

• Sabit yükseklikli kartlar ve afişler: Kesilen metnin olağan nedeni.
• Sabit genişlikli düğmeler: Daha uzun harf ve sözcük aralığı metni dışarı iter.
• Metin kapsayıcılarında overflow: hidden: Kutunun büyümesine izin vermek yerine taşmayı gizler.
• Aralık özelliklerinde !important: Kullanıcının kendi stil sayfasını engeller.
• Piksel cinsinden satır yüksekliği: Metinle birlikte ölçeklenmez.
• Mutlak konumlandırılmış metin: Sabit koordinatlara konan metin boyutu değişince üst üste biner.
• Kesilen ipuçları ve menüler: Açılır öğeler metinleriyle birlikte boyut değiştirmelidir.
• Yalnızca gövde metnini test etmek: İlk olarak gezinme ve form etiketleri bozulur.

Kaynaklar

• Understanding SC 1.4.12: Text Spacing (W3C), İngilizce, yeni sekmede açılır
• F104: Failure of SC 1.4.12 due to clipped or overlapped content when text spacing is adjusted (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.