Erişilebilirlik ve SEO İçin Etkili Alt Metin Yazmanın Nihai Rehberi

Alt metnini, resmin ne gösterdiğini ve neden önemli olduğunu açıklayan kısa, betimleyici bir cümle olarak yazın. Her resim için net bir açıklama, ekran okuyuculara bağımlı kullanıcılara bağlamı iletmek için yardımcı teknolojilere yardımcı olur.

Alt metni ayrıca arama görünürlüğünü destekler. Arama motorlarının sitenizdeki içeriği anlamasını ve çevredeki açıklamaya bağlı resimleri indekslemesini sağlar. İyi hazırlanmış bir açıklama binlerce aramayı etkinleştirebilir ve kullanıcıları doğru ürünler veya bir özellik ile bağlayabilir. İyi alt metni erişilebilirliğe katkıda bulunur, kullanıcı deneyimini güçlendirir ve arama sinyallerinin sayfa bağlamıyla uyumlu olmasını sağlar. Dili basit tutun, karmaşadan kaçının ve görsellerin sayfa bağlamı içinde kendini tanımlamasına izin verin.

Kılavuz: Her resim için, konuyu, eylemi ve bağlamı belirten belirli bir açıklama yazın. Ürünler için ürünü, rengi ve ana özelliği adlandırın. Genel etiketler yerine kesin terimler kullanın ve sitenin içerik stratejisiyle tutarlılığı korumak için belgeleri kontrol edin. En etkili alt metin, çevredeki metinde zaten belirtileni tekrar etmek yerine sayfayı zenginleştirir.

Vahşi yaşam resimleri için örnek: bir yemlik yakınında bir dala konmuş çalıkuşları. Alt metin şöyle olabilir: "Bahçede bir kuş yemliği yakınında bir dala konmuş iki çalıkuşu." Bu, sahneyi net bir şekilde iletir ve kullanıcıların resmi görmeden anlamasını sağlar. Bazı resimler sadece küçük bir özelliği gösterebilir; bağlamda işlevini tarif edin, örneğin "Site başlığında bir dala konmuş çalıkuşu simgesi."

Son olarak, hızlı bir kontrol yapın: taslak hazırladıktan sonra, bir takım üyesinden alt metni doğrulamak için onay alın, doğruluk ve belgelerle uyumu sağlamak için sitede yayınlamadan önce.

Erişilebilirlik ve SEO için Alt Metin Yazma Kılavuzu; Alt metni ne zaman kullanmalı

Ekran okuyucular için resmin ne ilettiğini ve sayfadaki doğru rolünü açıklayan kısa, bilgilendirici bir alt metinle başlayın. Bu yaklaşım, küçük bir simgeden karmaşık bir diyagrama kadar her şey için çalışır ve resimler görüntülenemediğinde kullanıcıların çevredeki içeriği anlamasına yardımcı olur.

Neyi tarif edeceğiniz için, içeriğe ve işlevselliğe odaklanın. Bir resim dekoratifse ve anlam katmıyorsa, alt metni atlayın veya akışı kesmemesi için boş bir alt özniteliği ayarlayın.

Bilgi ileten resimler için alt metin kullanın: grafikler, diyagramlar, fotoğraflar, logolar veya mesaja katkıda bulunan herhangi bir görsel. Bir diyagram Excel grafiklerinde trendleri gösteriyorsa, eksenleri ve trend çizgisini tarif edin; bir çöl sahnesi veya kuş resmi odak noktasıysa, konuyu ve ayarını belirtin. Renkler anlam taşıyorsa, onları belirtin (örneğin beyaz arka plan ile kalın bir çizgi). Resimde yaban hayatı gibi memeliler görünüyorsa, hayvanı ve eylemini tarif edin. Satırları basit tutun ve her pikseli tarif etmekten kaçının. Büyük diyagramlar için kısa bir açıklama sağlayın ve aşağıda daha uzun bir not veya kılavuza bağlantı verin.

İki pratik örnek zanaatı gösterir: "Beyaz kenarlı bir camda çöl manzarası üzerinde konmuş kuş" ve "Excel'den grafik Q2 satışlarının %14 yükseldiğini gösteriyor." Resim metin içeriyorsa, tam kelimeleri tırnak içinde dahil edin (konuşulan metnin etrafına tırnaklar niyeti netleştirir). Dekoratif bir simge veya düğme için, navigasyonu akıcı tutmak için "Arama simgesi" veya "Word belgesi simgesi" gibi kısa bir etiket kullanın.

Oluşturucular için not: çeşitli görsellerle pratik yapın ve tutarlı bir stil tutun. Bu kılavuz bilgilendirici açıklamaları destekler, ekran okuyuculara bağımlı izleyicilere yardımcı olur ve projeler için net bir temel sağlar–ister bir web sitesinde, blogda veya ürün sayfasında çalışın. Gerçek dünya örnekleri kullanın, akranlarla inceleyin ve değişiklikleri izlemek ve varlık genelinde istikrarlı bir özelliği yansıtmak için basit bir Excel tablosu oluşturun.

HTML'de, alt metin img öğesinin alt özniteliğinde görünür. Otomatik alt metin yardımcı olabilir, ancak bağlam önemli olduğu için doğruluk için incelenmelidir. Resim dekoratifse, yardımcı teknolojinin anlamlı içeriğe odaklanmasına izin vermek için alt metni atlayın. Karmaşık görseller, grafikler veya diyagramlar için gerektiğinde, alt metni bağlı bir sayfadaki daha uzun bir açıklamayla eşleştirin.

Alt Metin Ekleme Zamanı: Kapsam, Tetikleyiciler ve Pratik Kılavuzlar

Yayın zamanında veya içerik yenileme sırasında anlamı olan her resme kısa alt metin ekleyin; bu, yardımcı teknolojilere bağımlı kullanıcılara yardımcı olur ve siteler için SEO'yu iyileştirir ve resmin makale içindeki rolünü açıklar.

Kapsam: bilgi ileten resimler nesneler, diyagramlar, simgeler ve grafikler içerir; başlıkta veya kenarda konmuş unsurlar, örneğin turuncu bir rozet, makaleye ne eklediklerini ve rollerini açıklayan alt metne sahip olmalıdır. Bazı resimler sadece metinle eşleştirildiğinde anlam gösterir, bu yüzden hangilerinin alt metin gerektirdiğini ve hangilerinin daha az betimleyici olabileceğini bilin.

Tetikleyiciler: yeni bir resim yazdığınızda, medyayı değiştirdiğinizde veya varlıkları siteler arasında yeniden kullandığınızda alt metin ekleyin veya güncelleyin; özellikle diyagramlar ve grafikler için alt metnin gösterilenle eşleştiğini kontrol edin ve çevredeki içerik akışıyla uyumlu olmasını sağlayın.

Pratik kılavuzlar: alt metni kısa tutun; temel nesneler için 1-2 kısa ifadede işlevi veya amacı tarif edin; diyagramlar için işlevi ve ana akışı açıklayın; grafikler için trendi veya ana değerleri özetleyin; görünür metin içeren resimler için o metni alt açıklamasında gösterin; genel bir açıklama yeterli olmayacağı durumlar vardır–orada anlamı yakalayan belirli bir alt sağlayın; belirsiz veya dekoratif resimler için, bilgilendirici rollerini yansıtan boş bir alt veya kısa bir not kullanın.

İnceleme ve işbirliği: oluşturucular editörler ve tasarımcılarla kontrol etmeli, alt metni gerçek kullanıcılarla test etmeli ve anlamın cihazlar genelinde korunduğunu doğrulamalıdır. Makale kapsamağını doğrulamak ve erişilebilirliğin güçlü kalmasını sağlamak için temel bir kontrol listesi kullanın.

Alt Metni Tanımlayın: Neyi Tarif Etmeli ve Neyi Dışlamalı

Amacını ileten bir kısa cümlede resmi tarif edin, ardından ana konuları ve bağlamı kapsayan bilgilendirici bir açıklama ekleyin. Kimin veya neyin göründüğünü, herhangi bir eylemi ve ayarı dahil ederek bir kullanıcının gösterilen her şeyi anlamasına yardımcı olun.

• Neyi tarif etmeli
  • Konular ve eylemler: insanları, hayvanları (örneğin bir dala konmuş çalıkuşları) veya markalar, ürünler veya araçlar gibi nesneleri tanımlayın.
  • Resim içindeki metin: tırnakları veya kısa ifadeleri tam olarak göründükleri gibi yazın, sayıları veya tarihleri dahil ederek.
  • Bağlam ve amaç: resmin bu girişte neden var olduğunu ve çevredeki içerik hakkında ne ilettiğini açıklayın.
  • Marka ve stil: anlamı netleştiriyorsa markayı adlandırın ve görsel stili veya ikonografiyi belirtin.
  • Grafik içerik: grafikler veya tablolar için trendi, etiketleri, eksenleri ve ana veri noktalarını özetleyin.
  • Ürünler ve teklifler: ürünü, modeli, rengi ve görünür teklifleri veya indirimleri tarif edin.
  • Renkler, düzen ve kompozisyon: anlayışı etkiliyorsa baskın renkleri belirtin, ayrıca görünür düzen ipuçlarını.
  • Konum ve zamanlama: sahnenin nerede ve ne zaman gerçekleştiğini, ilgiliyse dahil edin.
  • Uzunluk ve ton: bilgilendirici ve nötr tutun, kullanıcı beklentilerine uyan dil seçin.
  • Akış ve okunabilirlik: ekran okuyucunun doğal olarak takip edebileceği şekilde açıklamayı yapılandırın, kopuk ifadelerden kaçının.
• Neyi dışlamalı
  • Sadece dekoratif görseller: resim bilgilendirici içerik sağlamıyorsa, boş bir alt özniteliği kullanın (boş) veya dekoratif olarak işaretleyin.
  • Şişirilmiş detaylar: anlayışı yardım etmeyen çiçekli veya gereksiz dilden kaçının.
  • Bilgilendirici olmayan görseller: arka plan gürültüsünü veya yorumu değiştirmeyen ilgisiz ambiyansı tarif etmekten kaçının.
  • İlgisiz bağlam: resimde görünmeyen teğet konuları dışlayın.
  • Çiftlenen açıklamalar: çevredeki metin tarafından zaten iletilen bilgiyi tekrar etmeyin.
• Pratik kılavuzlar
  • Kılavuzlar: WCAG uyumlu uygulamaları izleyin ve erişilebilirlik ile SEO hedeflerine karşı inceleyin.
  • Uzunluk: standart resimler için yaklaşık 125–160 karakter hedefleyin; karmaşık diyagramlar veya akış ağır sahneler için uzun açıklamalar gerekebilir.
  • Terim seçimi: marka sesi ve tüketici beklentileriyle uyumlu dil seçin, görünür olduğunda ürün adlarını ve teklifleri dahil ederek.
  • Tutarlılık: girişler genelinde istikrarlı bir stil tutun, uygun yerlerde marka, ürün ve renk gibi ilgili detayları etiketleyin.
  • İnceleme: her şeyi temel açıklayan ve gereksiz olmadan alt metni hızlı bir incelemeyle test edin.
• Örnekler ve yaklaşım
  • Giriş örneği: "Alacakaranlıkta çam dalına konmuş çalıkuşları; etrafında yumuşak mavi gökyüzü ve çam iğneleri; yemlikte görünür marka etiketi."
  • Grafik örneği: "Gelir (USD) ve Ay eksenleri etiketli, ürün kategorisine göre renk kodlu Q3'e kadar aylık satışları gösteren çizgi grafik."
  • Tırnak örneği: "Görüntü 'Sınırlı süreli teklif' alıntısını kırmızı bir rozetle gösterir; kullanıcı eylemlerini yönlendiriyorsa tam kelimeleri dahil edin.
  • Tarif yaklaşımı: gören bir kullanıcının fark edeceği her şeyi açıklayın, ardından çevredeki kılavuz veya inceleme notlarıyla doğrulayın.
• Eyleme geçirilebilir tutun
  • Giriş ve açıklama uyumu: her resim girişi görünür içerik ve amaca uyan tarif edici alt metne sahip olmalıdır.
  • Akış ve kısalık: akıcı okunan cümleler oluşturun, karmaşadan kaçının ve açıklamayı bilgilendirici tutun.
  • Uzun form durumlar: karmaşık görseller için ilişkileri ve sonuçları açıklayan daha uzun bir açıklama sağlayın, ardından kısa bir alt cümlesiyle özetleyin.
• Hızlı kontrol listesi
  • Resmin amacını açıklıyor mu? Evet/Hayır
  • Tüm temel unsurlar tarif edildi mi (tırnaklar veya teklifler dahil)? Evet/Hayır
  • Dekoratif içerik boş olarak işaretlendi mi? Evet/Hayır
  • Ton nötr ve bilgilendirici mi? Evet/Hayır

Ekran Okuyucular için Görsel İçeriği Tarif Edin: Somut İfade Kalıpları

Nesne ve eylemiyle başlayın, ardından bağlamı kısa bir satırda ekleyin. Bu, okuyucunun sahneyi bir bakışta anlamasına yardımcı olur ve içerik grafik veya tablo gibi karmaşık olsa bile okuma ritmini sabit tutar.

İçerik türüne göre kalıplar seçin: grafikler ve tablolar, resimler, kontroller, veri tabloları ve dekoratif unsurlar. Grafikler için metrik, zaman çerçevesi ve trendi adlandırın; resimler için konuyu ve arka planını veya detaylarını tanımlayın; UI kontrolleri için etiketi ve eylemi belirtin. Okuyucunun tarayabileceği ifadeler kullanın, anlamı gizleyen uzun paragraflardan değil.

SharePoint ve marka varlıkları içinde, küçük bir somut kalıp setini yeniden kullanarak tutarlılığı koruyun. Erişilebilir içerik savunucusu olarak bilinen Andrée, bu ifadelerin kısa, kesin altyazılarla nasıl eşleştiğini göstererek hızlı okuma ve kolay aramayı destekler. Altyazıları okuyucu dostu tutun, kelimeli değil ve inceleme sürecinizde alt metni rafine ederken netlik için düzenleyin.

Kalıp	Örnek	Notlar
Grafik/Tablo: nesne + metrik + dönem + trend	Grafik Q2 döneminde 1.000'den 1.500 birime yükselen Q2 satışlarını gösteriyor	Grafiği, metrik, aralığı adlandırır binlerle gerektiğinde; dolgu kaçının.
Resim/İllüstrasyon: konu + arka plan + detaylar	Ürün fotoğrafı ambalaj detaylarıyla beyaz arka planda markayı gösteriyor	Konuya ve bağlama odaklanır; arka plan yerleşimi netleştirir; sadece ana detayları belirtin.
UI kontrolü: etiket + eylem	"Düzenle"ye tıklayın öğe alanlarını açmak için	Gerçek etiketi kullanın; hedeflenen alanları vurgulayın; eyleme geçirilebilir tutun.
Veri tablosu: alanlar + değerler + dönem	Tablo alanları listeliyor: Satış, Bölge, Dönem; değerler bin birim toplamlarını gösteriyor	Tablo verilerini doğrusal cümleye çevirir; ilgiliyse dönemi dahil edin.
Dekoratif/aralık: dekoratif unsur + alt durumu	Dekoratif aralık çizgisi: alt metin boş	Unsur düzen ekliyorsa boş kullanın, içerik değil; anlam iletmeyen görselleri tarif etmekten kaçının.
Anlatı altyazısı: durum + okuma + arama	Bu durumda okuyucu okuma sırasında özeti tarayabilir, anahtar terimleri bulmak için arama kullanarak	Gist için hızlı bir çapa sağlayın ve terim tabanlı geri çağırmaya izin verin.
İnsanlar: isim + rol + eylem	Andrée veri doğruluğunu doğrulamak için grafiği inceliyor	Okuyucuyu yönlendirmek için uygun isimler ve roller kullanın; isimleri uygun şekilde büyük harfle yazın.

SEO Dikkat Edilecekler: Anahtar Kelimeleri Doldurmadan Dengeleme

Tavsiye: Önce netliğe odaklanın; resmi doğru yansıtan birincil anahtar kelimeyi dahil edin ve kullanıcılar için anlamı iyileştirdiklerinde destekleyici terimleri ekleyin. Bu kılavuz yazarlar için alt metinde SEO ve erişilebilirliği dengelemek için pratik kılavuzlar sağlar.

Uygulamada, her alt metin okuyucuların beklediği yerde işlev görmeli ve anlayışı artırmalı, alanı doldurmamalıdır. İyi hazırlanmış bir alt metin, hem engelli kullanıcılara hem de arama motorlarına yardımcı olur, resmin makaledeki rolünün anlamlı bir özetini sunarak.

Alt metin karmaşık diyagramlar için daha uzun olabilir, ancak ana anlamı bozulmadan tutun ve dolgu kaçının.

• Birincil anahtar kelime için kılavuzlar: Tek bir ilgili anahtar kelime belirleyin ve resim içeriği izin verdiğinde alt metnin başına yerleştirin.
• Doğal dil: Alt metni bir kullanıcı söyleyebileceği cümle veya kısa ifade olarak yazın; bu yazı stili engelli kullanıcılar için okunabilirliği iyileştirir ve arama motorlarının bağlamı yorumlamasına yardımcı olur.
• Kelime sınırı: 125 karakter veya daha az hedefleyin; bu anahtar kelime doldurmayı önler ve metni okunabilir tutarken arama niyetini destekler.
• Bağlam farkındalığı seçimleri: Bölümü ve durumu düşünün; diyagramlar için veriyi veya akışı tarif edin; fotoğraflar için konuyu ve eylemi tanımlayın; simgeler için eylemi veya anlamı açıklayın.
• Bağlantı ve tıklama etkileri: Resim bir bağlantıysa, varışı ve tıklama sonrası ne olduğunu tarif edin, kullanıcıların devam etmeye karar vermesine yardımcı olmak için.
• Dekoratif resimler: Bilgi katkısı olmayan görseller için boş bir alt özniteliği kullanın (alt=""); bu ekran okuyucular için anlamsız gürültüyü en aza indirir.
• Kontrol listesi yaklaşımı: Her alt metni iş akışınızda kutu işaretli bir süreç parçası olarak ele alın; bu takımların onaylamasına ve değişiklikleri izlemesine yardımcı olur.
• Test ve geri bildirim: Ekran okuyucularla test edin, geliştiricilerden ve kullanıcılardan girdi toplayın ve anlayışı iyileştiren değişiklikleri onaylayın.
• Niyet nedir: Çevredeki içerikte resmin niyeti nedir diye her zaman sorun ve alt metnin o amacı yansıttığından emin olun, gereksiz tekrarsız.
• Kelime seçimi ve beyaz alan: Dolgu yerine kesin terimleri tercih edin; sakin bir ritim tutun ve taramaya yardımcı olmak için metin etrafında bol beyaz alan kullanın.

Yazarlar için kısa bir referans burada: alt metni içerik bağlamıyla uyumlu hale getirin ve makalenin erişilebilirliğini ve SEO dengesini iyileştirmek için bu kılavuzu kullanın.

Kontrol listesini görmek için buraya tıklayın.

Özet: Bu yaklaşım makale okunabilirliğini iyileştirir, engelli kullanıcıları destekler ve alt metin ile sayfa alakası arasındaki bağlantıyı korur, performansı feda etmeden.

Farklı Resim Türleri için Alt Metin: Fotoğraflar, Diyagramlar, Logolar, İnfografikler

Fotoğrafları, çerçevede kim veya neyin olduğu ve sayfada neden önemli olduğu betimleyen kısa, konuya odaklı alt metinle etiketleyin. Yardımcı teknoloji kullanıcıları için yazın ve açıklamayı yakındaki kopyayla uyumlu hale getirin ki okuyucular resmin amacını bilsin.

Fotoğraflar: Ana konuyla başlayın, ardından ayar ve eylem gibi bağlam ekleyin. Uzunluğu sıkı tutun, 90–120 karakter hedefleyin. Bir gürültü yapıcı veya diğer ses ipucu görünüyorsa, köşeli parantez içinde belirtin. Resim konuşma içeriyorsa, kısa bir tırnak parçası dahil edin – ve tırnak içine alın. Örnek: "Öğretmen öğrenciler dinlerken tahtaya yazıyor." Bu yaklaşım kullanıcıların tüm anı bilmesine yardımcı olur ve arama ile navigasyonu destekler. Sahneyi net tarif etmek ayrıca sayfalar genelinde etiket tutarlılığına yardımcı olur.

Diyagramlar: Diyagramın amacını ve bilgi akışını tarif edin, her etiketi değil. Hedefi, ana adımları ve nasıl bağlandıklarını belirtin. Eksenler veya kategoriler görünüyorsa, kısaca belirtin (örneğin "x-ekseni: zaman; y-ekseni: gelir"). Resimden uzun metni çiftlemeyin. Örnek: "Girişten çıkışa süreç akışı dört adımla: giriş, analiz, karar, eylem." Diyagram için odak ilişkiler ve sonuçlar üzerinde tutun.

Logolar: Markayı tanımlayın ve anlamlıysa logonun simgesini. "MarkaAdı logosu" veya "MarkaAdı kelime işareti" tercih edin. Logo dekoratifse, alt özniteliğini boş bırakın ve panelin kullanıcılara dekorasyonu duyurmasına izin verin. Kullanıcıların ne bekleyeceğini bilmesi ve arama sonuçlarının markayı yüzeye çıkarması için sayfalar genelinde tutarlı bir kalıp kullanın.

İnfografikler: Ana bulguların kısa özetini sunun, ana sayıları düz dilde belirtin. Grafikten uzun metni çiftlemeyin; ihtiyacınız olan rakamları alt metne çekin. Bir tırnak etkiyi iletiyorsa, tırnak içinde dahil edin. Örneğin: "Kabulde %42 artış." Bir UI panelinde bir onay kutusu kısa alt metin ile daha uzun versiyon arasında geçiş yapabilir, böylece farklı ihtiyaçları olan hem zihin hem kullanıcılar ihtiyaç duyduklarını alır. Çeşitli durumlarda, bu yaklaşım okuyucu ilgisini yüksek tutar ve tüm kullanıcılar için erişilebilirliği sağlar; hızlı bir alt metin temel sayıları ve kısa bir takeaway'i içerir.