Alt metin nasıl yazılır?

Alt metin nedir

Alt metin, HTML'de <img> etiketinin alt özniteliğine yazılan metindir. Türkçede "alt etiketi", "alt text" ya da "görsel açıklaması" da denir. Ekran okuyucu kullanan biri görseli bu metinden tanır.

Kuralın dayanağı WCAG'nin 1.1.1 Metin dışı içerik başarı kriteridir. Kriter A seviyesindedir. Kullanıcıya sunulan her metin dışı içeriğin, aynı amaca hizmet eden bir metin alternatifi olmasını ister.

Kriterin birkaç istisnası var; ikisi görseller için önemli. Bir form kontrolünün amacını anlatan bir adı olması yeter. Yalnızca süs olan, biçim için kullanılan ya da kullanıcıya gösterilmeyen içerik ise yardımcı teknolojinin atlayabileceği şekilde işaretlenmeli.

Kriterin amacını W3C'nin açıklama belgesi anlatır. Metin alternatifi görsel, işitsel ya da dokunsal herhangi bir duyu yoluyla sunulabilir. Görseli göremeyen biri onu sentetik sesle dinler. Kriterlerin geri kalanı için WCAG rehberine bakabilirsiniz.

Alt metin nasıl yazılır

Önce görselin bu sayfada ne işe yaradığını sorun. Aynı fotoğraf bir sayfada bilgi taşır, başka bir sayfada süs olur. W3C'nin dekoratif görseller rehberi de kararı yazara bırakır ve görselin sayfadaki amacına bakmasını ister.

• Görselin işini yazın. Yazıcı ikonlu bir butonun alt metni "Bu sayfayı yazdır" olur. W3C'nin işlevsel görseller sayfasındaki örnek de budur.
• Kısa tutun. W3C'ye göre alt metin, görselin amacının olabilecek en kısa tarifi olmalı. Kısa bir ifade ya da cümle yetmiyorsa uzun açıklama yöntemine geçin.
• "Resmi", "görseli", "ikonu" yazmayın. W3C'nin ipuçları sayfası bunu genelde gereksiz bulur, çünkü ekran okuyucu görselin varlığını zaten duyurur. Tablo, fotoğraf ya da çizim ayrımı önemliyse türü yazabilirsiniz.
• Alt özniteliğini silmeyin. W3C'ye göre alt hiç yazılmazsa bazı ekran okuyucular dosya adını okur. Süs görseline de alt="" yazın.
• Dosya adını alt metin yapmayın. WCAG'nin açıklama belgesi, dosya adını metin alternatifi olarak kullanmayı bir hata (failure) olarak listeler. "IMG_2041.jpg" kimseye bir şey anlatmaz.

Görsel türlerine göre alt text örnekleri

W3C'nin görseller rehberi görselleri amaçlarına göre gruplar. Bu beş grubu aşağıda kendi örneklerimle anlattım.

Bilgilendirici görsel: e-ticaret ürün fotoğrafı

Bilgilendirici görsel, kısa bir ifadeyle anlatılabilecek bir bilgi ya da kavram taşır. W3C'ye göre metin alternatifi görselin gösterdiği anlamı ya da içeriği vermeli. Bu çoğu zaman görselin birebir tarifi değildir.

Ürün sayfasının başlığı zaten "Ada sırt çantası" diyorsa adı alt metinde tekrar etmenin faydası azdır. Fotoğrafın gösterip metnin söylemediği bilgiyi yazın, örneğin rengi ve malzemeyi. Ürün sayfasının geri kalanı için ürün detay sayfası kalıbına bakın.

• Zayıf: alt="çanta resmi"
• Daha iyi: alt="Sırt çantası"
• İyi: alt="Kırmızı deri sırt çantası, önden görünüm, fermuarlı iki ön cep"

Dekoratif görsel

Dekoratif görsel sayfaya bilgi eklemez. W3C bu gruba kenarlık, köşe ve boşluk gibi biçim öğelerini koyar. Bir metnin yanında durup onu yalnızca süsleyen çizimler de bu gruptadır.

Bunlara alt="" yazın. Boş alt, yardımcı teknolojiye görseli atlamasını söyler. W3C'ye göre bu görsellere metin yazmak, ekran okuyucunun çıktısına gereksiz bir ses kalabalığı ekler.

Alt değerine "boşluk" ya da "resim" yazmak boş alt yerine geçmez. WCAG'nin açıklama belgesi, atlanması gereken bir görsele "spacer" ya da "image" yazmayı da hata sayar.

İşlevsel görsel: logo bağlantısı ve ikon buton

Görsel bir bağlantının ya da butonun tek içeriğiyse alt metin onun işini söyler. Sol üstteki logo ana sayfaya gidiyorsa alt metni "Pazarcık ana sayfa" olur, "Pazarcık logosu" değil. W3C aynı örneği kendi logosuyla verir: "W3C home".

Bağlantıda logonun yanında görünür bir "Pazarcık" yazısı varsa durum değişir. Logo bu kez tekrar olur ve W3C ona boş alt verir.

İkon butonlarda kural aynıdır. Büyüteç ikonlu bir arama butonunun alt metni "Ara", sepet ikonlu bir butonunki "Sepete ekle" olur.

Metin içeren görsel

W3C, yazıyı görsele gömmek yerine CSS ile biçimlenmiş gerçek metni önerir. Gerçek metni okur büyütebilir, rengini kendi ihtiyacına göre değiştirebilir.

Görselde yine de yazı varsa alt metin o yazının aynısını içermeli. "Kasım indirimi: Tüm kitaplarda %20" yazan bir afişin alt metni de bu cümledir. Gölge ya da süslü yazı tipi gibi görsel ayrıntılar yazılmaz.

Logolar burada ayrı bir durumdur. W3C bağlantı olmayan bir logo için alt metne yalnızca markanın adını yazar ve "logo" kelimesine gerek görmez.

Karmaşık görsel: grafik ve şema

Grafik, şema ve harita tek cümleye sığmaz. W3C bunlar için iki parçalı bir metin alternatifi önerir: görseli tanıtan kısa bir alt metin ve asıl bilgiyi veren uzun bir açıklama.

Bir blog yazısında çeyreklere göre iade oranını gösteren bir sütun grafik düşünün. Alt metin "Çeyreklere göre iade oranı sütun grafiği. Rakamlar alttaki tabloda." olabilir. Rakamların kendisi grafiğin altındaki tabloda durur.

W3C uzun açıklamayı herkesin görebileceği şekilde sayfanın içinde vermeyi önerir. Görseli ve açıklamayı <figure> ve <figcaption> ile birlikte sarmak da bir yoldur.

W3C alt metin karar ağacı

Görselin hangi gruba girdiğinden emin değilseniz W3C WAI'nin "An alt Decision Tree" sayfası sizi sırayla beş sorudan geçirir. Bir soruya evet derseniz ya bir sonuç alırsınız ya da o sorunun alt seçeneklerine bakarsınız. Hayır derseniz bir sonraki soruya geçersiniz.

1. Görselde metin var mı?
2. Görsel bir bağlantıda ya da butonda mı ve o olmadan bağlantı ya da buton anlaşılmaz mı?
3. Görsel bu sayfaya ya da bağlama bir anlam katıyor mu?
4. Görsel yalnızca süs mü ya da kullanıcıya yönelik değil mi?
5. Görselin kullanımı yukarıda yok mu ya da hangi alt metni yazacağınız belirsiz mi?

Son soru bir sonuç vermez. W3C ağacın her durumu kapsamadığını yazar ve okuru görseller rehberine yönlendirir.

Aşağıdaki örnekte beş kurgusal görsel var. Birini seçin ve soruları cevaplayın. Sonunda önerilen alt değerini görür, kendi yazdığınız metni örnekle karşılaştırırsınız.

Alt metin karar ağacı

Aşağıda beş kurgusal görsel, karar ağacındaki yolları ve önerilen alt değerleriyle duruyor. JavaScript açıkken soruları kendiniz cevaplayabilir, kendi alt metninizi örnekle karşılaştırabilirsiniz.

1. Ürün fotoğrafı

   Bir e-ticaret ürün sayfası. Başlık “Ada sırt çantası” diyor. Fotoğraf galerinin ilk karesi; renk, malzeme ve cep bilgisi metinde yazmıyor.

   1. Görselde metin var mı? Hayır
   2. Görsel bir bağlantının ya da butonun içinde mi ve o olmadan bağlantı ya da buton anlaşılmaz mı? Hayır
   3. Görsel bu sayfaya ya da bağlama bir anlam katıyor mu? Evet
   4. Bir grafik, şema ya da karmaşık bir bilgi mi? Hayır
   5. Yakındaki gerçek metin aynı bilgiyi zaten veriyor mu? Hayır

   Önerilen: alt="Kırmızı deri sırt çantası, önden görünüm, fermuarlı iki ön cep"

   Fotoğraf bilgi taşıyor ve bu bilgi metinde yok. Ürünün adını tekrar etmek yerine fotoğrafın gösterdiğini yazdım.

2. Logo bağlantısı

   Sitenin sol üst köşesindeki logo. Ana sayfaya giden bağlantının tek içeriği bu görsel, yanında yazı yok.

   1. Görselde metin var mı? Evet
   2. Aynı metin görselin yakınında gerçek metin olarak da var mı? Hayır
   3. Metin yalnızca görsel bir efekt için mi duruyor? Hayır
   4. Metnin belirli bir işlevi var mı? Örneğin bir bağlantı, buton ya da ikon mu? Evet

   Önerilen: alt="Pazarcık ana sayfa"

   Logo bir bağlantı. Alt metin bağlantının nereye gittiğini söyler; “logo” kelimesine gerek yok.

3. Sütun grafik

   Bir blog yazısındaki sütun grafik: dört çeyrekte iade oranı. Grafikte yazı yok ve rakamlar sayfanın hiçbir yerinde geçmiyor.

   1. Görselde metin var mı? Hayır
   2. Görsel bir bağlantının ya da butonun içinde mi ve o olmadan bağlantı ya da buton anlaşılmaz mı? Hayır
   3. Görsel bu sayfaya ya da bağlama bir anlam katıyor mu? Evet
   4. Bir grafik, şema ya da karmaşık bir bilgi mi? Evet

   Önerilen: alt="Çeyreklere göre iade oranı sütun grafiği. Rakamlar alttaki tabloda."

   Grafik tek cümleye sığmaz. Alt metin onu tanıtır ve rakamların yerini söyler; rakamların kendisi grafiğin altına tablo olarak eklenir.

4. Süs çizgisi

   Bir kampanya başlığının yanında duran dalgalı süs çizgisi. Hiçbir bilgi taşımıyor, kaldırılsa sayfadan bir şey eksilmez.

   1. Görselde metin var mı? Hayır
   2. Görsel bir bağlantının ya da butonun içinde mi ve o olmadan bağlantı ya da buton anlaşılmaz mı? Hayır
   3. Görsel bu sayfaya ya da bağlama bir anlam katıyor mu? Hayır
   4. Görsel yalnızca süs mü ya da kullanıcıya yönelik değil mi? Evet

   Önerilen: alt=""

   Görsel yalnızca süs. Boş alt ile ekran okuyucu onu atlar ve okura boş yere bir şey okumaz.

5. Kampanya afişi

   Bir kitap sitesinin ana sayfasındaki kampanya afişi. Afişteki yazı sayfada gerçek metin olarak geçmiyor ve afiş bir bağlantı değil.

   1. Görselde metin var mı? Evet
   2. Aynı metin görselin yakınında gerçek metin olarak da var mı? Hayır
   3. Metin yalnızca görsel bir efekt için mi duruyor? Hayır
   4. Metnin belirli bir işlevi var mı? Örneğin bir bağlantı, buton ya da ikon mu? Hayır

   Önerilen: alt="Kasım indirimi: Tüm kitaplarda %20"

   Bilgi yalnızca görselin içindeki yazıda. Alt metin o yazının aynısını verir; büyük harf ve renk gibi görsel ayrıntılar yazılmaz.

Beş görsel ve markalar benim çizdiğim kurgusal örneklerdir. Yazdığınız metin hiçbir yere gönderilmez.

Alt metin karar ağacı, W3C WAI'nin “An alt Decision Tree” sayfasından uyarlandı. Ağaçtaki alt seçenekleri burada Evet ya da Hayır sorularına böldüm.

Alt metin SEO'yu etkiler mi

Evet, ama anahtar kelime doldurarak değil. Google Search Central'a göre Google, görselin konusunu anlamak için alt metni bilgisayarlı görü algoritmaları ve sayfanın içeriğiyle birlikte kullanır.

Aynı sayfaya göre görsel bir bağlantıysa alt metin, bağlantı metni (anchor text) olarak da işe yarar. Logo bağlantısına "Pazarcık ana sayfa" yazmak bu yüzden hem okura hem arama motoruna aynı bilgiyi verir.

Google, alt özniteliklerini anahtar kelimeyle doldurmamayı açıkça öğütler. Bunun kötü bir kullanıcı deneyimi yarattığını ve sitenin spam sayılmasına yol açabileceğini belirtir. Google'ın kendi örneğinde en iyi seçenek "Dalmatian puppy playing fetch" gibi kısa ve somut bir cümledir.

Türkçe bir ürün için de aynısı geçerli. "çanta sırt çantası deri çanta ucuz çanta" yerine "Kırmızı deri sırt çantası, önden görünüm" yazın.

Alt metinleri nasıl kontrol edersiniz

Elle kontrol için sayfadaki görselleri tek tek açıp alt değerlerine bakın. Tarayıcının geliştirici araçları her görselin özniteliklerini gösterir.

Otomatik bir test aracı eksik alt özniteliğini kolayca bulur. Yazılan metnin görselin işini anlatıp anlatmadığına ise bir insanın karar vermesi gerekir. Hangi araçla başlayacağınızı erişilebilirlik test araçları rehberinde anlattım.

Alt metin, bir erişilebilirlik denetiminde ilk baktığım maddelerden biridir. Ürününüz Avrupa'da satılıyorsa Avrupa Erişilebilirlik Yasası rehberine de göz atın. Bu sayfa hukuki danışmanlık değildir.

Sık hatalar

• Her görsele aynı metni yazmak. Galerideki altı fotoğrafın hepsinde "ürün görseli" yazıyorsa hiçbiri bilgi vermez.
• Süs görseline uzun tarif yazmak. Okur, dalgalı bir çizginin tarifini dinlemek zorunda kalır ve asıl içeriğe geç ulaşır.
• Bağlantıda görünüşü anlatmak. Galerideki "Sağ ok" butonu nereye gittiğini söylemez. "Sonraki fotoğraf" söyler.
• Grafiğin bütün rakamlarını alt metne doldurmak. Rakamlar tabloya ya da metne gider, alt metin yalnızca görseli tanıtır.
• Kampanya koşullarını yalnızca afişte bırakmak. Afişin alt metni boşsa ekran okuyucu kullanan kişi kampanyadan habersiz kalır.
• Yanındaki metni tekrar etmek. Bağlantıda "Pazarcık" yazısı zaten varsa logoya da "Pazarcık" yazmak, adı iki kez okutur.

Benim notum

Alt metinde en sık gördüğüm sorun, otomatik doldurulmuş alt metindir. İçerik yönetim sistemi dosya adını ya da ürün adını her görsele kopyalar. Öznitelik dolu olduğu için eksik alt uyarısı çıkmaz. Ekran okuyucu kullanan kişi ise görselden hiçbir şey öğrenmez.

Ben alt metni içerik tasarımının bir parçası sayarım. Görselin sayfada neden durduğunu en iyi o sayfayı yazan kişi bilir. Bu yüzden görsel yükleme ekranına "Bu görsel yalnızca süs mü?" diye bir onay kutusu koymanızı öneririm.

Kararsız kaldığınızda kendinize şunu sorun: görseli kaldırsam bu sayfadan ne eksik kalır? Eksik kalanı yazın. Hiçbir şey eksik kalmıyorsa alt="" doğru cevaptır.