Bu Kural Ne Anlama Gelir

WCAG 1.4.8, okunabilirliği en üst düzeye çıkarmak için metin bloklarının görsel sunumuna yönelik beş özel gereksinim tanımlar. Kullanıcı şunları yapabilmelidir: (1) ön plan ve arka plan renklerini seçmek, (2) satır başına 80 karakterden (CJK alfabeleri için 40) fazla olmayan satırları okumak, (3) iki yana yaslanmamış metin görmek, (4) paragraflar içinde en az 1.5 satır aralığına sahip olmak ve (5) satır aralığının en az 1.5 katı paragraf aralığına sahip olmak.

Bu gereksinimler okunabilirlik araştırmalarına dayanır. Uzun satır uzunlukları takip hatalarına neden olur, tam iki yana yaslama okuma akışını bozan düzensiz aralık oluşturur ve dar satır aralığı bir sonraki satırı bulmayı zorlaştırır.

Neden Önemlidir

Disleksi, düşük görme veya bilişsel engelleri olan kullanıcılar kontrollü metin sunumundan önemli ölçüde faydalanır. Araştırmalar, 80 karakteri aşan satır uzunluklarının okuma hatalarını artırdığını, iki yana yaslanmış metnin disleksili kullanıcılar için okumayı bozan "beyaz boşluk ırmakları" oluşturduğunu ve dar aralığın satırdan satıra takibi zorlaştırdığını göstermektedir.

Kullanıcıların renkleri özelleştirmesine izin vermek, konforlu okuma için yüksek kontrast veya belirli renk kombinasyonlarına ihtiyaç duyanlar için önemlidir.

İlgili axe-core Kuralları

1.4.8 için otomatik axe-core kuralı yoktur. Bu özellikler görsel inceleme ve hesaplanmış stil analizi gerektirir.

Nasıl Test Edilir

Gövde metninin maksimum satır genişliğini ölçün. En uzun satırdaki karakterleri sayın — 80 karakteri aşmamalıdır.
Gövde metin bloklarında text-align özelliğini kontrol edin. justify olarak ayarlanmamış olmalıdır.
Gövde metindeki line-height değerini inceleyin. En az 1.5 (%150) olmalıdır.
Paragraflar arasındaki boşluğu kontrol edin. line-height değerinin en az 1.5 katı olmalıdır.
Kullanıcının tarayıcı ayarları veya sağlanan bir arayüz mekanizması ile ön plan ve arka plan renklerini geçersiz kılıp kılamadığını test edin.

Nasıl Düzeltilir

Siteniz genelinde okunabilir metin varsayılanları uygulayın:

/* Okunabilir metin bloğu stili */
.content-area {
  /* Maksimum 80 karakter genişliğinde */
  max-width: 70ch;

  /* Tam iki yana yaslama yok */
  text-align: left;

  /* Satır aralığı en az 1.5 */
  line-height: 1.6;
}

.content-area p {
  margin-bottom: 1.5em;
}

/* Kullanıcı renk geçersiz kılmalarına izin verin — renklerde !important kullanmayın */
.content-area {
  color: var(--text-color, #1a1a2e);
  background-color: var(--bg-color, #ffffff);
}

Renk özelleştirmesi için bir tema değiştirici sağlayın:

<fieldset class="theme-switcher">
  <legend>Okuma tercihleri</legend>
  <label><input type="radio" name="theme" value="light" checked /> Açık</label>
  <label><input type="radio" name="theme" value="dark" /> Koyu</label>
  <label><input type="radio" name="theme" value="sepia" /> Sepya</label>
  <label><input type="radio" name="theme" value="high-contrast" /> Yüksek Kontrast</label>
</fieldset>

Sık Yapılan Hatalar

Geniş ekranlarda tüm görüntü alanına yayılan ve 150+ karakter satır uzunluğu oluşturan tam genişlikli metin kapsayıcıları.
Gövde metinde text-align: justify kullanarak düzensiz kelime aralığı ve beyaz boşluk ırmakları oluşturmak.
1.5 minimumunun altında olan 1.2 veya "normal" (tipik olarak ~1.15) varsayılan line-height değeri.
Satır aralığının 1.5 katından az olan yalnızca margin-bottom: 1em değerine sahip paragraflar.
Metin renklerinde !important kullanarak kullanıcı stil sayfalarının bunları geçersiz kılmasını engellemek.

1.4.8 Görsel Sunum