Görsel Alternatif Metin veya "Alternatif Metin", kullanıcının görseli görüntüleyemediği durumlarda web sayfanızdaki bir görsele metinsel bir alternatif sunar.

Bir görsele metinsel bir alternatif olarak Alt Metin'in rolü, görselin sayfadaki amacını açık ve özlü bir şekilde tanımlamaktır. Bu, hem içeriğini (Resim ne gösterir?) hem de işlevselliğini (Kullanıcı resme tıklarsa ne olur?) içerebilir.

Alternatif Metin genellikle kullanıcının şu durumlarda sunulur ve kullanılır:

1. Resimler devre dışı bırakılmış halde web'de gezinme veya
2. Görme engelli veya
3. Bir robot.

Başlıkların ve gövde metninin aksine, Alternatif Metin normalde çoğu kullanıcı için web sayfalarında görünmez. Bunun yerine, her görüntünün gizli bir HTML özelliği olarak var olan kendi Alt Metni vardır.

Bir görüntünün anlamını ayrıştırma yeteneğine sahip olmayan ekran okuyucu programları ve arama motoru web tarayıcıları, bunun yerine Alt Metnine erişecek ve içeriğini ve sayfadaki amacını daha iyi anlamak için kullanıcıya okuyacak veya işleyecektir.

HTML5'te, sayfadaki tüm resim öğelerinin bir Alt Niteliği Yayıncının alternatif metin ekleyebileceği yerler. Alt nitelikler boş bırakılabilir (ve bazen bırakılmalıdır), ancak bir görüntüde hiçbir zaman tamamen bulunmamalıdır.

Doğrudan HTML'de kodluyorsanız, sayfaya bir resim öğesi eklerken bir alt özelliği eklemeniz gerekir. Kodunuz şuna benzer bir şekilde görünebilir:

Eğer bir içerik yönetim sistemi (CMS) WordPress, Wix veya benzeri gibi, CMS'ye bir resim yüklediğinizde veya bir sayfaya eklendiğinde Alt Metin girmek için bir kullanıcı arayüzü seçeneğiniz olmalıdır.

Erişilebilirlik

Alternatif Metin, web erişilebilirliğinin çok önemli bir bileşenidir.

Görme veya bilişsel bozukluğu olan kullanıcılar, sayfadaki metni ses çıkışına dönüştüren bir ekran okuyucunun yardımıyla web'de gezinebilir. Ekran okuyucular bunu görüntülerle yapamaz, bu nedenle bunun yerine kullanıcıya görüntü Alternatif Metni'ni okurlar. Bu, kullanıcının doğrudan göremese bile bir görüntünün içeriğini ve amacını keşfetmesini sağlar.

Görüntü alt metni eksik, boş veya kötü yazılmışsa, kullanıcı görüntünün sağladığı herhangi bir içerik veya işlevi kaçırır.

Bazı durumlarda, uygun olmayan Alt metin, görme veya bilişsel engelli kullanıcılar için kullanıcı deneyimi üzerinde önemli bir olumsuz etkiye sahip olabilir. Örneğin, Alt metni anahtar kelimelerle doldurmak, ekran okuyucunun metni okumasının daha uzun süreceği ve kullanıcının sayfadaki asıl alakalı içeriği keşfetmesini engelleyeceği anlamına gelir.

Arama Motoru Optimizasyonu

Görsel alt metni, web sayfalarınızı Google Arama için optimize ederken de rol oynar.

Arama motorları, indeksleme ve sıralama amacıyla web sitenizin içeriğini ve yapısını taramak için tarayıcı adı verilen web robotlarını kullanır.

Tıpkı ekran okuma yazılımı gibi, tarayıcılar da bir görüntünün ne anlama geldiğini veya sitenizdeki içerikle bağlamsal olarak nasıl ilişkili olduğunu doğrudan ayrıştıramaz. Bunun yerine, tarayıcılar bir resmin içeriği hakkında ipucu olarak resim başlıkları, dosya adları ve resim alt metni gibi diğer bilgileri kullanır.

Bunu göz önünde bulundurarak, görsel alt metninize hedef anahtar kelimeler eklemek, Google'a sayfanızın içeriği hakkında daha güçlü bir sinyal sağlayabilir ve Google Görsel Arama'daki sıralamanıza yardımcı olabilir.

Google ayrıca, sayfaların sıralanması söz konusu olduğunda UX'e daha fazla odaklanıyor. SERP'ler. Web sitenize yüksek kaliteli resim alt metni dağıtmak, kullanıcılar için daha iyi bir deneyim yaratır ve hemen çıkma oranı ve sayfada geçirilen süre gibi Google'ın SERP sıralama algoritmasında yer alan aşağı akış metriklerini etkiler.

Tüm resimler bir alt nitelik alır

Web sitenizdeki her görselin bir Alt özelliği olmalıdır. Bazı resim alt metinlerini eklemek genellikle en iyisi olsa da, alt nitelikler bazen boş bırakılabilir (birazdan daha fazlası) - ancak hiçbir zaman tamamen yok olmamalıdır.

Metin, görsellerin içeriğini ve işlevini sunmalıdır

Erişilebilirliği sağlamak için genel bir kural olarak, web sayfanızdaki metin, sayfadaki tüm resimlerin tüm içeriğini ve işlevini sunmalıdır.

Bu, alternatif metnin resim başlığı, resim yazısı ve gövde kopyasıyla birlikte sayfadaki tüm içeriği ve işlevselliği yakalaması gerektiği anlamına gelir. Bu uygulama, görüntünün görüntülenememesi durumunda hiçbir içeriğin veya işlevin kaybolmamasını sağlar.

Alternatif Metin Açıklayıcı Olmalı, Ancak Gereksiz Olmamalıdır

Alternatif Metin, sayfadaki görüntünün içeriğini/işlevini açıklamalıdır, ancak sayfanın başka bir yerinde görünen bilgileri tekrarlamaya gerek yoktur. Ayrıca "image of..." ifadesini eklemeye de gerek yoktur. veya "Resmi..." Resimde alt metin.

Yayıncılar, resim alt metni eklerken mümkün olduğunca kısa ve öz olmalıdır. Bir görüntünün anlamını basit terimlerle ifade etmek için birkaç kelime veya nadir durumlarda bir veya iki cümle yeterli olmalıdır.

Boş Alt Öznitelikler Bazen Tamamdır

Bir resmin içeriği ve amacı, resim yazısı veya gövde kopyası ile yeterince açıklanmışsa, resim alternatif metni özelliğini boş bırakmak kabul edilebilir.

Bir resim bir sayfaya yalnızca dekoratif amaçlarla eklendiğinde, resmin içeriğinin sayfanın içeriğiyle hiçbir ilişkisi olmadığı için resim alt özniteliği boş bırakılabilir.

Daha da fazlası için Resim Alt Metni yazmayla ilgili ayrıntılı yönergeler, WebAIM'i ziyaret edin.

Aşağıdaki resim için bu beş Alternatif Metin örneğine göz atın, "Kötü" ile "en iyi”. Her örnek için, görsel alt metninin neden iyi veya kötü olduğunu ve kullanıcı deneyimi üzerindeki genel etkisini açıklayacağız.

En kötü: (alt="kaplan, aslan, çita, turuncu, siyah, beyaz, pençeler, kuyruk, çizgili, kar, çimen, orman, koşma, sıçrama, sınırlayıcı, kaplan zambak, kaplan güvesi, kaplan habitatı resmi")

Bu, alt etiketini anahtar kelime doldurmaya bir örnektir. Bir ekran okuyucu, sayfanın geri kalanına ulaşmadan önce bu etiketin tüm içeriğini okur ve okuyucuyu herhangi bir yararlı içeriği keşfetmek için beklemeye zorlar. Bu resim alt metni, görselin içeriğini/amacını doğru bir şekilde iletmez.

Kötü: alt özellik yok

En kötü örneğimizden marjinal olarak daha iyi, Alt özniteliğinin olmaması da oldukça kötü. Bu, hem görme/bilişsel engelli kullanıcıların hem de web tarayıcılarının bu görüntünün içeriği ve amacı hakkında hiçbir fikri olmayacağı anlamına gelir.

Nötr: (alt="")

Bu resim tamamen dekoratif olsaydı veya içeriği sayfada zaten açıklanmışsa, resim alt özelliğini boş bırakmak iyi olurdu. Aksi takdirde, alakalı içeriğe veya bir amaca sahip resimlere her zaman alternatif metin eklenmelidir. Eğer biz imagine this image on an Encyclopedia page 

Good: (alt=”Tiger”)

Alt text should typically be a few words or a short sentence, so just adding the word “Tiger” is a great start. However, depending on the contents and purpose of the page, it might be appropriate to include more details in the Alt Text.

Best: (alt=”Siberian Tiger Hunting in Snow”)

This alt text example is short and concise while being highly descriptive of the associated image. As long as the information provided here is not redundant with the body copy on the page, this alt text should work well for both human users with screen readers and for search engine crawlers.