CSS

Faydalı Alternatif Metin Yazma

Jeremy Keith’in bu makalesinden keyif aldım. resimler için alternatif metin yazma. “Alt metnin” veya (“alternatif” metnin) ne olduğunu bilmiyorsanız, bu, metnin değeridir. alt bir niteliği <img>. BT meli resmi tanımlayın (pratikte her zaman olmasa da!).

Bir kullanıcı olarak alternatif metni asla fark etmeyebilirsiniz, ancak bunun inanılmaz derecede önemli olduğu bağlamlar vardır. Ekran okuyucuları duyuracak alt bir kullanıcıya atfedilir, bu nedenle kör veya kısmen gören biri için, alt öznitelik, aksi takdirde kaçırılabilecek hayati içerik sağlayabilir. Bir görüntüye önemli metin içeriği koymak iyi bir uygulama değildir, ancak herhangi bir nedenle bunu yapmanız gerekiyorsa, ekran okuyucu kullanıcılarının eşdeğer bir deneyim elde etmesini sağlamak için aynı bilgileri alternatif metinde sağlamak önemlidir.

Alternatif metnin kullanışlı hale geldiği başka bir zaman, bir görüntünün yüklenememesidir. Bu bazen bir e-posta istemcisinde olur veya belki de kötü bir bağlantı vardır. Ya da belki resmin indirilmesi gerçekten uzun zaman alıyor. Bu durumlarda alternatif metin kullanıcıya yer tutucu olarak gösterilecektir.

Resim yüklenmemişse, bir resmin alternatif metni kullanıcıya nasıl gösterilebilir?

Jeremy’nin işaret ettiği gibi, alternatif metin yazmak her zaman kolay değildir ve genellikle düşünme, değerlendirme ve empati gerektirir. Bu nedenle, dosya adını varsayılan olarak alternatif metin olarak kullanan CMS’lere karşı özel bir nefretim var. Bir ekran okuyucu kullanıcısı olarak “Screenshot 2022-05-22 at 14-43-16.png” gibi dosya adlarının okunduğunu hayal edin. Tüm içerik yazarları iyi eğitimli olmadıkça, bu uygulamanın erişilemeyen bazı alternatif metinlerle sonuçlanması muhtemeldir; aslında, aslında boş bir alt niteliği tercih edilebilir.

Boş veya eksik alt nitelikler

Boş alt öznitelik mutlaka kötü bir şey değildir: alt="" ekran okuyucular tarafından şu şekilde yorumlanacaktır: tamamen dekoratif ve bu nedenle, örneğin bir görüntünün dekoratif bir arka plan olarak kullanılması için tamamen uygun olan göz ardı edilir. Boş kullanmak da iyi bir fikir olabilir. alt resim, çevreleyen metin tarafından zaten tanımlandığında öznitelik. ( Dekoratif görüntülerde W3C sayfası bazı yararlı örnekler içerir.) Ancak yardımcı metin yazma işini atlamak için tembel bir kısayol olarak kullanılmamalıdır.

Boş bir alt özniteliği ile tamamen eksik olan bir alt özniteliği arasında önemli bir fark vardır. Eksik bir alt özniteliği olan bir görüntüyle karşılaşan bir ekran okuyucu, bunun yerine dosya adını duyurur ve bu, gördüğümüz gibi, genellikle yararsızdır.

Metin ağırlıklı görüntüler için alternatif metin yazma

Giderek daha sık karşılaştığım bir sorun, çok fazla metin içeren resimler için alternatif metin yazmaktır. İnsanların Twitter’da metnin ekran görüntülerini paylaştığını görmek yaygınlaştı: orijinal yazarı retweetleyerek veya alıntı yaparak güçlendirmek istemediğinizde etkileşimleri görüntülemek veya başka bir ortam aracılığıyla gerçekleşen uzun bir konuşmayı yayınlamak birkaç kullanım örneğidir. .

Başka bir durum (geliştirici topluluğunda popüler) kod örneklerini paylaşmaktır. gibi siteler Karbon kod örneklerinizi “güzelleştirmenize” ve sosyal medyada paylaşmak üzere resim olarak kaydetmenize olanak tanır. Alt metin olmadan bu kod örnekleri, görselleri fiziksel olarak görme imkanı olmayan kullanıcılar için anlamsızdır.

Neyse ki, Twitter artık kullanıcıların resimler için alternatif metin sağlamasına izin veriyor, bu nedenle çoğu durumda kodu metin olarak dahil etmek yeterli olacaktır. Ancak daha uzun metinler için ne yapmalıyız? Bir olasılık, tweet’in kendisinde orijinal içeriğe bir bağlantı sağlamaktır. Kod durumunda, hatta başka bir yerden erişilemediğinde uzun biçimli içerik söz konusu olduğunda, Github Özeti, örneğin. (Gördüm Dave Darnes Bunu yap.)

Son zamanlarda CSS dosyası olmadan yüklenen bir HTML web sayfasının ekran görüntüsünü yayınladığımda, beni biraz düşündüren alışılmadık bir durum yaşadım. Çok fazla metin içeriyordu, ancak resmi göndermenin amacı, metnin kendisi değil, CSS’si olmadan o sayfanın nasıl göründüğünü göstermekti.


Metnin tamamını kopyalayıp yapıştırmak yerine görüntünün içeriğini tanımlayan alternatif metni seçtim:

İçindekiler tablosunu gösteren W3C CSS Renk Modülü spesifikasyon sayfasının ekran görüntüsü

Alternatif metnim muhtemelen biraz aceleye getirilmiş ve kusurluydu. Muhtemelen web sayfasının saf HTML, stilsiz biçiminde görüntülendiği gerçeğini eklemeliydim. Ama umarım birisinin görüntünün özünü anlamasına yetecek kadar bilgi vermiş olur, özellikle de resim eşliğinde. orijinal tweet. Jeremy’nin makalesinde dediği gibi, ne kadar çok yazarsanız o kadar iyi olursunuz.

Jeremy’nin makalesini oku →

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu