Web

Görsel Alt Metni Nasıl Yazılır? Web Sitesi İçin Örneklerle

Talha Aslan 15 dakikalık okuma 1 görüntülenme

Kısa cevap

Görsel alt metni nasıl yazılır?

Görsel alt metni, ekran okuyucunun görsel yerine seslendirdiği ve görsel yüklenmediğinde görünen kısa açıklamadır. Onu yazarken görüntüyü tarif etmezsiniz; görselin o sayfadaki işlevini anlatırsınız. Görsel bir bağlantıysa hedefi, bilgi taşıyorsa bilgiyi, süs ise boş değeri yazarsınız.

Tüm detaylar ve örnekler için yazıya devam edin

Bu rehberde Talha Aslan ve ekibi olarak web sitelerinde en sık karşılaştığımız görsel türlerini tek tek ele alıyoruz. Ana sayfa görseli, logo, ikon, ürün fotoğrafı, ekip fotoğrafı, grafik ve kampanya afişi için ayrı örnekler veriyoruz. Alt metnin ne olduğunu ve SEO tarafındaki rolünü daha önce alt text nedir, ne işe yarar yazımızda anlattık. Burada ise doğrudan yazma işine odaklanıyoruz. Yani amaç, sitenizdeki her görsel için doğru cümleyi bulmanız.

Yazmaya başlamadan önce hangi soruyu sormalısınız?

Tek bir soru işin yarısını çözer: bu görsel kaldırılsaydı okur neyi kaçırırdı? Cevap "hiçbir şey" ise görsel büyük olasılıkla dekoratiftir. Cevap bir bilgi, bir duygu ya da bir eylemse alt metin tam olarak o eksiği doldurmalıdır.

Örneğin bir kafe sitesinde fincan fotoğrafı yalnız havayı süslüyorsa okur bir şey kaybetmez. Öte yandan aynı fotoğraf "yeni menümüzdeki filtre kahve" diye tanıtılıyorsa okur ürünü kaçırır. Bu nedenle alt metni dosyaya değil, görselin bulunduğu bağlama göre yazarsınız.

Ekibimiz bir siteyi devraldığında ilk olarak bu soruyu her görsel için tek tek sorar. Ardından görselleri üç gruba ayırır:

  • Bilgi taşıyan görseller: ürün, ekip, grafik, ekran görüntüsü.
  • İşlev taşıyan görseller: logo bağlantısı, ikon buton, arama simgesi.
  • Süs görselleri: arka plan deseni, ayraç, tekrar eden ikon.

Böylece yazma işi bir tahmin oyunu olmaktan çıkar. Her grubun kendi kuralı vardır ve kurallar aşağıdaki bölümlerde netleşir.

W3C alt karar ağacı adım adım nasıl işler?

W3C, alt metin seçimini kolaylaştırmak için bir alt karar ağacı yayımlar. Ağaç beş soru sorar ve her cevap sizi bir sonuca götürür. Biz projelerde bu sırayı neredeyse aynen uygularız:

  1. Görselde metin var mı? Metin hemen yanında gerçek metin olarak da duruyorsa boş alt değeri yazarsınız. Metin başka yerde yoksa alt metne o metni aktarırsınız.
  2. Görsel bir bağlantı ya da buton içinde mi? Öyleyse bağlantının hedefini veya düğmenin eylemini yazarsınız.
  3. Görsel sayfaya anlam katıyor mu? Basit bir fotoğrafsa kısa bir anlam cümlesi yeterlidir. Grafik gibi karmaşık bir bilgiyse ayrıntıyı sayfada ayrıca verirsiniz.
  4. Görsel tamamen süs mü? Öyleyse boş alt değeri kullanırsınız.
  5. Durum bunlara uymuyorsa W3C görsel eğitimindeki ilgili bölüme bakarsınız.

Ağacın en değerli yanı sıralamadır. Çünkü metin ve bağlantı soruları önce gelir. Dolayısıyla bir logo hem marka hem bağlantı olsa bile önce bağlantı kuralını uygularsınız.

Aynı görsel neden iki farklı alt metin alabilir?

W3C, bir görselin bilgi verici mi süs mü olduğunu yazarın görseli sayfaya koyma nedenine bağlar. Yani aynı fotoğraf bir sayfada anlam taşırken başka bir sayfada süs olabilir. Bu nedenle medya kütüphanesine tek bir alt metin yazıp her yerde kullanmak çoğu zaman yanlış sonuç verir.

Örnek senaryo: bir mimarlık ofisi, tamamlanmış bir villanın fotoğrafını hem ana sayfada hem proje sayfasında kullanıyor. Ana sayfada fotoğraf "projelerimiz" başlığının altında genel bir izlenim veriyor. Proje sayfasında ise okur villanın cephesini incelemek istiyor.

  • Ana sayfa için: "Ofisimizin tasarladığı taş cepheli iki katlı villa".
  • Proje sayfası için: "Villanın güney cephesi, geniş cam yüzeyler ve ahşap pergole".
  • Blog yazısında süs olarak kullanılıyorsa: boş alt değeri.

Kısacası görseli değil, görselin o sayfadaki görevini yazarsınız. İçerik yönetim sisteminiz sayfa bazında alt metin değiştirmenize izin veriyorsa bu esneklikten mutlaka yararlanın.

Ana sayfa görseli için görsel alt metni ne söylemeli?

Ana sayfanın büyük kahraman görseli (hero, sayfanın en üstündeki geniş görsel) çoğu sitede iki rolden birini oynar. Ya bir izlenim yaratır ya da yalnız başlığın arka planıdır. W3C, izlenim veya duygu aktaran görsellerde alt metnin o izlenimi adlandırmasını önerir.

Örneğin bir aile restoranı düşünün. Gülen bir ailenin masada oturduğu fotoğraf "aile dostu bir mekânız" mesajını veriyorsa alt metin bu mesajı kısa biçimde taşıyabilir: "Bahçe masasında yemek yiyen üç kuşak bir aile". Böylece ekran okuyucu kullanan okur da aynı izlenimi alır.

Ancak görselin üstünde zaten büyük bir başlık ve açıklama varsa, fotoğraf yalnız atmosfer içindir. Bu durumda boş alt değeri çoğu zaman daha doğru seçimdir. Aksi halde okur önce uzun bir fotoğraf tarifini, ardından başlığı dinler.

Kaydırmalı ana sayfa görsellerinde (slider) her slaytı ayrı değerlendirirsiniz. Slaytın üstündeki kampanya metni görselin içine gömülüyse o metni alt metne aktarmanız gerekir. Metin gerçek HTML olarak duruyorsa tekrar etmezsiniz.

Logo için alt metin nasıl olmalı?

Logo neredeyse her sayfada bulunur ve çoğunlukla ana sayfaya bağlantı verir. W3C işlevsel görsel eğitiminde, başka bağlantı metni olmayan bir logo için alt metnin hedefi adlandırmasını önerir. Yani "logo" kelimesi tek başına yetmez; okur bağlantının nereye gittiğini bilmek ister.

Örnek senaryo için hayalî bir marka kullanalım: "Deniz Yapı". Logo üst menüde ana sayfaya bağlıysa "Deniz Yapı ana sayfa" yazarsınız. Logo yanında görünür bir "Deniz Yapı" bağlantı metni de varsa logoya boş alt değeri verirsiniz. Çünkü aynı bağlantı iki kez okunur.

Alt bilgide (footer) bağlantısız bir logo duruyorsa yalnız marka adını yazmanız yeterlidir. Öte yandan iş ortağı ya da sertifika logoları bilgi taşır. Bu logolarda kurumun adını ve gerekiyorsa belgenin türünü yazarsınız.

  • Üst menüde bağlantılı logo: "Deniz Yapı ana sayfa".
  • Yanında metin olan bağlantılı logo: boş alt değeri.
  • Bağlantısız footer logosu: "Deniz Yapı".
  • Sertifika rozeti: belgenin adı ve veren kurum.

Bağlantı ve buton görsellerine ne yazmalısınız?

Bir görsel tıklanabiliyorsa onun alt metni artık bir açıklama değil, bir bağlantı metnidir. W3C, büyüteç simgeli bir arama düğmesi için "Ara" gibi eylemi anlatan bir metin önerir. MDN de benzer biçimde sağ ok yerine "sonraki sayfa" demeyi örnek verir.

Bu kural özellikle sosyal medya ikonlarında sık çiğnenir. Footer'daki küçük ikonlara çoğu zaman hiç alt metin yazılmamış olur ya da yalnız "ikon" denmiş olur. Oysa okur o bağlantının nereye gittiğini duymalıdır. Örneğin "Instagram hesabımız" ya da "LinkedIn şirket sayfamız" gibi.

Ayrıca yeni sekmede açılan bağlantılardaki küçük simgeyi de unutmayın. W3C, bu tür ikonların "yeni pencerede açılır" anlamını aktarmasını önerir. Böylece okur beklenmedik bir sekme değişikliğiyle karşılaşmaz.

  • Sepet simgesi: "Sepetim".
  • Telefon simgesi bağlantısı: "Bizi arayın".
  • Menü açma simgesi: "Menüyü aç".
  • Kapatma çarpısı: "Pencereyi kapat".

Dolayısıyla tıklanabilir görsellerde şu soruyu sorarsınız: bu bağlantı düz metin olsaydı üzerinde ne yazardı?

Dekoratif görseli nasıl tanırsınız?

Dekoratif görsel, kaldırıldığında sayfadaki bilgi değişmeyen görseldir. Arka plan desenleri, bölüm ayraçları, köşe süslemeleri ve metnin hemen yanında tekrar eden ikonlar bu gruptadır. WCAG 1.1.1 başarı ölçütü, süs ve biçimlendirme amaçlı içeriğin yardımcı teknolojilerin yok sayabileceği biçimde uygulanmasını ister.

MDN'ye göre boş alt değeri, görselin içeriğin önemli bir parçası olmadığını bildirir. Ancak alt özniteliğini tamamen silmek aynı anlama gelmez. MDN, alt özniteliği eksik olduğunda bazı ekran okuyucuların dosya adını okuyabileceğini belirtir. Bu yüzden "IMG_4821.jpg" gibi anlamsız bir ses duymamak için özniteliği boş da olsa yazarsınız.

Sık yaptığımız bir test şudur: görseli kapatıp sayfayı yeniden okuruz. Anlam eksilmiyorsa görsel süstür. Fakat bir duygu ya da marka izlenimi kayboluyorsa görsel bilgi verici gruba geçer.

Üstelik CSS ile arka plana yerleştirilen görseller zaten ekran okuyucuya ulaşmaz. Tamamen süs olan bir deseni HTML yerine CSS arka planı olarak eklemek, bu yüzden temiz bir çözümdür. Bu kararı tasarım aşamasında vermek, sonradan yüzlerce görseli tek tek düzeltmekten çok daha kolaydır.

Metin içeren görsellerde ne yaparsınız?

Kampanya afişleri, indirim bantları ve sosyal medyadan gelen tasarımlar çoğu zaman metni görselin içine gömer. Karar ağacının ilk sorusu tam olarak bu durum içindir. Görseldeki metin sayfada başka yerde yoksa alt metne o metni aynen aktarırsınız.

Örnek senaryo: bir mobilya mağazası ana sayfasına "Tüm koltuklarda sezon sonu indirimi" yazılı bir afiş koyuyor. Bu metin yalnız görselin içinde. Dolayısıyla alt metin de "Tüm koltuklarda sezon sonu indirimi" olmalıdır. Afiş bir kampanya sayfasına bağlıysa hedefi de eklersiniz: "Sezon sonu koltuk indirimi, kampanya sayfasına git".

Ancak en iyi çözüm çoğu zaman metni görselden çıkarmaktır. Gerçek HTML metni ekran büyütüldüğünde bulanıklaşmaz, çeviri araçlarıyla çevrilir ve arama motorları tarafından doğrudan okunur. Bu nedenle tasarım ekibimiz kampanya metinlerini görselin üstüne kod olarak yerleştirmeyi tercih eder.

Görsel bir alıntı veya müşteri yorumunun ekran görüntüsüyse durum biraz farklıdır. Yorumun tam metnini görselin hemen altına gerçek metin olarak koyarsanız görsele boş alt değeri verebilirsiniz. Böylece okur aynı cümleyi iki kez dinlemez.

Ürün fotoğrafı için görsel alt metni örnekleri nelerdir?

Bir e-ticaret sitesinde en çok bilgi taşıyan görsel, ürün fotoğrafıdır. Okur çoğu zaman satın alma kararını bu fotoğraflara bakarak verir. Ürün adı zaten sayfa başlığında yazar. Bu yüzden ürün görselinde görsel alt metni, ürün adını tekrarlamaktan çok, fotoğrafın gösterdiği farkı anlatmalıdır. Örneğin açı, renk, doku ya da kullanım anı bu farkın parçasıdır.

Google, görsel SEO belgesinde iyi ve kötü örnekleri yan yana verir. Hiç alt metin yazmamak kötü, anahtar kelime yığmak da kötüdür. "Köpek yavrusu" daha iyi, "top getiren Dalmaçyalı köpek yavrusu" ise en iyi örnek olarak geçer. Yani ayrıntı arttıkça açıklama daha yararlı hâle gelir.

Aynı mantıkla hayalî bir ürün galerisi için örnekler:

  • Ana fotoğraf: "Lacivert keten gömlek, önden görünüm".
  • İkinci fotoğraf: "Gömleğin sedef düğmeleri ve dikiş ayrıntısı".
  • Üçüncü fotoğraf: "Gömleği giyen modelin yandan görünümü".
  • Renk seçeneği küçük resmi: "Haki renk seçeneği".

Böylece galeriyi gezen okur her görselin neden orada olduğunu anlar. Ürün metniyle uyum için SEO uyumlu ürün açıklaması rehberimize de göz atabilirsiniz. Ayrıca dosya boyutu ve biçimi gibi teknik konuları web sitesi görsel optimizasyonu yazımızda ayrıca ele aldık.

Ekip ve kurucu fotoğraflarında ne yazmalısınız?

Hakkımızda sayfalarındaki ekip fotoğrafları güven oluşturur. Bu yüzden okur kimi gördüğünü bilmek ister. Kişinin adını ve rolünü yazmak çoğu durumda yeterlidir.

Ancak burada da tekrar riskine dikkat edersiniz. Fotoğrafın hemen altında ad ve unvan zaten gerçek metin olarak yazıyorsa, alt metinde aynısını yazmak okura bir şey katmaz. Bu durumda alt metin kişinin fotoğrafta ne yaptığını anlatabilir ya da boş bırakılabilir.

Örnek senaryo için hayalî bir hukuk bürosu düşünelim:

  • Altında isim yazmayan fotoğraf: "Kurucu ortak Av. Elif Kaya, ofisinde".
  • Altında isim ve unvan yazan kart: boş alt değeri ya da "Elif Kaya müvekkille toplantıda".
  • Toplu ekip fotoğrafı: "Büro ekibimiz, toplantı salonunda".

Öte yandan fiziksel özellikleri, yaşı ya da kişinin dış görünüşünü uzun uzun tarif etmekten kaçınırsınız. Bu bilgiler genellikle sayfanın amacına hizmet etmez. Kısacası ekip fotoğrafında "kim" ve "ne yapıyor" soruları çoğu zaman yeterlidir.

Hizmet ikonları ve özellik kartlarında ne yaparsınız?

Kurumsal sitelerde "Hızlı Teslimat", "7/24 Destek" gibi başlıkların yanında küçük ikonlar bulunur. Bu ikonlar çoğunlukla başlığın görsel bir tekrarıdır. Karar ağacına göre yanındaki gerçek metni tekrar eden görsel boş alt değeri alır.

Peki ikon tek başına duruyorsa ne olur? Örneğin bir tabloda yalnız yeşil bir onay işareti "bu pakette var" anlamına geliyorsa ikon bilgi taşır. O zaman alt metin "Pakete dahil" gibi bir anlam cümlesi olmalıdır. Aksi halde ekran okuyucu kullanan okur tablonun yarısını kaçırır.

Ayrıca ikon setlerini SVG olarak kullanan sitelerde aynı ilkeyi korursunuz. Süs olan SVG ikonları yardımcı teknolojilerden gizlenir, bilgi taşıyanlara erişilebilir bir ad verilir. Bu ayrımı tasarım dosyasında işaretlemek, geliştirme aşamasında hatayı büyük ölçüde azaltır.

Ekibimizin kullandığı kısa kural şudur: ikonun yanında aynı anlamı veren bir kelime varsa ikon susar. Kelime yoksa ikon konuşur. Bu kural, kart tasarımlarında yüzlerce ikonu hızla sınıflandırmanızı sağlar.

Grafik, infografik ve ekran görüntüsü için ne yazmalısınız?

Karmaşık görsellerde tek bir kısa cümle bilginin tamamını taşıyamaz. W3C karmaşık görseller eğitiminde iki parçalı bir çözüm önerir. Kısa alt metin görseli tanımlar, uzun açıklama ise asıl bilgiyi metin olarak verir.

Örnek senaryo: bir enerji danışmanlık sitesi, aylara göre elektrik tüketimini gösteren bir çubuk grafik yayınlıyor. Alt metin "Aylık elektrik tüketimi grafiği, ayrıntılar aşağıdaki tabloda" olabilir. Grafiğin hemen altında aynı verileri içeren bir tablo ya da kısa bir özet paragrafı yer alır.

W3C, uzun açıklamayı sayfanın ana içeriğinde herkesin erişebileceği biçimde vermeyi önerir. Ayrıca figure ve figcaption yapısıyla görseli ve açıklamasını birbirine bağlayabilirsiniz. Grafiklerin sitede nasıl daha anlaşılır sunulacağını veri görselleştirme yazımızda anlattık.

Ekran görüntülerinde de benzer bir yol izlersiniz. Bir yazılım rehberindeki ekran görüntüsü bir adımı gösteriyorsa alt metin o adımı anlatır: "Ayarlar menüsünde bildirimler bölümü açık". Böylece görüntüyü göremeyen okur da adımı takip eder.

Görsel türüne göre örnek alt metinler nasıl görünür?

Aşağıdaki tablo, bu rehberdeki kararları tek bakışta özetler. Örneklerin tamamı hayalî markalara dayalı örnek senaryolardır.

Görsel türüKarar ağacı sonucuZayıf örnekGüçlü örnek
Bağlantılı logoHedefi yazlogoDeniz Yapı ana sayfa
Arama simgesiEylemi yazbüyüteçAra
Arka plan deseniBoş alt değeridesen görselialt=""
Metin içeren afişMetni aktarindirim afişiTüm koltuklarda sezon sonu indirimi
Ürün fotoğrafıKısa anlamgömlek gömlek keten gömlekLacivert keten gömlek, önden görünüm
Ekip fotoğrafıKısa anlamekip resmiBüro ekibimiz, toplantı salonunda
Çubuk grafikKısa alt metin ve uzun açıklamagrafikAylık tüketim grafiği, ayrıntılar tabloda
Başlığı tekrar eden ikonBoş alt değerihızlı teslimat ikonualt=""

Tabloyu bir kontrol aracı olarak kullanabilirsiniz. Önce görseli doğru satıra yerleştirirsiniz, ardından o satırdaki kalıba göre cümleyi kurarsınız.

Kötü bir görsel alt metnini iyisine nasıl çevirirsiniz?

Mevcut bir siteyi düzeltirken sıfırdan yazmak yerine eldeki metni dönüştürmek daha hızlıdır. Ekibimiz bunun için üç adımlı bir yol izler. Önce gereksiz kelimeleri atarız, ardından bağlamı ekleriz, son olarak tekrarları temizleriz.

Örnek dönüşümler şöyle:

  • "resim1" yerine "Çatı terasından Boğaz manzarası".
  • "Bu görselde bir kadın bilgisayar kullanıyor" yerine "Muhasebe uzmanımız müşteri dosyasını inceliyor".
  • "web tasarım web tasarım ajansı İstanbul web tasarım" yerine "Mobil ve masaüstünde açık kurumsal site tasarımı".
  • "tıkla" yerine "Kampanya ayrıntılarını gör".

İlk dönüşüm anlamsız dosya adını düzeltir. İkincisi, MDN'nin uyardığı "bu görselde" kalıbını kaldırır ve görselin işlevini öne çıkarır. Üçüncüsü ise Google'ın spam olarak görebileceği anahtar kelime yığmasını temizler. Dördüncüsü tıklanabilir görsele gerçek bir hedef verir.

Bu dönüşümleri yaparken her görsel için tek bir soru yeterlidir: bu cümle sayfada düz metin olarak dursaydı okura yardım eder miydi? Cevap evetse cümle doğru yoldadır.

Alt metinde hangi kelimelerden kaçınmalısınız?

Bazı kelimeler alt metne hiçbir şey katmaz ve yalnız dinleme süresini uzatır. Ekran okuyucular genellikle öğenin bir görsel olduğunu zaten bildirir. Bu nedenle "resim", "görsel", "fotoğrafı" gibi kelimeleri cümlenin başına koymanıza gerek yoktur.

MDN de alt metnin görselin varlığını ya da dosya adını anlatmaması gerektiğini belirtir. Örneğin "görsel" yazmak yerine görselin içeriğini anlatırsınız. Öte yandan görselin türü bilgi taşıyorsa, yani bir yağlı boya tablo ya da bir harita söz konusuysa tür adını kullanabilirsiniz.

Kaçındığımız diğer kalıplar şunlardır:

  • Anahtar kelime listesi ve virgüllerle sıralanmış arama terimleri.
  • "Tıklayın", "buraya" gibi hedefi belirsiz bağlantı ifadeleri.
  • Görselin hemen altındaki başlığın birebir kopyası.
  • Telif notu, çekim tarihi ve fotoğrafçı adı gibi okura işlevsiz bilgiler.

Kısacası her kelime bir işe yaramalıdır. Anahtar kelime ancak görseli doğal biçimde anlatıyorsa cümlede yer alır. Google da alt metinde anahtar kelimeleri uygun biçimde kullanmayı, ama yığmamayı önerir.

Görsel altı yazısı ile alt metin çakışırsa ne olur?

Görsel altı yazısı (figcaption), görseli gören ve görmeyen herkesin okuduğu görünür bir açıklamadır. Alt metin ise görselin yerine geçer. İkisi aynı cümleyi taşıyorsa ekran okuyucu kullanan okur aynı bilgiyi art arda iki kez dinler.

W3C, çevredeki metin görselin gösterdiğini zaten açıklıyorsa görselin gereksiz ve dolayısıyla dekoratif sayılabileceğini belirtir. Bu durumda boş alt değeri mantıklı bir seçimdir. Ancak altyazı yalnız bağlam veriyorsa, alt metin görselin içeriğini anlatmaya devam eder.

Örnek senaryo: bir gezi blogunda altyazı "Sabah 7'de çıktığımız patika" diyor. Alt metin ise "Çam ormanının içinden geçen dar toprak yol" olabilir. Böylece iki metin birbirini tamamlar, tekrar etmez.

Title özniteliğinde de benzer bir tuzak vardır. MDN, title özniteliğinin alt metnin yerine geçmediğini ve aynı değeri ikisine birden yazmamayı önerir. Çünkü bazı ekran okuyucular iki değeri de okur. Ayrıca dokunmatik ekranlarda title ipucu çoğu zaman hiç görünmez.

Galeri, harita ve form görsellerinde nasıl ilerlersiniz?

Galeriler aynı konunun çok sayıda fotoğrafını içerir. Hepsine aynı alt metni yazmak en yaygın hatadır. Bunun yerine her fotoğrafın farkını yazarsınız: açı, oda, ayrıntı ya da an.

Örneğin bir otel galerisinde "Deniz manzaralı oda" yazan on fotoğraf yerine şu ayrımı yaparsınız: "Odanın balkonundan deniz manzarası", "Çift kişilik yatak ve çalışma masası", "Duşakabinli banyo". Böylece okur galeriyi gerçekten gezebilir.

Harita görselleri ise genellikle bir adres bilgisini taşır. Statik bir harita görseli kullanıyorsanız alt metin adresi ya da konumu söylemelidir. Ayrıca adresi sayfada gerçek metin olarak da yazmanız gerekir. Yalnız görselde duran bir adres, kopyalanamaz ve çoğu okur için işe yaramaz.

Formlardaki görsel düğmeler için bağlantı kuralı geçerlidir. "Gönder" yazan bir görsel düğmenin alt metni de "Gönder" olmalıdır. WCAG 1.1.1 ayrıca CAPTCHA gibi doğrulama görsellerinde amacın metinle anlatılmasını ve farklı duyulara dayalı alternatiflerin sunulmasını ister.

Web tasarım sürecinde alt metni kim yazmalı?

Alt metin çoğu projede en sona kalır ve geliştirici tarafından aceleyle doldurulur. Oysa doğru metni görselin neden seçildiğini bilen kişi yazabilir. Bu yüzden biz alt metni içerik planının bir parçası olarak ele alırız.

Süreç şöyle işler. Tasarımcı her görselin rolünü tasarım dosyasında işaretler: bilgi, işlev ya da süs. İçerik yazarı bilgi ve işlev taşıyan görseller için cümleyi yazar. Geliştirici ise süs görsellerini boş değerle ya da CSS arka planıyla uygular. Böylece sitenin yayına çıktığı gün alt metinler de hazır olur.

Bu iş akışını sitenizde sıfırdan kurmak istiyorsanız web tasarım hizmetimiz kapsamında görsel rollerini ve alt metinleri tasarım aşamasında planlıyoruz. Erişilebilirlik ilkelerinin genel çerçevesi için web erişilebilirliği ve WCAG yazımız iyi bir başlangıç noktasıdır.

Sosyal medya paylaşımlarındaki alt metin ise farklı bir bağlamdır. O konuyu sosyal medyada erişilebilirlik yazımızda ayrıca ele aldık.

Görsel alt metni yayından önce nasıl kontrol edersiniz?

Yazdığınız metinleri yayından önce kısa bir listeyle gözden geçirmek, sonradan düzeltme yükünü azaltır. Ekibimiz her sayfa için aşağıdaki kontrol listesini kullanır:

  1. Her görselin bir alt özniteliği var mı, süs görsellerinde bile?
  2. Bağlantılı ve buton görseller hedefi ya da eylemi söylüyor mu?
  3. Görselin içine gömülü metin, alt metinde ya da sayfada gerçek metin olarak duruyor mu?
  4. Alt metin, hemen yanındaki başlığı veya altyazıyı birebir tekrar ediyor mu?
  5. Galerideki fotoğrafların her biri farklı bir şey söylüyor mu?
  6. Grafik ve infografiklerin ayrıntısı sayfada metin ya da tablo olarak var mı?
  7. "Resim", "görsel" gibi gereksiz kelimeler ve anahtar kelime yığını temizlendi mi?
  8. Dosya adları anlamlı mı, "IMG_0023" gibi otomatik adlar kaldı mı?

Ardından sayfayı bir kez de ekran okuyucuyla dinlemenizi öneririz. Telefonların ve bilgisayarların yerleşik ekran okuyucuları bunun için yeterlidir. Sitenin genel teknik durumunu hızlıca görmek için SEO analiz aracımızı da kullanabilirsiniz.

Bu düzeni sitenize nasıl taşırsınız?

Yeni bir sitede bu kurallar baştan uygulanırsa ek maliyet neredeyse oluşmaz. Mevcut bir sitede ise en çok ziyaret alan sayfalardan başlamak mantıklıdır. Ana sayfa, ürün veya hizmet sayfaları ve iletişim sayfası ilk sırada yer alır.

Önerdiğimiz sıralama şudur. Önce bağlantılı görselleri düzeltirsiniz, çünkü bunlar gezinmeyi doğrudan etkiler. Ardından metin içeren afişleri ele alırsınız. Son olarak ürün, ekip ve galeri fotoğraflarına geçersiniz. Bu sıra, en büyük erişim sorunlarını en kısa sürede kapatır.

Görsellerin arama sonuçlarındaki görünümünü de güçlendirmek istiyorsanız IPTC meta verisi konusuna bakabilirsiniz. Google'ın resmi önerilerini ise Google Görseller SEO en iyi uygulamaları sayfasında bulursunuz.

Sitenizi bu düzenle yeniden kurmak ya da baştan tasarlamak isterseniz web tasarım sayfamızdan proje ayrıntılarınızı paylaşarak teklif isteyebilirsiniz. Böylece görsel planlaması, alt metinler ve erişilebilirlik kontrolleri en baştan projenin parçası olur.

Sıkça Sorulan Sorular

Görsel alt metni kaç karakter olmalı?
Kesin bir karakter sınırı yoktur; amaç görselin işlevini en kısa biçimde anlatmaktır. Çoğu fotoğraf ve ikon için kısa bir cümle yeterlidir. Grafik gibi karmaşık görsellerde kısa alt metin görseli tanımlar, ayrıntılı bilgiyi ise sayfada metin ya da tablo olarak verirsiniz. Uzun tarifler dinleme süresini uzatır ve okuru yorar.
Dekoratif görsellerde alt özniteliğini silebilir miyim?
Hayır, silmek yerine boş bırakmalısınız. Boş alt değeri, görselin süs olduğunu yardımcı teknolojilere bildirir. MDN'ye göre öznitelik tamamen eksik olduğunda bazı ekran okuyucular dosya adını seslendirebilir. Bu da okura anlamsız bir harf ve sayı dizisi dinletir. Bu nedenle süs görsellerinde bile özniteliği boş değerle yazarsınız.
Alt metne anahtar kelime eklemek SEO'ya yardımcı olur mu?
Anahtar kelime ancak görseli doğal biçimde anlatıyorsa yararlıdır. Google, alt metinde anahtar kelimeleri uygun biçimde kullanmayı önerir ama yığmanın kötü kullanıcı deneyimi yarattığını ve sitenin spam olarak görülmesine yol açabileceğini belirtir. Bu yüzden önce okura yardım eden cümleyi yazarsınız, anahtar kelime ancak doğal olarak uyuyorsa o cümlede kalır.
Aynı görsele her sayfada aynı alt metni yazmalı mıyım?
Her zaman değil, çünkü alt metin görselin o sayfadaki görevine bağlıdır. W3C, bir görselin bilgi verici mi süs mü olduğunu yazarın görseli koyma nedenine bağlar. Aynı fotoğraf bir proje sayfasında ayrıntı anlatırken bir blog yazısında yalnız süs olabilir. İçerik yönetim sisteminiz izin veriyorsa alt metni sayfa bazında uyarlamanızı öneririz.
Logoya alt metin olarak sadece marka adını yazmak yeterli mi?
Logo bir bağlantıysa marka adı tek başına yetmez; bağlantının hedefini de söylemelisiniz. W3C, başka bağlantı metni olmayan bir logo için hedefi adlandıran bir metin önerir, örneğin marka adı ve ana sayfa. Logonun yanında aynı adı taşıyan görünür bir bağlantı metni varsa logoya boş alt değeri verirsiniz.
Alt metinleri yapay zekaya yazdırmak doğru mu?
Yapay zeka bir taslak üretebilir ama görselin sayfadaki amacını bilmez. Araç çoğu zaman görüntüyü tarif eder, işlevi ise atlar. Bu nedenle bağlantılı görselleri, metin içeren afişleri ve dekoratif görselleri mutlaka bir kişi kontrol etmelidir. Taslağı kullansanız bile her cümleyi karar ağacındaki sorulara göre gözden geçirmenizi öneririz.
  • görsel alt metni
  • alt metin
  • web erişilebilirliği
  • WCAG
  • web tasarım
  • görsel SEO
  • ekran okuyucu
Paylaş:
Talha Aslan

Google Partner dijital pazarlama uzmanı. 2012’den beri SEO, Google Ads, web tasarım ve e-ticaret projelerinde sahada; bu blogda gördüğünüz her yazı o deneyimden çıkar.

Sıradaki proje

Projeniz için teklif alın.

Talebiniz doğrudan Talha Aslan ve ekibine ulaşır: stratejiyi Talha kurar, uygulamayı deneyimli ekip yürütür. Aynı gün dönüş yapar, kapsamı, takvimi ve tutarı yazılı teklifle 1 iş günü içinde göndeririz.