Userspots ekibinden oluşan “Erişilebilir Web” grubu Dünya Bankası’nın düzenlediği Yaratıcı Kalkınma Fikirleri Yarışması‘nda ödül aldı.

Yarışmaya katılan 791 projeden öncelikle 80 finalist ortaya çıktı. Finalist projeler arasından da jüri üyeleri tarafından destek verilmeye hak kazanacak 20 proje belirlendi. Bu projelerden biri de Userspots ekibi tarafından hazırlanan görme engelliler, görme bozukluğu olanlar ve renk körleri için daha erişilebilir web siteleri oluşturmak amaçlı olan “Erişilebilir Web” projesi oldu.

Userspots ekibi bu projede erişilebilir web sayfalarının nasıl tasarlanacağı ve kodlanacağı konusunda içerik üretip çalıştay ve konferans düzenleyerek bu konu hakkında farkındalık yaratmaya çalışacak.

Jüri üyelerine yapılan sunumda kullanan afişi aşağıda bulabilirsiniz.

Erişilebilirlik konusunda güzel bir uygulama olan Emirates’in web sayfasından gibi Twitter ve Google için yapılan uygulamalarda bu konuda güzel örnek teşkil ediyorlar.

Google Labs uygulaması olarak pişmekte olan “Accessible Web Search” görme engelliler için Google arama sayfasını oldukça kolaylaştırıyor. Herhangi bir arama sorgusundan sonra çıkan sonuçlar arasında klavye ile kolayca dolaşabiliyoruz.  Ayrıca sayfa ekran okuyucuların kolayca okuyabilmesi için kodlanmış şekilde. Reklamların bu sayfada da çıkmaya devam ettiğini belirtmekte fayda var.

Hata mesajlarındaki kontrast oranı yeterli olmayan Twitter’da durum biraz farklı.  Accessible Twitter adında üçüncü parti bir uygulama Twitter’ı daha erişilebilir hale getiriyor. Klavye erişimi olmayan bu uygulama ile Twitter arayüzü ekran okuyucular tarafından daha rahat okunuyor.

Kullanıcı Odaklı ve Erişilebilir Devlet Web Sitesi Yönergeleri yazısında bahsi geçen İsveç’de Kamu Web sitelerinin daha kullanılabilir ve erişilebilir olması için hazırlanmış 163 sayfalık yönergenin bir benzeri artık Türkiye’de de var. Türksat A.Ş. tarafından akademisyenlerden oluşan uzman bir grubun desteği ile hazırlanmış “Kamu Kurumları İnternet Siteleri Standartları ve Önerileri Rehberi” Türkiye’deki kamu web sayfaları için oldukça kapsamlı önerileri barındırıyor. Bu rehber sadece kamu siteleri için değil her türlü web sayfası için oldukça yararlı bilgiler içeriyor. Bu rehberde ayrıca kullanılabilirlik ve kullanılabilirlik testlerini açıklayan bölümlerde mevcut.

İçeriği oldukça geniş olan sitede daha önce özet olarak Türkçe versiyonunu yayınladığımız Web İçerik Erişilebilirliği Yönergeleri’nin detaylı çevirisini de bulabilirsiniz.

Userspots “Engelleri Kaldır” projesine erişilebilirlik konusunda içerik üretip proje için oluşturulacak web sayfalarını erişilebilir hale getirerek destek verecek. Bu konuda yazdığımız ilk makale erişilebilirliği sağlamak için dikkat edilmesi gereken temel noktalardan oluşuyor. Maddeler aşağıda:

1. Görseller

1.1 Aktif Görseller: Her aktif görsel için alt özelliği ile bir metin alternatif oluşturulmalıdır. Buna görselden oluşan linkler, görselin içinde imagemap kullanılarak oluşturulmuş linkler veya görsellerden oluşan form elemanları da dahildir. Metin alternatif görselin fonksiyonunu, linkin gideceği yeri açıkça anlatmalıdır. Eğer görsel metinden oluşuyorsa alt özelliği de aynı metni içermelidir.

1.2. Bilgi İçerin görseller: Alt özelliği ile görsellere metin alternatif yaratılmalıdır. Alt özelliğindeki metin görselle aynı bilgiyi içermelidir. Eğer bu mümün değilse, örneğin görsel bir grafikse, görsel alt özelliği ile açıklanmalı, açıklamanın olduğu bir dosyaya link verilmeli veya görselin açıklaması longdesc özelliğine yazılmalıdır. Eğer görsel metin içeriyorsa alt özelliği aynı metni içermelidir.

1.3. Gerekli olmayan görseller: Sayfadaki her görselin bir alt özelliği olmalıdır. Eğer bir görsel herhangi bir bilgi içermiyorsa alt özelliği boş olarak kullanılabilir. Burada dikkat edilmesi gereken konu link olan bir görsel kesinlikle boş alt özelliğine sahip olmamalıdır. Eğer bir görsel metin linkse ve link verilirken açıklama eklenmişse alt etiketi boş olabilir.

2.Linkler: Linkler için ‘buraya tıklayın’ yerine link okunduğunda anlamlı olacak açıklama yazılmalıdır. Metin içinde aynı ifade ile belirtilmiş linkler aynı yere gitmelidir.

3.Doğru Kodlama: Dökümanın yapısının düzgün bir şekilde gösterilmesi amacıyla alıntılar, başlıklar ve listeler için blockquote,li,h1 gibi anlamlı html kodları kullanılmalıdır. Sadece görsel etkiler yaratmak için anlamlı html kullanımından kaçınılmalıdır.

4. Sayfa içi Navigasyon: Sayfanın ana bölümleri arasında geçişi kolaylaştıracak yöntemler sağlanmalıdır.

5.Göreceli öğeler: Sayfalardaki öğelerin boyutlarını farklı ekranlar, tarayıcılar, metin boyutu özelliklerini dikkate alarak göreceli değerler olarak belirlenmelidir.

6. CSS: Sayfa sunumu css ile oluşturulmalıdır .Tablo kullanılması pek tavsiye edilmez ama bu bir hata değildir. font ve bgcolor gibi lokal özellikler eklenmemelidir. Sayfa css dosyaları kapatıldığında da anlaşılır olmalıdır.

7.Renk: Renkli bir şekilde sunulan bilgilerin hepsinin orada renk olmadığında da görülebilir olması gerekmektedir.

8. Kontrast: Arka plan rengi ile yazı rengi arasında yeterli derecede Luminosity kontrast oranı olmalıdır. (Luminosity kontrast oranı nedir? )

9. Klavye Erişimi: Sayfanın bütün fonksiyonelliği klavye ile erişilebilir halde olmalıdır.

Renk körlüğü ve Arayüz Renkleri yazısında renk körlüğü çeşitlerinden Luminosity Kontrast Oranı yazısında da Web İçerik Erişilebilirliği Yönergeleri 2.0 versiyonunda arka plan rengi/yazı rengi kombinasyonlarının kontrast değerlerini ölçmek için tavsiye edilen orandan bahsetmiştik.
Bu yazıda da bu konuyla ilgili bir şikayet ile konuyu örneklendirmek istiyoruz. Markalarla ilgili şikayet ve önerilerin olduğu Getsatisfaction.com sitesinde Twitter’ın aşağıda görünen hata mesajı hakkında şu şekilde bir şikayet de bulunuyor:

Hata mesajınız renk körleri tarafından okunamıyor. “hide” ve “visit your device settings page” linkleri farklı renklerde olmalı

Resimdeki hata mesajının kontrast oranını kontrol ettirdigimizde sonuç olarak (Arka plan rengi:#ff7b6d Yazı rengi:#4499d3) iki renk arasında yeterli kontrast farklılığı olmadığını alıyoruz. Renk körlüğü simülatörleri ile de baktığımızda linkleri yazıdan farkının olmadığını ve renk körlüğü rahatsızlığı olanlar tarafından farkedilmesinin çok zor olduğunu da görüyoruz.

Renk körlüğü istatistiğini işin içine kattığımızda durumun vahameti daha net ortaya çıkıyor:”Her 20 kullanıcıdan biri Twitter hata mesajında tıklanacak yerleri görürken zorluk yaşıyor”.