CSS arka plan resmi alt özelliği

Bu, daha önce uğraşmak zorunda olmadığım bir şey. CSS arka plan görüntüsü özniteliği tarafından kullanılanlar da dahil olmak üzere bir sitedeki tüm resimlerde alt etiketleri kullanmam gerekiyor.

Bildiğim kadarıyla böyle bir CSS özelliği yok, bu yüzden lütfen bunu yapmanın en iyi yolu nedir?

Arka plan resimleri kesinlikle veri sunabilir! Aslında, görsel simgelerin sunumunun eşdeğer bir metin listesi listesinden daha kompakt ve kullanıcı dostu olduğu durumlarda bu genellikle önerilir. Görüntü sprite'larının herhangi bir kullanımı bu yaklaşımdan yararlanabilir.

Otel listeleri simgelerinin kolaylıkları görüntülemesi oldukça yaygındır. 50 oteli listeleyen ve her bir otelde 10 olanağa sahip bir sayfa hayal edin. Bir CSS Sprite, bu tür şeyler için mükemmel olur - daha hızlı olduğu için daha iyi kullanıcı deneyimi. Ancak bu görüntüler için ALT etiketlerini nasıl uygularsınız? Örnek site .

Cevap, hiç altmetin kullanmamaları, bunun yerine titlekapsayıcı div'deki özniteliği kullanmalarıdır .

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

W3C'ye göre (yukarıdaki bağlantılara bakın), başlık özelliği, alt özelliği ile aynı amaca hizmet eder.

Başlık

Başlık özniteliğinin değerleri, kullanıcı aracıları tarafından çeşitli şekillerde işlenebilir. Örneğin, görsel tarayıcılar başlığı sıklıkla bir "araç ipucu" (işaretleme cihazı bir nesnenin üzerinde durduğunda görünen kısa bir mesaj) olarak görüntüler. Sesli kullanıcı aracıları, başlık bilgisini benzer bir bağlamda konuşabilir. Örneğin, bir bağlantıda özniteliğin ayarlanması, kullanıcı aracılarının (görsel ve görsel olmayan) kullanıcılara bağlantılı kaynağın doğası hakkında bilgi vermesine olanak tanır:

alt

Alt niteliği, nesne için bir metin eşdeğeri sağlamanıza izin vermek için bir dizi etiket içinde (yani, img, alan ve isteğe bağlı olarak giriş ve uygulama için) tanımlanır.

Bir metin eşdeğeri, aşağıdaki yaygın durumlarda web sitenize ve ziyaretçilerine aşağıdaki faydaları sağlar:

• günümüzde, Web tarayıcıları çok farklı kapasitelere sahip çok çeşitli platformlarda mevcuttur; bazıları görüntüleri hiç görüntüleyemez veya yalnızca kısıtlı bir dizi görüntü türünü görüntüleyemez; bazıları görüntüleri yüklemeyecek şekilde yapılandırılabilir. Kodunuzun resimlerinde alt özniteliği ayarlanmışsa, bu tarayıcıların çoğu, resimler yerine verdiğiniz açıklamayı görüntüler.
• ziyaretçilerinizden bazıları kör, renk körü, az gören olsun, görüntüleri göremez; alt özniteliği, sayfanızdakiler hakkında iyi bir fikir sahibi olmak için ona güvenebilecek kişiler için çok yararlıdır.
• arama motoru botları yukarıdaki iki kategoriye aittir: Web sitenizin hak ettiği gibi dizine eklenmesini istiyorsanız, sayfalarınızın önemli bölümlerini gözden kaçırmamalarını sağlamak için alt özelliğini kullanın.

Bu Yahoo Developer Network ( arşivlenmiş bağlantı ) makalesinde , img öğesi ve alt özniteliği yerine kesinlikle bir arka plan görüntüsü kullanmanız gerekiyorsa , ARIA özniteliklerini aşağıdaki gibi kullanmanız önerilir:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Makaledeki kullanım örneği, mobil cihazlarda performans büyük ölçüde iyileştirildiği için Flickr'ın arka plan resimlerini nasıl kullanmayı seçtiğini açıklar.

Christian Heilmann'ın yazdığı bu yazıyı okumalısınız . Arka plan görüntülerinin YALNIZCA estetik amaçlı olduğunu ve veri sunmak için kullanılmaması gerektiğini ve bu nedenle her görüntünün alternatif metne sahip olması gerektiği kuralından muaf olduklarını açıklıyor .

Alıntı (vurgu benim):

Yalnızca estetik değeri olan CSS arka plan resimleri - belgenin kendisinin görsel içeriği değil . Sayfaya anlamı olan bir resim koymanız gerekiyorsa, bir IMG öğesi kullanın ve alt özelliğinde ona alternatif bir metin verin.

Ona katılıyorum.

Diğer yanıtlarda belirtildiği gibi, yalnızca img etiketi için bir div etiketi için (desteklenen) bir alt özniteliği yoktur.

Asıl soru, sitenin tüm arka plan resimlerine neden alt özelliğini eklemeniz gerektiğidir ? Bu cevaba dayanarak, yaklaşımınızda hangi yolu izleyeceğinizi belirlemenize yardımcı olacaktır.

Görsel / Metinsel: Eğer görsel yüklenemezse kullanıcı için metinsel bir geri dönüş eklemeye çalışıyorsanız, sadece başlık özelliğini kullanın. Çoğu tarayıcı, bir kullanıcı görüntünün üzerine geldiğinde görsel bir araç ipucu (mesaj kutusu) sağlar ve görüntü herhangi bir nedenle yüklenmezse, görüntü başarısız olduğunda metin sunan bir alt özniteliğiyle aynı şekilde davranır. Bu teknik, resimleri arka plana ayarlayarak sitenin yükleme sürelerini hızlandırmasına izin verir.

Ekran Okuyucular: Yol seçeneğinin ortası, bu değişiklik gösterir çünkü resimlerinizi teknik olarak arka plan olarak tutmak ve başlık özniteliği yaklaşımını kullanmak, yukarıda "Sesli kullanıcı aracıları başlık bilgisini benzer bir bağlamda söyleyebilir." Ancak bunun her durumda çalışacağı garanti edilmez, bazı okuyucular da dahil olmak üzere hepsini bir arada görmezden gelebilir. Bu yaklaşımı tercih ederseniz, ekran okuyucularının bunları almasını sağlamak için arya etiketleri eklemeyi de deneyebilirsiniz.

SEO / Arama Motorları: İşte büyük olanı, eğer benim gibi olsaydınız, arka plan resimlerinizi eklediniz, her şey iyiydi. Sonra aylar sonra müşteri (veya belki kendiniz), resimleriniz için alt değerlere sahip olmadığınız için bazı birinci sınıf SEO altını kaçırdığınızı fark etti. Unutmayın, araştırmamdan ve buradaki bir makalede belirtildiği gibi başlık özelliğinin arama motorları üzerinde herhangi bir ağırlığı yoktur : https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /. Yani SEO'yu hedefliyorsanız, alt özelliğine sahip bir img etiketine ihtiyacınız olacak. Olası bir yaklaşım, siteye alt özniteliklerle çok küçük gerçek resimler yüklemektir, bu şekilde tüm SEO'ya sahip olursunuz ve mevcut CSS'yi yerinde yeniden ayarlamak zorunda kalmazsınız. Ancak bu, boyuta bağlı olarak ek yükleme süresine yol açabilir ve Google gerçekten de indeksleme sırasında resim yoluna bakar. Kısacası, bu rotaya gidiyorsanız, yapılması gerekeni kabul edin ve arka planlar kullanmak yerine gerçek görüntüleri ekleyin.

Genel inanç, anlamlı semantik değere sahip şeyler için arka plan resimleri kullanmamanız gerektiğidir, bu nedenle bu resimlerle alternatif verileri depolamanın gerçekten uygun bir yolu yoktur. Önemli soru, bu alt verilerle ne yapacağınızdır? Görüntüler yüklenmezse görüntülenmesini ister misiniz? Sayfadaki bazı programatik işlevler için buna ihtiyacınız var mı? Verileri, hiçbir anlamı olmayan (hatalara neden olabilir mi?) Oluşturulmuş css özelliklerini kullanarak veya görüntü ve alt etiketine sahip gizli görüntüler ekleyerek rastgele depolayabilir ve ardından bir arka plan görüntülerine ihtiyacınız olduğunda alt görüntüyü karşılaştırabilirsiniz. yollar ve ardından verileri işleyin, ancak ihtiyacınız olan şeyi simüle etmek için bazı özel komut dosyası kullanın. Yine de, tarayıcının arka plan resimleri için bir tür alt özniteliği otomatik olarak işlemesini sağlamanın bir yolu yok.

Bunu başarmanın klasik yolu, metni div'e koymak ve bir görüntü değiştirme tekniği kullanmaktır.

<div class"ir background-image">Your alt text</div>

arka plan görüntüsü ile arka plan resmini atadığınız sınıf ve ir aşağıdaki HTML5boilerplates resim değiştirme sınıfı olabilir:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

W3C'nin bu makalesi size ne yapmanız gerektiğini düşündüklerini anlatıyor https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

ve burada örnekler var http://mars.dequecloud.com/demo/ImgRole.htm

bunlar arasında

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

Yine de, yukarıdaki örnekte olduğu gibi, arka plan görüntüsünü içeren öğe yalnızca boş bir kapsa, kişisel olarak metni oraya koymayı ve CSS kullanarak gizlemeyi tercih ederim; tam yerine resmi gösterdiğiniz yerde:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

İşte bu tür bir soruna çözümüm:

CSS'de yeni bir sınıf oluşturun ve ekranın dışına yerleştirin. Ardından, arka plan resminizi çağıran mülkün hemen önüne alternatif metninizi HTML'ye yerleştirin. Herhangi bir etiket olabilir, H1, H2, p, vb

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Ne istediğin benim için net değil.

Bir CSS özelliğinin alt öznitelik değerini oluşturmasını istiyorsanız, o zaman belki de CSS öznitelik işlevini arıyorsunuz , örneğin:

IMG:before { content: attr(alt) }

Alt özniteliğini bir arka plan görüntüsüne koymak istiyorsanız, bu garip çünkü alt özniteliği bir HTML özniteliği, arka plan görüntüsü ise bir CSS özelliğidir. HTML alt özelliğini kullanmak istiyorsanız, onu yerleştirmek için karşılık gelen bir HTML öğesine ihtiyacınız olduğunu düşünüyorum.

Neden "arka plan resimlerinde alt etiketleri kullanmanız gerekiyor": Bu anlamsal bir nedenden mi yoksa görsel efektlerden mi kaynaklanıyor (ve eğer öyleyse, o zaman hangi etki veya neden)?

Bunu, görüntünüzün görüneceği yere altetiketini koyarak başarabilirsiniz div.

Misal:

<div id="yourImage" alt="nameOfImage"></div>