Skip to main content
Algılanabilir WCAG 1.4.12

1.4.12 Metin Aralığı

Kullanıcılar metin aralığını geçersiz kıldığında içerik veya işlevsellik kaybı oluşmaz: satır yüksekliği 1.5x, paragraf aralığı 2x, harf aralığı 0.12em ve kelime aralığı 0.16em.

Level AA Serious WCAG 2.1 (new) WCAG 2.2

Bu Kural Ne Anlama Gelir

WCAG 1.4.12, kullanıcı aşağıdaki metin aralığı geçersiz kılmalarını aynı anda uyguladığında hiçbir içerik veya işlevsellik kaybı olmamasını gerektirir: satır yüksekliği (line-height) yazı boyutunun en az 1.5 katı, paragraf aralığı (paragraflarda margin-bottom) yazı boyutunun en az 2 katı, harf aralığı (letter-spacing) yazı boyutunun en az 0.12 katı ve kelime aralığı (word-spacing) yazı boyutunun en az 0.16 katı.

Bu ölçüt, disleksi, düşük görme veya bilişsel engelleri olan birçok kullanıcının okunabilirlik için metin aralığını artırması gerektiği için vardır. Tarayıcı eklentileri, kullanıcı stil sayfaları veya yer imleri aracılığıyla enjekte edilen özel CSS kullanabilirler. Bu ayarlamalar yapıldığında sayfa bozulmamalıdır.

Neden Önemlidir

Araştırmalar, artırılmış metin aralığının disleksili kişiler için okuma hızını ve anlama becerisini önemli ölçüde iyileştirdiğini göstermektedir. Daha dar harf ve kelime aralığı, harflerin ve kelimelerin görsel olarak birleşmesine neden olarak okumayı yorucu hâle getirir. Artırılmış satır yüksekliği, kullanıcıların yerlerini kaybetmeden satırdan satıra takip etmelerine yardımcı olur.

Kullanıcılar genellikle bu geçersiz kılmaları "Text Spacing Editor" gibi tarayıcı eklentileri veya özel kullanıcı stil sayfaları aracılığıyla uygular. Aralık artırıldığında sayfa düzeni çökerse, bu kullanıcılar içeriğe tamamen erişimini kaybeder.

İlgili axe-core Kuralları

1.4.12 için otomatik axe-core kuralı yoktur. Test, belirli CSS geçersiz kılmalarının uygulanmasını ve içerik kaybı için manuel kontrol yapılmasını gerektirir.

Nasıl Test Edilir

  1. Bir yer imi, tarayıcı eklentisi veya DevTools kullanarak sayfaya aşağıdaki CSS geçersiz kılmalarını uygulayın:
/* Metin aralığı test geçersiz kılması — tümünü aynı anda uygulayın */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;
}
  1. Tüm sayfayı tarayarak artık kırpılan, kesilen, örtüşen veya gizlenen içeriği arayın.
  2. Tüm etkileşimli kontrollerin kullanılabilir ve görünür kaldığını kontrol edin.
  3. Gezinme öğelerinin, düğmelerin ve form etiketlerinin hâlâ tamamen okunabilir olduğunu doğrulayın.
  4. Sabit yükseklikli kapsayıcılara, rozet/çip bileşenlerine ve başlık çubuklarına özellikle dikkat edin — bunlar bozulma olasılığı en yüksek olanlardır.

Nasıl Düzeltilir

Metin aralığı değişikliklerini barındıracak kadar esnek kapsayıcılar tasarlayın:

/* Esnek kapsayıcı yaklaşımı */
.card {
  /* Sabit yükseklik değil min-height kullanın */
  min-height: 200px;
  /* height: 200px; <-- Metin aralığıyla BOZULUR */

  /* Sabit boyutlar değil dolgu kullanın */
  padding: 1.5rem;

  /* İçeriğin sınırları itmesine izin verin */
  overflow: visible;
  /* overflow: hidden; <-- Aralıkla içeriği KIRPAR */
}

.button {
  /* Boyutlandırma için sabit yükseklik değil dolgu kullanın */
  padding: 0.75em 1.5em;
  /* height: 40px; <-- Metin aralığıyla BOZULUR */

  /* Gerekirse metnin sarılmasına izin verin */
  white-space: normal;
  /* white-space: nowrap; <-- letter-spacing ile KIRPAR */
}

Metin aralığı geçersiz kılmalarına karşı çalışan CSS özelliklerinden kaçının:

/* Kaçınılması veya dikkatli kullanılması gereken özellikler */

/* KÖTÜ: Pikselde sabit satır yüksekliği */
.text { line-height: 18px; }
/* İYİ: Göreceli satır yüksekliği */
.text { line-height: 1.5; }

/* KÖTÜ: Metin kapsayıcılarında gizli taşma */
.container { overflow: hidden; }
/* İYİ: Görünür veya otomatik taşma */
.container { overflow: visible; }

/* KÖTÜ: Sabit yükseklikli satır içi öğeler */
.badge { height: 24px; line-height: 24px; }
/* İYİ: Dolgu tabanlı boyutlandırma */
.badge { padding: 0.125em 0.5em; }

Sık Yapılan Hatalar

  • overflow: hidden ile sabit yükseklikli kapsayıcılar, satır yüksekliği arttığında metni kırpar.
  • letter-spacing uygulandığında taşan kesin piksel yükseklikli rozet veya çip bileşenleri.
  • word-spacing artırıldığında metin etiketlerini kesen sabit genişlikli gezinme öğeleri.
  • Birimsiz değerler yerine piksel olarak ayarlanan satır yüksekliği, düzgün ölçeklemeyi engeller.
  • Aralık uygulandığında kapsayıcısından taşan araç ipucu veya açılır pencere metni.
  • Aralık geçersiz kılmaları üzerindeki etkisi test edilmeden yazı boyutlarında CSS clamp() veya max() kullanımı.

Kaynaklar