Ana içeriğe geç

1.4.4 Metni Yeniden Boyutlandırma

Metin, içerik veya işlev kaybı olmadan %200'e kadar yeniden boyutlandırılabilir olmalıdır.

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

Genel Tanım​

Bu başarı kriteri, kullanıcıların yardımcı teknolojiye ihtiyaç duymadan metni %200'e kadar büyütebilmelerini sağlayarak, alt yazılar ve metin içeren görseller hariç, düzenin ve içeriğin kullanılabilirliğinden ödün vermeden okunabilirliği artırır.

Faydalar​

  • Görme Engelli Kullanıcılar İçin Geliştirilmiş Okunabilirlik: Görme engelli kullanıcıların yardımcı teknolojilere ihtiyaç duymadan metni büyüterek daha iyi okunabilirlik sağlamasına olanak tanır.
  • İçerik Bütünlüğünün Korunması: Metin büyütmenin içerik veya işlevsellik kaybına yol açmamasını sağlar.

Ana Amaç​

Sayfa düzenini bozmadan, yardımcı teknolojiye gerek kalmadan metnin %200'e kadar yeniden boyutlandırılabilmesini sağlamak.

En İyi Uygulamalar​

  • İçeriğin ölçeklenebilir olmasını sağlayın: İçeriğin, bilgi veya işlevsellik kaybı olmadan %200'e kadar ölçeklenebilir olduğundan emin olun.
  • Yeniden boyutlandırıldığında metinlerin üst üste binmesini önleyin: Yeniden boyutlandırıldığında metinlerin üst üste binmemesine veya kullanılamaz hale gelmemesine dikkat edin.
  • Yeniden boyutlandırıldığında kullanıcı arayüzü bileşenlerinin kullanılabilirliğini koruyun: Metin yeniden boyutlandırıldığında kullanıcı arayüzü bileşenlerinin kullanılabilir ve aktif kalmasını sağlayın.
  • Tarayıcıların yakınlaştırma işlevini desteklemediği durumlarda ölçeklendirme için alternatif CSS sağlayın:
  • Tutarlı ölçeklendirme için göreceli ölçüler kullanın: Farklı cihazlar ve ekran boyutlarında tutarlı ölçeklendirme sağlamak için yazı tipi boyutları ve diğer boyutlar için yüzde veya em gibi göreceli ölçüler kullanın.
  • Esneklik için sabit piksel değerlerinden kaçının: Kullanıcı tercihlerine ve cihaz özelliklerine bağlı olarak esnek yeniden boyutlandırmaya olanak sağlamak için metin ve düzen öğeleri için sabit piksel değerleri kullanmaktan kaçının.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir web sitesi, kullanıcıların içerik veya işlevselliği kaybetmeden metni %200'e kadar yeniden boyutlandırmasına olanak tanır.

Nelerden Kaçınılmalı?

HTML/CSS

<div style = "width: 300px;" >
<h1 style = "font-size: 20px;" > Web Sitemize Hoş Geldiniz </h1>
<p style = "font-size: 14px;" >İhtiyaçlarınızı karşılamak için çeşitli hizmetler sunuyoruz. Daha fazla bilgi için lütfen bizimle iletişime geçin . </p>
</div>

Açıklama: Metin %200 oranında yeniden boyutlandırıldığında, kapsayıcısının dışına taşabilir veya onunla çakışabilir, bu da okunmasını ve etkileşimini zorlaştırabilir. Piksel birimi kullanıldığı için öğeler ve kapsayıcı arasında bir ilişki yoktur.

Ne Yapılmalı?

HTML/CSS

<div style = "width: 100%; max-width: 600px;" >
<h1 style = " font -size: 1.25em;" >Web Sitemize Hoş Geldiniz </h1>
<p style = "font-size: 1em;" >İhtiyaçlarınızı karşılamak için çeşitli hizmetler sunuyoruz. Daha fazla bilgi için lütfen bizimle iletişime geçin . </p>
</div>

Açıklama: Metin öğelerine em gibi göreceli birimler uygulamak, metnin yeniden boyutlandırıldığında kapsayıcısı içinde doğru şekilde ölçeklenmesini sağlar; kapsayıcılar için yüzdelik değerler kullanmak ise okunabilirliği ve işlevselliği korur.