Ana içeriğe geç

1.1.1 Metin Dışı İçerik

Görseller, simgeler ve kontroller gibi tüm metin dışı içerikler; yardımcı teknolojilerin aynı bilgiyi iletebilmesi için uygun metin alternatiflerine sahip olmalıdır.

SC Kodu: 1.1.1 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#non-text-content

Genel Tanım​

WCAG SC 1.1.1 Metin Dışı İçerik, istisnalar dikkate alınarak, kullanıcılar için erişilebilirliği sağlamak amacıyla tüm metin dışı içerikler için metin alternatifleri sunmanın önemini vurgular. Bu kılavuz, dijital içeriği herkes, özellikle de yardımcı teknolojilere güvenenler için algılanabilir hale getirmeyi amaçlamaktadır.

Faydalar​

  • Engelli Kullanıcılar İçin Geliştirilmiş Erişilebilirlik: Görme engelli veya bilişsel engelli kullanıcıların metin dışı içeriğe erişebilmelerini ve anlayabilmelerini sağlar.

Ana Amaç​

Kullanıcılara sunulan metin dışı tüm içeriklerin, kontroller, zamana dayalı medya, testler, duyusal deneyimler, CAPTCHA'lar ve dekoratif öğeler de dahil olmak üzere, metin alternatifleri aracılığıyla erişilebilir olmasını sağlayın. Amaç, yardımcı teknolojilere, bireysel stil sayfası uzantılarına güvenen veya görsel içeriği algılamalarını etkileyen engellere sahip kullanıcılar tarafından içeriğin algılanabilir olmasını sağlamaktır.

En İyi Uygulamalar​

  • Alt Özelliği: Alt özelliğini kullanarak görseller için anlamlı açıklamalar kullanın.
  • Role="img" ve aria-label: Bağlantı metinlerindeki, SVG veya CSS resimlerindeki görsellere bağlam sağlamak için bu öznitelikleri uygulayın.
  • Başlık Özelliği: Resim bağlantıları için başlık özelliğini kullanarak ek bilgiler sunabilirsiniz.
  • Rol="sunum" veya alt="": Bu nitelikleri, temel bilgileri iletmeyen dekoratif görseller için kullanın ve yardımcı teknolojiler tarafından göz ardı edilmeleri gerektiğini belirtin.
  • Görüntü türündeki girdiler: İşlevselliğinin erişilebilir olmasını sağlamak için "image" türündeki bir girdiye Alt özniteliğini uygulayın.
  • Gizli Metin: CSS ile arka planı uygulanan resimler için gizli metin kullanımını uygulayın. Metni CSS kuralları kullanarak gizleyin. Bu, harici stil sayfaları kullanan kullanıcıların metin dışı içerik tarafından iletilen bilgileri yine de algılayabilmelerini sağlayacaktır.
  • Gruplandırılmış Görüntüler için Metin Alternatifi: Bir grup görüntünün toplu anlamını veya işlevini açıklayan tek bir metin alternatifi sağlayın. Bu metin alternatifini gruptaki temsili bir görüntüyle ilişkilendirin, geri kalan görüntüleri ise yardımcı teknolojiler tarafından göz ardı edilebilecek şekilde işaretleyin. Bu yaklaşım, tekrarlamayı azaltır ve tüm grubun amacını özlü bir şekilde ileterek kullanıcılar için verimliliği artırır.

Örnekler ve Açıklamalar​

Örnek 1: img öğelerinde alt özniteliklerinin kullanımı​

Nelerden Kaçınılmalı?

HTML/CSS

<p> Garfield adlı kediyi sahiplenebilirsiniz ! </p>
<img src = "cat.jpg" alt = "" />

Açıklama: Boş bir alt özniteliği, ekran okuyucu kullanan kullanıcılar için anlamlı bir açıklama sağlamaz ve bu da içeriği anlamalarını imkansız hale getirir. Boş alt metin, yalnızca metin dışı içeriğin herhangi bir bilgi veya amaç iletmediği durumlarda kullanılmalı ve özellikle kaçınılmalıdır.

Ne Yapılmalı?

HTML/CSS

<p> Garfield adlı kediyi sahiplenebilirsiniz ! </p>
<img src = "cat.jpg" alt = "Yün yumağıyla oynayan sevimli bir kedi" />

Açıklama: Alt özniteliği, görselle aynı anlamı taşıyan kısa bir metin açıklaması sağlayarak, görme engelli kullanıcıların içeriği anlayabilmelerini sağlar.

Örnek 2: Gruplandırılmış Görseller İçin Tek Bir Metin Alternatifi Kullanma.​

Bir web sitesi, çeşitli giyim ürünlerini sergiliyor. Kullanıcılara ürün yelpazemizin kapsamlı bir görünümünü sunmak için, farklı kategorileri temsil eden üç görsel sunuyoruz. Her görsel, ürünlerimizin eksiksiz bir görsel temsilini oluşturmaya katkıda bulunuyor.

Nelerden Kaçınılmalı?

HTML/CSS

<p> Ürün yelpazemizi keşfedin : </p>
<img src = "product1.jpg" alt = "" />
<img src = "product2.jpg" alt = "" />
<img src = "product3.jpg" alt = "" />

Açıklama: Yanlış uygulamada, her görselin anlamlı bir alt özniteliği bulunmamaktadır. Açıklayıcı metin alternatifleri olmadan, yardımcı teknolojilere güvenen kullanıcılar gruplandırılmış görsellerin amacını veya içeriğini anlayamazlar. Bu durum, web sayfasının genel erişilebilirliğini ve kullanılabilirliğini azaltır.

Ne Yapılmalı?

HTML/CSS

<p> Ürün yelpazemizi keşfedin : </p>
<img src = "product1.jpg" alt = "Çeşitli giyim eşyaları" />
<img src = "product2.jpg" alt = "" aria-hidden = "true" />
<img src = "product3.jpg" alt = "" aria-hidden = "true" />

Açıklama: Düzeltilmiş sürümde, ilk resim birden fazla bileşenden oluşan daha büyük bir resmin bir parçasını temsil etmektedir. Diğer resimler, görsel sunumun tamamlanmasına katkıda bulunur, ancak ek bağımsız bilgi sağlamazlar. Bu nedenle, dekoratif olarak işaretlenirler ve boş alt öznitelikleriyle ekran okuyuculardan gizlenirler. Ana resim için tek bir açıklama kullanmak, engelli kişilerin ayrıntıları tekrarlamadan genel kavramı anlamalarına yardımcı olur. Bu, erişilebilirliği artırır ve tüm ziyaretçiler için daha iyi bir kullanıcı deneyimi sağlar.

Örnek 3: CSS Arka Planları Kullanarak Görsellerdeki Metni Gizleme​

Nelerden Kaçınılmalı?

HTML/CSS

<style> 
.image -with-background {
  background-image : url('charlie- the-dog.jpg') ;
  width : 300px ;
  height : 200px ; 
}
</style>​​

<p> Bir köpek sahiplenin ! </p>
<div role = "img" aria-label = "Charlie the dog" class = "image-with-background" > </div>

Açıklama: Yanlış uygulamada, bir köpek resmi stil sayfası aracılığıyla alınır ve öğeye eklenir. Sorun, kullanıcılar web sitesinin CSS'ini devre dışı bırakıp kendi stil sayfalarını kullandıklarında ortaya çıkar. Bu durumda, resim belgeden kaybolur.

Ne Yapılmalı?

HTML/CSS

<style> 

.image-with-background {
  background-image : url('background-image.jpg') ;
  width : 300px ;
  height : 200px ; 
}

.hidden-text {
  position : absolute ;
  left : -9999px ;
  top : auto ;
  width : 1px ;
  height : 1px ;
  overflow : hidden ;
}

</style>​​

<div class = "image-with-background" role = "img" >
<span class = "hidden-text" aria-hidden = "false" >Charlie adlı köpek ! </span>
</div>

Açıklama: Doğru örnekte, resmin içine ekran dışı bir öğe yerleştirilmiştir. CSS kapatılırsa veya harici bir stil sayfası tarafından geçersiz kılınırsa, öğede "Charlie the dog" alternatif metni görüntülenecektir.