Günümüzün web dünyasında yazınsal içerik, bilginin sunulma yolu olarak tercih edilen bir yöntem olarak biliniyor. Çünkü sade XHTML yazınsal içerik; hazırlanması, sunulması ve arama motorları tarafından indekslenmesi bakımından oldukça avantajlı… Ama görsel olarak bize, yani web geliştiricilerine yetmeyen bir tarafı da var. Bu anlamda web uygulamalarında başlıklarda, navigasyon yapılarında imajları oldukça fazla tercih ediyoruz.

İmajları web uygulamalarında yazınsan başlık ve navigasyon yapıları yerine kullanmak, sunumu zenginleştirmekle beraber, yazınsal içerik kullanmanın erişilebilirlik avantajlarını yok ediyor. Bu noktada görsellikten taviz vermek istemeyen web geliştiricilerinin imdadına CSS teknolojisi kullanılarak gerçekleştirilen Image Replacement teknikleri yetişiyor.

Bu yazımızla birlikte, CSS İmaj Yerine Koyma Tekniklerini (Image Replacement Methods) anlatacağım yazı dizisinin ilkine FIR tekniği ile başlamış oluyoruz.

FIR (Fahrner Image Replacement)

Todd Fahrner tarafından geliştirilen teknik, imajla değiştirilmek istenen yazının bir span etiketi ile çevrelenmesi ve span etiketinin CSS ile yok edilmesi ilkesine dayanıyor. Örneklemek gerekirse;

Oluşturduğumuz XHTML;

<h1>
	<span>Yazı Başlığı</span>
</h1>

CSS tarafında şu kodu yazıyoruz;

h1{background:url(resim.gif) no-repeat; width:150px;  height:30px; }
span {display:none;}

Burada yaptığımızı özetlemek gerekirse, h1 etiketini 150px genişliğinde ve 30px yüksekliğinde tanımlıyor ve bu boyutlardaki resim.gif dosyamızı h1 etiketine arkaplan olarak döşüyoruz. span etiketi içerisine aldığımız yazıyı yok etmek için display:none; özelliğini tanımlıyoruz.

Örnek uygulamaya buradan ulaşabilirsiniz…

Sorunlar

Bu yaklaşım uygulanması kolay ve arama motoru dostu olarak görünse de, bazı erişilebilirlik sorunlarını kendi içinde barındırıyor. Örnek vermek gerekirse, CSS desteğinden yoksun bir platformdan bağlanan bir kullanıcı yazı başlığını görebiliyorken, tarayıcısında imajların yüklenmesini istemeyen bir kullanıcı, CSS çalıştığı için imajın yerinde hiçbir şey göremeyecektir. Görme engelli kullanıcılar için geliştirilmiş olan bazı ekran okuyucular, display:none özelliğini gördüklerinde ilgili içeriği okumayarak direk atlamaktadırlar. Bunlara ek olarak, bu tekniği kullanabilmek için anlamlı olmayan bir span etiketini kullanmak durumunda kalıyoruz.

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.