14:00 – 14:30 Çay kahve/tanışma
14:30 – 15:15 Mustafa Dalcı – Erişilebilir Web Projesi ve Erişilebilirlik
15:15 – 16:00 Gözde Berberoğlu – Erişilebilir Web İçin Kodlama

Etkinliğe katılan kişilerin adreslerini alıp kendilerine ‘Herkes İçin Web: Evrensel Kullanılabilirlik ve Tasarım’ kitabını hediye edeceğiz.

Tarih:26 Haziran Cumartesi
Saat: 14:00-16:00
Yer: Bersay İletişim Enstitüsü
Adres: Kasap Sok. No:22/A Esentepe-İstanbul

Türksat’ın düzenlediği International Conference on eGovernment and eGovernance (ICEGEG) konferansında Türkiye’den kullanılabilirlik ve erişilebilirlik örneklerinin verildiği Spreading Usability and Accessibility into Society makalesinde Türksat ve ODTÜ ile birlikte Erişilebilir Web projesi de yer aldı.

Makale örneklerin yanında kullanılabilirlik ve erişilebilirlik konularının devlet kurumlarının websitelerini ve web formlarını nasıl etkileyeceğini de içeriyor. Sunumda ise makale içeriğinin yanında Turksat’ın oluşturduğu Turkiye.gov.tr’nin erişilebilirlik ve kullanılabilirlik testlerinin nasıl yapıldığını görebiliyoruz.

Makale yazımında, sunum hazırlama ve sunma aşamasında önemli rol oynayan Tunç Medeni ve Ugurcan Kutluoglu’na teşekkür ediyoruz.

Öncelikle renk körlüğünün en fazla görülen 3 türünden bahsedelim:

Protanopia – Protanomaly (Kırmızı Yeşil Renk Körlüğü)
Erkeklerin yüzde 1.08′i kadınların da yüzde 0.03′ü bu sorun ile karşı karşıyadır. Normal renkler ile bu rahatsızlığı olan kullanıcıların renk karşılaştırması aşağıdaki gibidir.

Deuteranopia – Deuteranomaly (Kırmızı Yeşil Renk Körlüğü)
Erkeklerin yüzde 6’sı kadınların da yüzde 0.45′i bu sorun ile karşı karşıyadır. Aşağıda renk karşılaştırmasını görebilirsiniz.

Tritanopia- Tritanomaly (Mavi Sarı Renk körlüğü)
Toplam nüfusun yüzde 1′inden daha az bir bölümünde görünen bu rahatsızlıkta aşağıdaki renk karşılaştırmasında görebileceğiniz gibi mavi ve sarı renkler karışır.

Renk Körlüğü Rahatsızlığı Olanlar Sitemizi Nasıl Görürler?

Arayüzün renk körlüğü rahatsızlığı olanlar tarafından nasıl göründüğü görmek için filtreler yaratan yazılımlar bulunmaktadır.

1. Color Oracle

Color Oracle ile ekrandaki herhangi bir bölümü seçip yukarıda bahsedilen türlere göre filtreleme yapabiliyoruz. Ya,
zılımın Windows, Mac ve Linux sürümleri mevcut ve ücretsiz.

2. ColorDoctor

Fujitsu tarafından üretilmiş olan bu yazılım ile Color Oracle gibi filtreler ekleyebileceğimiz gibi sayfanın siyah beyaz görünümü de görebilir ve bu görüntüyü farklı formatlarda (BMP, JPEG, PNG, TIFF, ve GIF) kayıt edebiliriz. Color Oracle’ın aksine sadece Windows üzerinde çalışıyor ve çalışması için Windows .NET Framework 1.1 gerekiyor.

3. Sim Daltonism

Sim Daltonism sadece Mac için üretilmiş bir yazılım olarak Mouse ile gezinilen alanlarda anlık filtreler oluşturabiliyor.

Yazılımların yanı sıra online araçlar ile de yukarıda bahsettiğimiz sonuçları elde edebiliyoruz.

Coblist ile yüklediğimiz resmin renk körlüğü rahatsızlığı olan kullanıclar tarafındand nasıl göründüğüne bakabilirken, Vischeck ve Colorblind Web Page Filter ile de web sayfalarının testini yapabiliyoruz.

Color Vision da herhangi bir rengi seçip o rengin nasıl göründüğünü belirlemeye yarıyor.

Sayfa okunabilirliğinin testi kullanılabirlik testlerinin bir parçası olarak kullanıcıların test esnasında yaptığı yorumlardan ve anket sonuçlarından çıkarılabiliyor.

Sayfanın okunabilirliği konusunda kullanıcı ile test etmeden bu konuda daha önce yapılan çalışmalara bakarak da fikir sahibi olabiliyoruz. Alyson L. Hill’in yaptığı bir araştırma farklı yazı stilleri, yazının normal veya italik olması ve değişen arka plan/yazı renklerinin okunabilirliğe olan etkisini ölçmekte.

Araştırmayı anlatmadan önce bu çalışmanın 1997 yılında yapıldığını ve o günden günümüze hem kullanıcı hem de donanım anlamında fazlasıyla değişiklikler olduğunu hatırlatmakta fayda var. Şimdilik bu denli karşılaştırmaların olduğu başka bir çalışma yapılmadığı için bu araştırmayı örnek olarak veriyoruz.

Bu çalışmaya katılan deneklerden farklı yazı stilleri,biçimleri ve arka plan/yazı rengine sahip metinlerin taranması ve bu metinler içinden belirli kelimelerin bulunması isteniyor. Aşağıdaki çalışma sonuçlarının olduğu -okunması biraz zor olan-grafiği görebilirsiniz.

BK/GY (Gri üzeri siyah)
BK/W (Beyaz üzeri siyah)
GN/Y (Sarı üzeri yeşil)
R/GN (yeşil üzeri kırmız)
W/BL (mavi üzeri beyaz)
Y/BL (mavi üzeri sarı)

Grafikte Arial,Times New Roman ve Courier yazı tipi, normal ve italik yazı stili ve yukarıda belirtilen arka plan/yazı rengi kombinasyonları kullanılarak kullanıcıların reaksiyon süreleri bulunmuştur.

Grafiği yorumlamak gerekirse kullanıcıların en hızlı reaksiyonları verdiği metinler sarı arka plan üzerine yeşil ve beyaz arka plan üzerine siyah ile normal stilde yazılanlardır. Buradan bu metinlerin diğerlerine nazaran çok daha okunabilir olduğu sonucu çıkmıştır.

Araştırmanın anlatıldığı sayfa da araştırma sonucunu baz alarak sarı arka plan üzerine yeşil ile yazılmıştır.

Türkiye’de de yukarıdaki döküman kadar detaylı olmasa da Başbakanlığın Türkiye Bilimsel ve Teknolojik Araştırma Kurumu-Marmara Araştırma Merkezi’ne hazırlattığı Kamu Kurumları İnternet Sitesi Kılavuzu bulunuyor.

Bu yönergelerin nasıl uygulandığına dair güzel bir örneği Emirates‘in erişilebilirlik sayfasında görebiliyoruz. Emirates bu sayfada erişilebilirlik adına neler yaptığını Resimler, Metin, Bağlantılar,Formlar ve tablolar,Komut dosyaları,Açılan Pencereler,Görsel tasarım,Erişim Tuşları ve Yapısal İşaretleme başlıkları altında anlatmış. Aşağıda bu maddelerden birkaçını bulabilirsiniz. Aşağıdaki maddeler ekran okuyucu kullanarak web sayfalarını gezen kullanıcılar için oldukça yararlıdır.

Tüm resimlerin ALT etiketlerinde resim açıklaması bulunmakta.

Tüm form kontrolleri uygun ve açık bir şekilde etiketlenir ve stil sayfaları olmadan okunabilir.

Tüm formlar arasında fare kullanmadan gezinebilirsiniz.

Site içeriği, JavaScript desteği olmadan kullanılabilir.

Tarayıcınız veya tarayıcı cihazınız stil sayfasını desteklemiyorsa, yine de tüm sayfaların içeriği okunabilir.

Bu maddelerin yanında önemli bir başlık olarak Erişim tuşları (Access Keys) da dikkat çekmektedir. Erişim tuşları ile sitede tanımlanan kısayollar Windows’da ALT ile Macintosh’da da Control ile beraber basılarak ziyaret edilir. Bir erişim tuşu belirlemek için “a” etiketine accesskey parametresi aşağıdaki gibi eklenebilir.

Erişilebilirlik sadece görme engelli kullanıcılar için değil de renk körlüğü ve görme bozukluğu rahatsızlığı olan kullanıcılar için de gereklidir. Her 20 kullanıcıdan birinde renk körlüğü her 10 kullanıcıdan birinde de görme bozukluğu olduğu düşünülürse erişilebilirliğin hitap ettiği kitle hiç de azımsanmamalıdır.

Web Erişilebilirliği Nedir?

Web erişilebilirliği, web sayfalarının engelli kişiler tarafından da kullanılabilmesi anlamına gelir. Erişilebilirlik sağlandığı takdirde, engelli kişiler web sayfalarını algılayabilir, anlayabilir, sayfalar arasında dolaşabilir, sayfalar ile etkileşimde bulunabilir ve sayfalara katkı sağlayabilirler.

Web erişilebilirliği aynı zamanda engelli olmayan kişilere de, (örneğin yaşlılık sebebiyle alışkanlıkları değişen kişiler gibi) çeşitli avantajlar sağlar.

Web İçerik Erişilebilirliği Yönergeleri

Web erişilebilirliği yönergelerinin ilk versiyonu 1999 yılında W3 tarafından oluşturulmuştur. İlk versiyonun üzerinde yapılan düzenlemelerden sonra 2008 yılında 2.0 versiyonu son halini almış ve yayınlanmıştır.

Web İçerik Erişilebilirliği Yönergeleri 2.0

2.0 versiyonu dört prensip ve prensibin alt yönergelerinden oluşmaktadır.

Prensip 1: Algılanabilir – Bilgi ve Kullanıcı arayüzü bileşenleri kullanıcılara algılayabileceği şekillerde iletilmelidir.

1.1 Metin Alternatifler :Metin olmayan içerikler için metin alternatifler sağlayın. Böylece bu metinler insanların ihtiyacı olduğu biçimlere kolayca çevrilebilir olsun.

1.2 Zaman Bazlı Medya : Zaman bazlı medya (video ve ses dosyaları) içerik için alternatifler sağlayın.

1.3 Uyarlanabilirlik : İçeriği bilgi ve yapı kaybetmeden farklı yollarla (daha basit bir şablon ile örneğin) sunulabilir şekilde yaratın.

1.4 Ayırt Edilebilir : Kullacılar için içeriğin arka yüzden kolayca ayırt edilir şekilde görülebilir ve duyulabilir halde olmasını sağlayın.

Prensip 2: Kullanışlı – Kullanıcı arayüzü bileşenleri ve navigasyon kullanışlı olmalıdır.

2.1 Klavyeden Erişilebilir: Sitedeki bütün fonksiyonları klavyeden erişilebilir yapın.

2.2 Yeterli Zaman: Kullanıcılara içeriği okumaları ve kullanmaları için yeterli zaman tanıyın

2.3 Krizler: İçeriği rahatsızlığı olan kullanıcılarda krizlere yol açacak şekilde düzenlemeyin. Sitenizde hiç bir şey bir saniye içinde 3 kereden fazla yanıp sönmesin.

2.4 Gezinilebilir: Kullanıcılara sitede gezinmeleri,içerik bulmaları ve şu an nerede olduklarını bilmeleri konusunda yardımcı olacak yollar sağlayın.

Prensip 3: Anlaşılabilir – Bilgi ve Kullanıcı arayüzü işlemleri anlaşılabilir olmalıdır.

3.1 Okunabilir : Metin içeriği okunabilir ve anlaşılabilir yapın.

3.2 Tahmin Edilebilir: Web sayfalarınızı tahmin edilebilir şekilde görünmesini ve çalışmasını sağlayın.

3.3 Veri Giriş Yardımı: Kullanıcıların hatadan kaçınmaları ve hatalarını düzeltmeleri konusunda yardımcı olun.

Prensip 4: Dirençli: İçerik yardımcı teknolojilerle birlikte geniş farklılıktaki kulanıcı araçları tarafından güvenli bir şekilde yorumlanabilecek kadar dirençli olmalıdır.

4.1 Uyumluluk : Şuanki ve gelecekteki yardımcı teknolojilerel birlikte kulanıcı araçlarına olan uyumluluğu maksimum hale getirin.

Colour Contrast Check

Colour Contrast Analyser

Bu araçlar bize renkler arası kontrast farkından renk körlüğü rahatsızlığı olanlar ile görme bozukluğu yaşayanların okumada sıkıntısı olup olmayacağını belirtiyor.

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”.

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.