Ana içeriğe geç

1.4.8 Görsel Sunum

Kullanıcılar; satır aralığı, hizalama ve satır uzunluğu gibi metnin görsel sunum özelliklerini ayarlayabilmelidir.

SC Kodu: 1.4.8 Seviye: AAA
URL: https://www.w3.org/TR/WCAG22/#visual-presentation

Genel Tanım​

WCAG 1.4.8, metin içeriğinin kullanıcı tarafından görsel olarak özelleştirilebilir olmasını gerektirir. Kullanıcılar; metin ve arka plan renkleri, satır aralığı, metin genişliği ve hizalama gibi özellikleri ayarlayabilmelidir.

Faydalar​

  • Disleksisi Olan Kullanıcılar: Okuma hızı ve anlama artar.
  • Düşük Görüşlü Kullanıcılar: Metin daha az göz yorgunluğu yaratır.
  • Kişisel Tercihler: Kullanıcılar kendi okuma alışkanlıklarına göre görünümü ayarlayabilir.

Kapsam

  • Uzun metin içerikleri
  • Makaleler, blog yazıları
  • Eğitim ve dokümantasyon sayfaları

Not: Bu kriter, kullanıcı ayarlarını engelleyen tasarımları hedef alır.

Ana Amaç​

Bu kriterin amacı, özellikle disleksi, düşük görüş veya bilişsel engelleri olan kullanıcıların metinleri daha rahat okuyabilmesini ve görsel yorgunluğun azaltılmasını sağlamaktır.

Gereksinimler

Kullanıcılara aşağıdaki özelleştirme seçenekleri sunulmalıdır:

  • Metin ve arka plan renklerini değiştirebilme
  • Satır aralığını en az 1.5 katına çıkarabilme
  • Paragraflar arası boşluğu satır yüksekliğinin en az 1.5 katı yapabilme
  • Metin genişliğini 80 karakter (veya glif) ile sınırlayabilme
  • Metni iki yana yaslama zorunluluğu olmadan gösterebilme

En İyi Uygulamalar​

  • Sabit satır yüksekliği ve genişliği kullanmaktan kaçının.
  • CSS ile kullanıcı stil değişikliklerine izin verin.
  • Metni iki yana yaslamayı varsayılan yapmayın.
  • Renk ve font ayarlarını zorunlu kılmayın.

Örnekler ve Açıklamalar​

Örnek: Okuma Dostu Makale Sayfası​

Bir kullanıcı, tarayıcı ayarları veya özel stil dosyaları aracılığıyla satır aralığını artırır ve arka plan rengini değiştirir. Sayfa içeriği bozulmadan okunabilir kalır.

Nelerden Kaçınılmalı?

Kullanıcının metin görünümünü değiştirmesini engelleyen CSS kuralları.

HTML/CSS

.article {
  max-width: 600px;
  line-height: 1;
  text-align: justify;
}

Açıklama:

Bu örnekte satır aralığı yetersizdir ve metin zorunlu olarak iki yana yaslanmıştır. Kullanıcı özelleştirmeleri kısıtlandığı için WCAG 1.4.8 kriteri karşılanmaz.

Ne Yapılmalı?

Metin sunumu esnek ve kullanıcı ayarlarına açık olmalıdır.

HTML/CSS

.article {
  max-width: 80ch;
  line-height: 1.5;
  text-align: left;
}

Açıklama:

Bu örnekte metin genişliği, satır aralığı ve hizalama kullanıcı dostu şekilde ayarlanmıştır. Kullanıcılar metni rahatça özelleştirebilir ve WCAG 1.4.8 gereksinimleri karşılanır.