Ana içeriğe geç

1.4.5 Metin Görselleri

Aynı bilgi gerçek metinle sunulabiliyorsa, metin içeren görsellerden kaçınılmalıdır.

SC Kodu: 1.4.5 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#images-of-text

Genel Tanım​

WCAG SC 1.4.5, bilginin iletilmesi için metin kullanılmasını, metin görsellerinin kullanılmamasını gerektirir. Bu, kullanıcıların metni ihtiyaçlarına göre ayarlayabilmelerini sağlayarak okunabilirliği ve erişilebilirliği artırır.

İstisnalar:
1. Metin, başka hiçbir şekilde çoğaltılamayan belirli bir yazı tipi ailesi kullanılarak oluşturulduğunda ve yazarın yazı tipini dağıtma hakkı bulunmadığında. Örneğin, web kullanımına yerleştirilemeyen lisanslı bir yazı tipi kullanan metni görüntüleyen bir web sitesi.
2. Metnin görüntüsü kullanıcının gereksinimlerine göre özelleştirilebildiğinde veya metnin belirli bir sunumunun gerekli olduğu durumlarda. Örneğin, özel tipografiye sahip bir şirket logosu.

Faydalar​

  • Görme Engelli Kullanıcılar İçin Geliştirilmiş Okunabilirlik: Kullanıcılar, görme ihtiyaçlarına uygun olarak metin boyutunu, yazı tipini ve rengini ayarlayabilirler.

1.4.5.c Ana Amaç​

Görseller yerine metin içeren görsellerin kullanılmasını sağlayarak, kullanıcıların daha iyi okunabilirlik ve erişilebilirlik için sunumu özelleştirmelerine olanak tanımak.

En İyi Uygulamalar​

  • CSS ile biçimlendirilmiş başlıklar kullanın: Bitmap resimler yerine CSS ile biçimlendirilmiş başlıklar kullanın.
  • CSS ile metin stilini belirleyin: CSS kullanarak metin öğeleri için boşluk, hizalama, renk ve yazı tipi ailesini belirleyebilirsiniz.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

404 hata sayfası, hata mesajını göstermek için metin veya resim kullanır.

Nelerden Kaçınılmalı?

HTML/CSS

Açıklama: 404 hata mesajı için resim kullanılması, kullanıcıların metin boyutunu, yazı tipini ve rengini özelleştirmesini engeller; bu da görme engelli veya bilişsel engelli kullanıcılar için sorun yaratabilir.

Ne Yapılmalı?

HTML/CSS

<h1 style = "font-family: 'Arial', sans-serif; font-size: 2em; color: #FF0000;" > 404 Hatası: Sayfa Bulunamadı </h1>

<p style = "font-size: 1em; color: #333;" >Üzgünüm, aradığınız sayfa mevcut değil. </p>
**404**

Açıklama: 404 hata mesajının HTML ve CSS ile biçimlendirilmesi, kullanıcıların metin sunumunu ihtiyaçlarına göre ayarlayabilmelerini sağlayarak okunabilirliği ve erişilebilirliği artırır.