Ana içeriğe geç

1.4.12 Metin Aralıkları

Kullanıcılar satır yüksekliği, harf aralığı, kelime aralığı veya paragraf aralığı gibi metin boşluklarını değiştirdiğinde, içerik okunabilir ve işlevsel kalmalıdır.

SC Kodu: 1.4.12 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#text-spacing

Genel Tanım​

WVAG 1.4.12 Metin Aralığı, kullanıcılar metin aralığını ayarladığında işlevsellik veya içerik kaybı olmadan içeriğin sunulabilmesini gerektirir. Bu, satır yüksekliği, paragraf aralığı, harf aralığı ve kelime aralığını içerir.

Faydalar​

  • Görme Engelli Kullanıcılar İçin Geliştirilmiş Okunabilirlik: Kullanıcıların okunabilirliği artırmak için metin aralığını ayarlamasına olanak tanır.
  • Bilişsel Engelliler İçin Geliştirilmiş Erişilebilirlik: Metin sunumunda esneklik sağlayarak bilişsel zorluk yaşayan kullanıcılara yardımcı olur.
  • İşlevselliğin Korunması: Metin aralığı ayarlandığında içeriğin işlevsel ve okunabilir kalmasını sağlar.

Ana Amaç​

SC standartlarını karşılamak için, aşağıdaki değişiklikler yapılırken web sitesinin içeriğinin değişmeden kalmasını, metin veya içerik kaybı olmamasını sağlamamız gerekiyor:

  • Yazı tipi boyutunun en az 1,5 katı kadar satır aralığı bırakın.
  • Paragraflar arasına, yazı tipi boyutunun en az iki katı kadar boşluk ekleyin.
  • Harf aralığı (izleme) yazı tipi boyutunun en az 0,12 katı olmalıdır.
  • Kelime aralığını yazı tipi boyutunun en az 0,16 katı olacak şekilde ayarlayın.

En İyi Uygulamalar​

  • CSS'de esnek kapsayıcılar kullanın: Tasarımınızın farklı ekranlarda iyi uyum sağlaması için sabit kapsayıcılar yerine CSS stillerinde esnek kapsayıcılar kullanın.
  • Metin aralığını satır sonu olmadan ayarlamaya izin verin: Kapsayıcı üzerinde göreceli birimler kullanarak metin aralığını satır sonu olmadan ayarlayın. Sabit bir genişlik uygulanmışsa, büyüme için kapsayıcının genişliğinin %20'si kadar ek alan bırakıldığından emin olun.
  • İçeriğin sorunsuz akışını sağlayın: Metinlerin üst üste binmeden veya kesilmeden sorunsuz bir şekilde akmasını sağlayın.
  • Tutarlılık için göreceli birimler kullanın: Tutarlılık ve esneklik için yazı tipi boyutu, satır aralığı ve öğeler arasındaki boşluk için göreceli birimler kullanın (örneğin, kapsayıcılar için yüzde, yazı tipleri için em).

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Metin aralığı ayarlandığında paragraf, kapsayıcısı içinde dikey olarak genişler.

Nelerden Kaçınılmalı?

HTML/CSS

<style>
.card { 
  "border" : 1px black solid ; 
} 

.card p {
  satır yüksekliği : 1,5 ;
  alt kenar boşluğu : 2em ;
  harf aralığı : 0,12em ;
  kelime aralığı : 0,16em ; 
}
</style>

<div class = "card" style = "height: 200px; width: 100px;" >
<h3> Başlık </h3>​​
<p> Bu , yüksekliği sabit tutulup metin aralığı ayarlanırsa kesilebilecek uzun bir metin paragrafıdır. </p>
</div>

Açıklama: Konteyner için sabit bir yükseklik belirlemek, kullanıcılar metin aralığı özelliklerini ayarladığında metnin kesilmesine veya üst üste binmesine neden olarak okunmasını zorlaştırabilir.

Ne Yapılmalı?

HTML/CSS

<style>
.card { 
  "border" : "1px black solid" ; 
}

.card p {
  "satır yüksekliği" : 1,5 ;
  "alt kenar boşluğu" : 2em ;
  "harf aralığı" : 0,12em ;
  "kelime aralığı" : 0,16em ; 
}
</style>​​

<div class = "card" >
<img src = "image.png" alt = "proper alt text" >
<h3> Başlık </h3>​​
<p> Bu , metin aralığı ayarlandığında gerektiği gibi dikey olarak genişleyecek uzun bir metin paragrafıdır. </p>
</div>

Açıklama: Sabit bir yükseklik belirlemek yerine, satır yüksekliği, paragraf aralığı, harf aralığı ve kelime aralığı için göreceli birimler kullanarak, paragrafın kendi kapsayıcısı içinde dikey olarak genişleyebilmesi sağlanır. Bu, metin aralığı ayarlandığında içeriğin okunabilir ve işlevsel kalmasını sağlar.