Google, Logolar ve Düğmeler İçin Alternatif Metni Açıklıyor

Google'dan Lizzi Sassman ve John Mueller, bir Google Search Off the Record podcast'inde, logolar ve resim tabanlı düğmeler için alternatif metni kullanmanın en iyi yolunu tartışıyor.

Logolara ve düğmelere alt nitelikler eklemek için en iyi uygulamalar vardır.

Kurallar ilk başta biraz karmaşık görünebilir, ancak aslında anlaşılması kolaydır.

Alt niteliklerin doğru olması kullanıcılar için iyidir ve uzun vadede kazançlar için harikadır.

İşlevsel Görsellere Alternatif Metin Ekleme

Lizzi Sassman, tartışmaya, web sayfasında işlevsel bir amacı olan işlevsel görüntülere atıfta bulunarak başlar.

Alt metnin, düğmenin ne yaptığını veya düğmenin bir simge olduğu durumda düğmedeki görüntünün ne olduğunu açıklamasını gerekip gerekmediğini sorar.

Son olarak, düğmeler gibi işlevsel resimlere alternatif metin eklemenin bir SEO amacı olup olmadığını soruyor.

"Lizzi Sassman:
…Görsel varlığa ne kadar özen gösteriyorsak, o varlığı tanımlayan kelimelere de aynı düzeyde enerji koymalıyız. Ki bence harika.

Başka bir resim kategorisi, bazen bir düğme olabilen işlevsel şey gibidir.

Sanki bir şey olarak da işlev gören bir grafikmiş gibi.

Öyleyse alternatif metin bana ne olacağını söylemeli mi?

Eğer buna tıklarsan, seni buraya mı götürecek?

Bu, aynı zamanda bir düğme işlevi gören bir şeyin görüntüsü gibi olabilir.

Ve işlevi tarif ediyor musunuz, yoksa olduğu gibi, bilmiyorum… bir ok resmi gibi mi?

Ayrıca, SEO için önemli mi?

John Mueller:
Evet. Bence…

Lizzi Sassman:
Logo gibi olabilir.

John Mueller:
Erişilebilirlik için, bu muhtemelen mantıklı, sadece bunun etrafında bir şeyler yapmak.

Ancak SEO için insanlar ödeme butonunu veya bunun gibi bir şeyi aramayacak.”

Düğmelerdeki Alternatif Metin SEO Değil Erişilebilirlik İçindir

John Mueller, düğmelere alternatif metin eklemenin SEO amacı olmadığını açıkça ortaya koyuyor.

Ancak bu tür görsellerin alternatif metninin esas olarak erişilebilirlik nedenleriyle olduğunu da gözlemledi.

Lizzi tartışmaya devam etti:

"Lizzi Sassman:
…Ama belki logo ya da logo gibi bir şey isterler. Tıkladığınızda sizi ana sayfaya falan götürür.

Ama aynı zamanda, "Oh, bu bir logo."

Peki, “Bu, Google Arama Merkezi'nin logosu” mu diyorsunuz?

John Mueller:
Emin.

Lizzi Sassman:
Veya açıklayıcı metin ne olurdu gibi.

Logoda Googlebot var, ancak resim hakkında bilinmesi gereken en önemli şey, bunun bir logo olması mı?

Veya logo neye benziyor?

Sanırım bu açıdan insanlar muhtemelen logoyu arıyorlar.

John Mueller:
Evet.

Lizzi Sassman:

X şirketinin logosu nasıl olabilir?

John Mueller:
Evet. Demek istediğim, kaçınmaya çalıştığımız o stratejiye geri dönüyor.

Ne için bulunmayı istiyorsun?

Lizzi Sassman:
Evet, ama sanırım en önemli soru bu, çünkü o zaman bir nevi yön veriyor...

Tüm bu tavşan deliklerine kendimi kaptırabilirim, bu yüzden bir nevi, bilmiyorum, düşünmemiz gereken şeylere öncelik veriyor, çünkü bu şeyler için her şeyi yazmanıza gerek yok, Sanırım."

Logolarda ve Düğmelerde Alternatif Metnin Doğru Kullanımı

Logolar gibi resimlerde alternatif metin kullanmanın doğru yolu, aslında resmin bir bağlantı olup olmamasına bağlıdır.

Logo resmi ana sayfaya geri bağlantı işlevi görüyorsa, bu resmi sahip olduğu işlevle etiketlemek doğrudur, böylece ekran okuyucu kullanan bir site ziyaretçisi bu logonun ana sayfaya bir bağlantı olduğunu söyleyemez.

Resmi HTML standardı oluşturma kuruluşu olan World Wide Web Consortium (W3C), logoların nasıl ele alınacağına dair bir açıklayıcı yayınlar.

Logo Ana Sayfa Bağlantısı

Ana sayfa bağlantısı işlevi gören bir logo, ekran okuyucu kullanıcısına logonun bir ana sayfa bağlantısı olduğunu söyleyen alternatif metin içermelidir.

W3C, kodun bu örneğini kullanır:

 <a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C ana sayfası">
</a>

Yukarıdaki kod, ana sayfaya geri bağlantı olarak da hizmet veren, sayfanın üst kısmında karşılaşılabilecek bir logo içindir.

W3C tarafından sağlanan örnek alternatif metin basitçe “W3C home” diyor, ancak isterseniz daha açıklayıcı olabilir.

Logo ve Metin Ana Sayfa Bağlantısı

Bir resim logosunun ve hemen yanında veya altında bir metnin bulunduğu ve hem resim hem de metnin aynı bağlantı kodu içinde kodlandığı başka türde logo bağlantıları vardır.

Başka bir deyişle, logo için bir bağlantı ve metin için bir bağlantı gibi iki bağlantı yoktur, sadece hem logo hem de metin için bir bağlantıdır.

Bu durumda, metin bağlantının işlevini tanımladığı için, logo bağlantısının işlevini tekrarlamak tekrarlayıcı olacaktır.

Bu durumda en iyi uygulama boş bir alt metin kullanmaktır.

Bu, W3C'nin sağladığı örnektir:

 <a href="https://www.w3.org/">
<img src="w3c.png" alt=""> W3C Ana Sayfası
</a>

Alt özelliğinin resim için nasıl kodlandığına dikkat edin:

 img src="w3c.png" alt=""

Alternatif metin için boş tırnak işaretlerine boş alt nitelik (veya boş alt metin) denir. Bir ekran okuyucu basitçe onu atlayacaktır.

Boş bir alternatif metnin iyi olmasının nedeni, bağlantı işlevinin ne olduğunu açıklayan bir metin olmasıdır:

W3C Ana Sayfası

Simge Bağlantısı için Alternatif Metin

Bazen bir bağlantı, ne yaptığını açıklayan bir metin içermeyen bir simge biçimindedir, örneğin zarf (e-posta veya mesajı temsil eden) veya bir yazıcı (bağlantının bir yazıcıyı etkinleştirdiğini gösterir) biçimindeki bir simge.

Bu durumda görüntünün ne olduğunu (zarf veya yazıcı gibi) tanımlamak kötü bir uygulamadır.

En iyi uygulama, görüntünün ne yaptığını açıklamaktır (bir e-posta başlatın veya bir web sayfası yazdırın).

W3C, aşağıdaki kod ve alternatif metin içeren bir yazıcı simgesi örneğini kullanır:

 <a href="javascript:print()">
<img src="print.png" alt="Bu sayfayı yazdır">
</a>

Gördüğünüz gibi, yazıcı şeklindeki simgenin alt metni olarak “Bu sayfayı yazdır” kelimeleri var. Simgenin ne yaptığını söyler. Bu yardımcı olur.

Düğme için Alternatif Metin

Simge örneğine benzer şekilde, bir düğme görüntüsünün alternatif metni, görüntünün ne yaptığını açıklamalıdır.

W3C, gönder düğmesi için büyüteç içeren bir arama kutusu örneğini kullanır.

Bunu yapmanın kötü yolu, görüntünün bir büyüteç olduğunu açıklamak için alternatif metni kullanmaktır.

En iyi uygulama, görüntünün ne yaptığını açıklamak için alternatif metni kullanmaktır.

Bu, W3C'nin örnek olarak gösterdiği örnek koddur:

 <input type="image" src="searchbutton.png" alt="Ara">

Gördüğünüz gibi, arama düğmesinin alternatif metni, düğmenin işlevinin ne olduğunu açıklayan “Ara” kelimesidir.

Düğmeler ve Logolar için Alternatif Metin

Lizzi ve John, logolar ve düğmeler için farklı senaryoların nasıl ele alınacağına ilişkin ayrıntılara girmedi.

Ancak John, düğmeler ve logolar için alternatif metin için SEO değeri olmadığını, bunun erişilebilirlik için olduğunu belirtti.

Ekran okuyuculu web sayfalarına erişen kullanıcılar için işlevsel olan web sayfalarını uygun şekilde sunmak en iyi uygulamadır.

Daha önce de belirtildiği gibi, ekran okuyucu kullanan kişiler, işletmenizin veya web sitenizin müşterileri veya savunucuları olabilir.

Bu nedenle, erişilebilirlikle ilgili en iyi uygulamaları kullanmak kârlılık açısından iyidir.

alıntılar

W3C'de düğmeler ve logolar için erişilebilirlik hakkında daha fazla bilgi edinin

Fonksiyonel Görüntüler

Aynı kaynak için bitişik resim ve metin bağlantılarını birleştirme

Gönder düğmeleri olarak kullanılan resimlerde alt nitelikleri kullanma

15:57 dakika işaretinde Kayıt Dışı Arama Podcast'ini dinleyin:

Shutterstock/Evgeny Atamanenko'nun öne çıkan görseli