WCAG 1.4.12: Metin Aralığı

Bu Kuralın Anlamı

WCAG 1.4.12 Metin Aralığı, İlke 1.4’e (Ayırt Edilebilir) aittir ve çok spesifik bir sorunu hedefler: okuma güçlüğü, az görenlik veya bilişsel yetersizlikleri olan birçok kişi, içeriği kendileri için okunabilir kılmak amacıyla bir web sayfasının varsayılan metin aralığını geçersiz kılmak zorundadır. Aralıklar artırıldığında sitenin yerleşimi bozuluyorsa — metin kesiliyorsa, butonlar üst üste biniyorsa, form etiketleri kayboluyorsa veya içeriğe ulaşılamaz hale geliyorsa — site bu kritere uyamaz.

Kriter, aynı anda aşağıdaki asgari değerlere ayarlandığında işlevsel kalması gereken dört aralık özelliği tanımlar:

• Satır yüksekliği (satır aralığı): öğenin yazı tipi boyutunun en az 1,5 katı.
• Harf aralığı (tracking): öğenin yazı tipi boyutunun en az 0,12 katı.
• Kelime aralığı: öğenin yazı tipi boyutunun en az 0,16 katı.
• Paragraflardan sonra gelen aralık: öğenin yazı tipi boyutunun en az 2 katı.

Bir sayfa, bu dört geçersiz kılma uygulandıktan sonra kullanıcılar hâlâ tüm metni okuyabiliyor, tüm etkileşimli kontrolleri kullanabiliyor ve tüm sayfa içeriğine 320 CSS piksel genişliğinde bir görünüm alanında yatay kaydırma olmadan, kırpma veya kesilme olmadan ve içerik okunamaz veya kullanılamaz hale gelecek ölçüde üst üste binmeden erişebiliyorsa, bu kriteri geçer.

Bir sayfa, bu geçersiz kılmaların uygulanması aşağıdakilerden herhangi birine neden oluyorsa kalır: metin sabit yüksekliğe ve overflow: hidden değerine sahip bir kap tarafından kesiliyorsa; etkileşimli etiketler veya buton metni kayboluyorsa; açılır menüler veya araç ipuçları gövde içeriğiyle kullanılamaz şekilde çakışıyorsa; ya da herhangi bir içerik kalıcı olarak erişilemez hale geliyorsa.

Önemli olarak, kriter sizden bu aralık değerlerini kendiniz ayarlamanızı gerektirmez. Sadece, kullanıcı (veya yardımcı teknolojisi, tarayıcı eklentisi ya da kullanıcı stil sayfası) bu geçersiz kılmaları uyguladığında yerleşiminizin bozulmamasını gerektirir. Aralık değerleri tasarım gereksinimi değil, test için eşik değerleridir.

Bir açık istisna vardır: belirli bir görsel sunumun iletilen bilgi için olmazsa olmaz olduğu bileşenler — örneğin bir logotip, SVG ile oluşturulmuş bir müzik notası veya bir CAPTCHA görseli — muaf tutulur. Ancak bu istisna dardır ve gezinme menülerini veya kart bileşenlerini toptan muaf tutmak için bahane olarak kullanılmamalıdır.

Bu kriter, CSS kullanılarak tarayıcıda oluşturulan tüm metin içeriği için geçerlidir; başlıklar, paragraflar, etiketler, buton metni, yer tutucu metin, liste öğeleri, tablo hücreleri ve gezinme bağlantıları dahil. CSS aralık geçersiz kılmalarından etkilenmediği için görsellerin veya canvas öğelerinin içindeki metin için geçerli değildir.

Neden Önemlidir

Metin aralığı, çok geniş bir yelpazedeki engellilik ve okuma profillerine sahip insanları doğrudan etkiler. Dünya Sağlık Örgütü’ne göre, dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu veya körlüğü vardır ve bunların çoğu içeriği okunabilir kılmak için tarayıcı yakınlaştırması veya özel stil sayfaları kullanır. Görme bozukluğunun ötesinde, dünya nüfusunun tahminen %15–20’si disleksiye sahiptir; bu durum için artırılmış harf aralığı, kelime aralığı ve satır yüksekliği, Annals of Dyslexia dergisinde yayımlanan çalışmalar da dahil olmak üzere araştırmalarla desteklenen kanıtlanmış okunabilirlik müdahaleleridir.

DEHB veya işleme güçlüğü gibi bilişsel engelleri olan kullanıcılar için sıkı metin aralığı, satırları takip etmeyi ve tek tek kelimeleri ayırt etmeyi zorlaştırarak okumanın bilişsel yükünü artırır. Bu kullanıcılar sıklıkla Readability Bookmarklet, Stylus gibi tarayıcı eklentileri veya ziyaret ettikleri tüm web sitelerine özel aralık uygulayan platform düzeyinde erişilebilirlik ayarları kurarlar.

Somut bir senaryo düşünün: disleksili bir üniversite öğrencisi, sınavdan önce iade koşullarını kontrol etmek için bir Türk e-ticaret platformunu ziyaret ediyor. Tarayıcı uzantısı, satır yüksekliğini 1,7’ye ve harf aralığını global olarak 0,14em’e ayarlıyor. Ürün detay sayfasında, iade koşulları metni, height: 120px; overflow: hidden; ile stillendirilmiş sabit yükseklikte bir <div> içinde yer alıyor. Özel aralığı etkin olduğunda yalnızca ilk iki satır görünüyor ve geri kalanını gösterecek hiçbir mekanizma yok. Görevini tamamlayamıyor ve platforma olan güvenini kaybediyor. WCAG 1.4.12’nin tam olarak önlemeyi amaçladığı başarısızlık budur.

Engellilik erişiminin ötesinde ikincil faydalar da vardır. Esnek, aralık açısından dayanıklı yerleşimler, uluslararası pazarlarda daha sağlam olma eğilimindedir — örneğin Türkçe metin, eklemeli biçimbilim nedeniyle sıklıkla daha uzun sözcük biçimleri içerir ve aralık değişimine uyum sağlayamayan yerleşimler, daha uzun dizgilerle de bozulma eğilimindedir. Erişilebilir yerleşimler ayrıca dolaylı olarak SEO’yu da iyileştirir: okunabilir ve erişilebilir içerik, arama motorlarının sıralamalarda dikkate aldığı daha düşük hemen çıkma oranlarına ve daha iyi etkileşim sinyallerine sahip olma eğilimindedir.

İlgili Axe-core Kuralları

WCAG 1.4.12, manuel test gerektirir ve yalnızca otomatik araçlarla tam olarak doğrulanamaz. Bunun nedeni, otomatik motorların, bu geçersiz kılmaları gerçekten uygulamadan ve oluşturulan sonucu ölçmeden, kullanıcı tarafından uygulanan stil geçersiz kılmaları altında bir yerleşimin nasıl davranacağını tahmin edememesidir — bu süreç görsel inceleme veya başsız (headless) oluşturma karşılaştırması gerektirir. Bu nedenle axe-core motoru, 1.4.12 için özel bir otomatik kural içermez.

• Text Spacing Bookmarklet ile manuel test: Önerilen test yaklaşımı, Steve Faulkner tarafından oluşturulan (şu anda erişilebilirlik topluluğu tarafından sürdürülen) Text Spacing Bookmarklet’tir. Bu bookmarklet, dört aralık özelliğinin tamamını aynı anda asgari eşik değerlerine ayarlayan bir stil sayfasını geçerli sayfaya enjekte eder. Test eden kişi daha sonra görsel olarak (veya ekran okuyucu ile) herhangi bir içeriğin kırpılıp kırpılmadığını, üst üste binip binmediğini veya erişilemez hale gelip gelmediğini kontrol eder. Bookmarklet yaklaşımı, W3C’nin 1.4.12 için kendi Understanding belgesinde referans verilen standarttır.
• Otomasyonun neden yetersiz kaldığı: axe-core gibi otomatik tarayıcılar, tarama anında DOM’u ve hesaplanmış stilleri oldukları haliyle analiz eder. Kullanıcı stil sayfası geçersiz kılmalarını simüle etmez veya bu geçersiz kılmaların neden olduğu yerleşim taşması veya kırpılmasını tespit etmek için sayfayı yeniden oluşturmaz. overflow: hidden ve sabit yüksekliğe sahip bir kap, tek başına bir erişilebilirlik hatası olmadığı için otomatik taramadan geçer — yalnızca aralık artırıldığında sorun haline gelir. Ancak geçersiz kılma uygulanıp sonuç gözlemlenerek bir test eden kişi bir başarısızlığı doğrulayabilir.
• Tamamlayıcı otomatik kontroller: Her ne kadar hiçbir axe kuralı doğrudan 1.4.12 ile eşleşmese de, değerlendiriciler axe’in scrollable-region-focusable kuralının ve renk karşıtlığı kurallarının, kötü bir metin aralığı deneyimine katkıda bulunan ilgili sorunları ortaya çıkarabileceğini de not etmelidir. Ek olarak, Lighthouse’un erişilebilirlik denetimi, her ne kadar özel olarak aralık uyumu için olmasa da, belirli bağlamlarda sabit boyutlu kapları işaretleyebilir.

Nasıl Test Edilir

1. Text Spacing Bookmarklet’i kurun. Steve Faulkner Text Spacing Bookmarklet sayfasına gidin (W3C Understanding belgesi üzerinden veya “text spacing bookmarklet WCAG” ifadesiyle web araması yaparak erişilebilir). Bookmarklet’i tarayıcınızın yer imleri çubuğuna sürükleyin. Alternatif olarak, manuel olarak bir yer imi oluşturun ve bookmarklet JavaScript’ini URL olarak yapıştırın.
2. Test edilecek sayfayı açın ve tarayıcınızı varsayılan yakınlaştırma düzeyinde (100%) kullanın. Değerlendirmek istediğiniz sayfaya veya bileşene gidin — örneğin bir ürün listeleme sayfası, ödeme formu veya gezinme menüsü.
3. Bookmarklet’i etkinleştirin. Bookmarklet’e tıklayın. Bu, sayfa genelinde line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important ve p margin-bottom değerini 2em !important olarak ayarlayan CSS enjekte eder.
4. Tüm sayfayı görsel olarak inceleyin. Tüm içerik alanlarında gezinin. Şunlara bakın: bir kabın alt kısmında kesilen metin; kaybolan veya kısmen gizlenen buton etiketleri veya bağlantı metni; öğelerin üst üste bindiği gezinme menüleri veya açılır menüler; yer tutucu veya etiket metninin kırpıldığı form alanları; ve içeriğin kap sınırını aştığı modal diyaloglar veya araç ipuçları.
5. Etkileşimli öğelerle etkileşime geçin. Tüm odaklanabilir öğeler arasında sekme ile dolaşın, açılır menüleri etkinleştirin, modalları açın ve formları gönderin. Tüm etkileşimli kontrollerin kullanılabilir kaldığını ve görünür etiketlerinin, uygulanan aralıkla birlikte tamamen okunabilir olduğunu doğrulayın.
6. İşlev kaybı için ekran okuyucu ile test edin. Bookmarklet hâlâ etkinken, sayfada başlıklar, işaret bölgeleri ve etkileşimli öğeler arasında gezinmek için Firefox ile NVDA veya Chrome ile JAWS kullanın. Okuma sırasının ve duyurulan içeriğin, gören bir kullanıcının gördüğüyle eşleştiğini doğrulayın. Apple platform kapsamı için macOS veya iOS’ta Safari ile VoiceOver kullanın.
7. 320px görünüm alanı genişliğinde test edin. Tarayıcı pencerenizi 320 CSS piksel genişliğe yeniden boyutlandırın (veya tarayıcı Geliştirici Araçları’nın duyarlı modunu kullanın). Bookmarklet’i yeniden etkinleştirin. İçeriğin hâlâ yatay kaydırma olmadan erişilebilir olduğunu ve artırılmış aralıkla birleştirildiğinde küçük görünüm alanı genişliklerinde metnin kırpılmadığını doğrulayın.
8. Başarısızlıkları belgeleyin. Her başarısızlık için, öğe türünü, CSS sınıfını veya ID’sini, başarısızlığa neden olan belirli aralık özelliğini ve bookmarklet etkinleştirilmeden önce ve sonra alınmış bir ekran görüntüsünü kaydedin.

Nasıl Düzeltilir

Sabit yükseklikte kap metni kırpıyor — Hatalı

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Sabit yükseklikte kap metni kırpıyor — Doğru

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Sabit buton yüksekliği etiket metnini kırpıyor — Hatalı

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Sabit buton yüksekliği etiket metnini kırpıyor — Doğru

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Kaydırma olmadan taşan araç ipucu veya açılır menü — Hatalı

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Kaydırma olmadan taşan araç ipucu veya açılır menü — Doğru

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Paragraf aralığı kart yerleşimini bozuyor — Hatalı

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Paragraf aralığı kart yerleşimini bozuyor — Doğru

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Yaygın Hatalar

• Metin kaplarında min-height yerine height kullanmak. Metin içeren herhangi bir öğede sabit height kullanmak, kullanıcı satır yüksekliğini veya harf aralığını artırır artırmaz kırpmaya neden olur. Kap büyüyebilsin diye metin içeren tüm kaplardaki sabit yükseklikleri min-height ile değiştirin.
• Paragraf metni tutan kaplarda overflow: hidden ayarlamak. Bu, 1.4.12 başarısızlıklarının en yaygın tek nedenidir. Gizli taşma, aralıklar arttığında dikey olarak genişleyen metni kırpar. Tasarım bağlamına bağlı olarak overflow: visible veya overflow: auto kullanın.
• Yeterli kap esnekliği olmadan buton veya bağlantı etiketlerinde white-space: nowrap kullanmak. Harf aralığı arttığında, satır kırılmayan metin, özellikle sabit genişlikli gezinme öğelerinde, üst öğesini taşabilir veya kırpılabilir.
• Sabit yükseklikte bir kart içinde altbilgi veya eylem öğelerini mutlak konumlandırmak. Kart içeriği aralık geçersiz kılmaları nedeniyle büyüdüğünde, kartın alt kısmına mutlak konumlandırılmış öğeler metnin üzerine biner. Bunun yerine sütun düzenli flexbox kullanın.
• Genişletilmiş durumdaki daralabilir bölümlere overflow: hidden ile birlikte max-height uygulamak. Piksel ölçümlerine dayalı hesaplanmış bir max-height değerine genişleyen animasyonlu akordeonlar, aralıklar geçersiz kılındığında, tamamen açık olsalar bile metni bu piksel sınırında kırpar.
• Görünür bir mekanizma olmadan CSS line-clamp (webkit-line-clamp) kullanmak. Metni sabit sayıda satıra sıkıştırmak, yalnızca tam içeriği ortaya çıkarmak için açıkça etiketlenmiş, klavye ile erişilebilir bir kontrol varsa kabul edilebilirdir. Herhangi bir genişletme mekanizması olmadan sıkıştırma yapmak 1.4.12’yi karşılamaz.
• Öğe yüksekliklerini pikseller cinsinden dinamik olarak ayarlamak için JavaScript’e güvenmek. Öğelerin yüksekliklerini ölçen ve ardından bu piksel değerlerini satır içi stil olarak sabitleyen betikler, kabı kullanıcı aralık geçersiz kılmalarını yok sayan bir boyuta kilitler. İçsel boyutlandırma kullanın ve yerleşimi CSS’in yönetmesine izin verin.
• Tüm 1.4.12 başarısızlıklarını otomatik erişilebilirlik taramalarının yakalayacağını varsaymak. Text Spacing Bookmarklet’i çalıştırmadan yalnızca axe veya Lighthouse’a güvenen ekipler, aralığa bağlı tüm yerleşim hatalarını gözden kaçıracaktır. Bu kriter için bookmarklet ile manuel test zorunludur.
• Gezinme menülerini ve mega menüleri bookmarklet ile test etmemek. Gezinme bileşenleri, çoğunlukla cilalı bir görsel sonuç elde etmek için sabit piksel yükseklikleri ve gizli taşma ile oluşturulur. Aynı zamanda, artırılmış aralıkların menü öğelerinin satır kırmasına ve kesilmesine neden olması nedeniyle 1.4.12 için en sık başarısız olan bileşenler arasındadır.
• Aralık değerlerini test eşiği yerine tasarım gereksinimi olarak ele almak. Bazı ekipler, 1.4.12’ye yanıt olarak varsayılan stillerini eşik değerleriyle eşleşecek şekilde günceller; bu gereksizdir ve tasarımcının niyetiyle çelişebilir. Kriter yalnızca, bu değerler uygulandığında yerleşimin bozulmamasını gerektirir — varsayılan olmalarını değil.

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

WCAG 1.4.12 Metin Aralığı, Türkiye’nin gelişmekte olan yasal erişilebilirlik çerçevesiyle doğrudan ilişkilidir. En önemli son gelişme, 21 Haziran 2025’te 32933 sayılı Resmî Gazete’de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi’dir. Bu genelge, çok geniş bir yelpazedeki kuruluş için web varlıkları ve mobil uygulamaları genelinde dijital erişilebilirliği sağlama konusunda bağlayıcı yükümlülükler getirmektedir.

Genelge, geniş bir kurum yelpazesini kapsar. Tüm kamu kurum ve kuruluşları, her düzeydeki kamu idareleri uyum sağlamakla yükümlüdür. Kapsam dahilindeki özel sektör kuruluşları arasında e-ticaret platformları, bankalar ve finans kuruluşları, hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar yer alır. Bu kuruluşlar, genelge kapsamındaki yükümlülüklerinin bir parçası olarak 1.4.12’yi de içeren WCAG Seviye AA uyumunu sağlamak zorundadır.

Seviye AA uyumu, Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen Erişilebilirlik Logosunu almak için de bir ön koşuldur. Bu logo, özellikle engelli kullanıcılar için, bir dijital ürünün denetlendiğini ve gerekli erişilebilirlik standardını karşıladığını gösterir. Türkiye’deki görme, bilişsel ve okuma engelleri olanlar da dahil olmak üzere milyonlarca kişiden oluşan engelli topluluğuna hizmet veren kuruluşlar için bu logo hem itibar hem de mevzuat açısından önem taşır.

Pratik açıdan bakıldığında, ürün açıklamaları için overflow: hidden ile sabit yükseklikte kaplar kullanan bir Türk e-ticaret platformu veya bir kullanıcı tarayıcı eklentisi ya da işletim sistemi erişilebilirlik ayarı aracılığıyla aralık geçersiz kılmaları uyguladığında gezinme menüsü metni kırpan bir kamu portalı, yalnızca kullanıcılarına karşı başarısız olmakla kalmaz — aynı zamanda 2025/10 sayılı genelge ile getirilen yükümlülüklere uymama riski de taşır. Metin Aralığı başarısızlıkları, özel aralık araçlarına güvenen disleksili ve az gören Türk kullanıcılar ve işletim sistemi metin boyutu ayarlarının da aralık geçersiz kılmalarına benzer yerleşim dengesizliklerini tetikleyebildiği mobil cihazlardan kamu veya ticari hizmetlere erişen kullanıcılar için özellikle önemlidir.

Erişilebilirlik Logosu’nu almak isteyen kuruluşlar, otomatik tarama ve ekran okuyucu testlerinin yanı sıra, erişilebilirlik denetim süreçlerinde zorunlu bir adım olarak Text Spacing Bookmarklet kullanılarak manuel bir metin aralığı denetimi de eklemelidir. 1.4.12 başarısızlıklarını gidermek — başlıca sabit yükseklikleri min-height ile değiştirmek, metin kaplarından gereksiz overflow: hidden değerini kaldırmak ve esnek CSS yerleşim tekniklerini benimsemek — genellikle önemli tasarım değişiklikleri gerektirmeden başarılabilir ve herhangi bir Türk dijital hizmetinin erişilebilirliğine yüksek değerli, düşük maliyetli bir iyileştirme sağlar.