Bu makale,yazı dizisinin üçüncü bölümüdür.

Bir web sitesinin erişilebilir olması özetle, içeriğinizin herkes tarafından eksiksiz erişilebilir, anlaşılabilir ve kullanılabilinir olmasıdır. Erişilebilirlik hakkında çok fazla makale hem Türkçe hem de İngilizce olarak zaten mevcut. Bu yüzden ben bir kaç tane uygulama tekniğine değineceğim.

Yukarıdaki erişilebilirlik tanımından yola çıkarsak, birisinin sitenizden verim alamaması için en temel sorunlar ve bunların çözümlerine birlikte göz atalım.

Senaryolar :

Ziyaretçiniz,

• Görme engelli olabilir.
• Resimleri iptal etmiş olabilir.
• Script okumayı iptal etmiş olabilir.
• Stil okumayı iptal etmiş olabilir.

“Görme engelliler nasıl bilgisayar kullanır?” derseniz, ekran okuyucu programlar mevcut.  Bu programlar, web sitesinde yazan düz metni sese dönüştürerek kişinin dinlemesine olanak sağlar. Bu yüzden de web sitenizde içeriğinizin bütünlüğünü bozacak flash (tüm sitenin Flash olması ya da  sadece Flash menü kullanımı) ya da resim bir  içeriğe sahipseniz kullanıcınız sadece anasayfanıza uğrayıp sitenizi terk edebilir.

Cep telefonu ile web sitenizi takip eden kullanıcılar bytelarca bilgiyi indirmemek için “resimleri gösterme” seçeneğini seçebilir, yani text-only okuma yapabilir. Gerçi artık 3G var ama biz en kötü durumları da göz önünde bulundurmalıyız:)

Çözüm önerileri :

Web sitenizin alacağı ziyaretçilere göre, yukarıdaki tüm senaryoların bir arada olduğu durumlarda görsellikten uzak, sadece metine dayalı bir site yapmanızı öneririm. Ama durumlar parça parça ele alınırsa erişilebilirlik bizim için büyük sorun olmaktan çıkacaktır.

• Bir kampanyanızdan söz ederken tüm içeriği görsele yükleyecekseniz kullandığınız metni kod ile yazıp sayfa içinde gizleyin. (Örnek 1)
• Tamamen Flash site sahibi olmak istiyorsanız, bir de aynı içeriğe sahip sadece metinden oluşan bir başka site daha planlayın ya da olduğu gibi metinleri sayfa içinde gizleyin. (Örnek 2 )
• Flash menünüz varsa ayrıca sayfa içinde uygun bir yere menü içeriğinin text halini ekleyin. Örnek: Ka Research için yaptığımız site.
• img etiketi kullanarak eklediğiniz görsellere, görselin ne olduğunu anlatan bir metni alt="..." etiketi ile ekleyin. Örneğin yazınızda İzmir’le ilgili resim eklediniz
  <img src="izmir.jpg" alt="İzmir Saat Kulesi fotoğrafı" /> şeklinde bir açıklama yapmanız iyi olur. (*)
• Çalışmanız bittikten sonra Web Consortium tarafından ya da KAKİS hazırlanan denetleme listesinden yaptıklarınızı karşılaştırabilirsiniz.
• Stillerinizi kaldırsanız bile içeriğinizin sıralaması anlamlı, okunabilir olsun. (Örnek 3)
• Mümkün olduğunca “buraya tıklayın” gibi “dinleyiciye” anlamsız gelecek ifadelerden kaçının.
• Tablolarınıza “summary” alanı ile açıklama alanı ekleyin. (Örnek 4)
• Sayfa içi dolaşımı kolaylaştıracak linklere accesskey ekleyin.(Örnek 5)

Uygulamalar

Örnek 1: Tıklayınca kullanıcınıza bir şey kazandıracağınız/duyuracağınız kampanyanız var. Biz kampanyamızda gazoz kapağı vermeye karar verdik Bu kampanyayı text-only okuma yapan bir kullanıcıya nasıl duyurabiliriz@f0

Uygulama sayfası

Örnekteki,
voice-family:male koduyla metni erkeğin seslendirmesini,
richness:80 koduyla davudi bir sese sahip olmasını,
cue-before:url("beep.au") koduyla içeriklerden önce bip sesi çıkaran bir ses dosyası oynatmasını tercih ediyoruz. “CSS Aural Reference” hakkında daha detaylı bilgi için W3C ‘daki sayfasını ziyaret edebilirsiniz.

Örnek 2: Aynı çalışmanın Flash banner için uygulanmış halini örnekten inceleyebilirsiniz.

Örnek 3: Anlamlı bir hiyerarşiye sahip bir sayfada, stiliniz olmasa bile içerik okunabilir durumda olacaktır. İçeriğin önem sırasına göre heading (h1,h2,…) etiketlerini kullanmak, kullanıcı için büyük kolaylık sağlayacaktır.

Uygulama sayfası

Örnek 4:
Tablolarınızda “summary” alanı kullanmanız özellikle ekran okuyucuların çok işine yarayacaktır.

Uygulama sayfası

Bu örnekteki yazı bir ekran okuyucuda aşağıdaki gibi yorumlanacaktır:
Caption: Crema neler seviyor?
Summary: Bu tablo Crema’da en çok sevilen yiyecek ve içeceklerin listesini gösterir.
Ad:İlkay, Yiyecek:Donut, İçecek:Açık çay
Ad:Kemal, Yiyecek:Muzlu pasta, İçecek:Sıcak çikolata
Ad:Emrah, Yiyecek:Tiramisu, İçecek:Irish Cream Mocca

Benzer açıklama alanları (attribute) için title, abbr, longdesc, lang, label incelenebilir.

Örnek 5:
Örnekte Internet Explorer’da “Alt” tuşuyla,Firefox’ta “Alt+Shift” ile birlikte “h” harfine basarsanız, kısa yoldan “Hakkımızda” linkine ulaştığınızı göreceksiniz. Ayrıca “a” etiketinin “outline” özelliğini sıfırlamamak da bulunduğunuz linkin etrafında ince bir çizgi oluşturacaktır.

Uygulama sayfası

(*) Arkaplan, ikon,avatar,spacer gibi görsellerde alt="" etiketi kullanmak anlamsız olur, bunun yerine alt=”" şeklinde boş bırakmayı tercih edin. “Boş bırakacaksam neden yazayım ki?” dediğinizi duyar gibiyim. O zaman reader kullanan kişi yazıyı dinlerken arada görselinizin adını duyacaktır.Her görsel de anlamlı bir şekilde adlandırılmadığına göre, kullanıcı için rahatsızlık verici bir deneyim olacaktır. Düşünsenize İzmir’le ilgili güzel bir hikaye dinlerken arada “asdfghjk0321515xxxdasfafasg.jpg” şeklinde anlamsız bir şey duymak ne tuhaf olurdu.

Sonuç

Biraz uzun bir yazı oldu farkındayım ama gözünüz korkmasın:)
Erişilebilirlik adına yapılması gereken çok fazla uygulama var. Ancak deneyimlerime dayanarak en çok kullanılması gerekenleri, öneri olarak sıralamaya çalıştım.
Ve unutmayın ki yapacağınız bu çalışmalar sizin için küçük ama insanlık için önemli adımlar

Erişilebilir kalın!

http://www.w3.org/WAI/
http://www.w3.org/TR/WCAG10-HTML-TECHS
http://www.cs.manchester.ac.uk/~yesilady/docs/accessibility.html
http://www.webaim.org/
http://www.kakis.gov.tr/erisilebilirlik-kontrol-listesi
http://www.bidb.odtu.edu.tr/ccmscontent/articleRead/articleId/188

Yazar Hakkında:  Merhaba Ben Gözde Berberoğlu. Crema'da user interface developer olarak çalışıyorum. Club Crema'da (X) HTML- CSS, SEO, web standartları hakkında deneyimlerimi ve bilgilerimi paylaşmaya çalışacağım. Beni aynı zamanda kişisel blogumdan ve Friendfeed'den de takip edebilirsiniz. Kod adı: gozde.css :)