Bu İçerikte Yer Alan Ana Başlıklar:
• Kullanıcı Deneyiminde Erişilebilirlik
• Algılanabilirlik (Perceivable)
• A
• AA
• AAA
• Anlaşılabilirlik (Understandable)
• Erişilebilir Bir Tasarım Yaratmak İçin Faydalanabileceğiniz Siteler
Bir web sitesi ya da uygulama tasarımı yapılırken bir çok kriter göz önünde bulundurulur ve tasarım bu şekilde oluşturulur. Sitenin veya uygulamanın konseptine göre marka kimliği, butonların ve ikonların bulunacağı yerler, ana menü tasarımı ve daha yüzlerce kriter göz önüne alınır. Bu kriterleri yaparken de kullanıcıyı her zaman düşünmek ve onunla empati kurarak tasarım yapmak gerekmektedir. İşte kullanıcı merkezli bir tasarım yaparken olmazsa olmaz en önemli noktalardan biri olan erişilebilirlik burada karşımıza çıkar.
UX (Kullanıcı Deneyimi) alanında erişilebilirlik, web siteleri ve uygulamaların beceri seviyesi gözetmeksizin olabildiğince büyük bir kitle tarafından kullanılabilir olmasıdır. Engelli, yaşlı, çocuk gibi kitleler dikkate alınarak tasarımlar yapılır ve çeşitli noktalara dikkat edilir. Kısacası erişilebilirlik herkes için tasarımdır diyebiliriz.
Erişilebilirlik konusu bugüne kadar en çok World Wide Web Consortium (W3C) kuruluşunun gündeminde yer almıştır. World Wide Web Consortium, 1994'te Tim Berners-Lee tarafından MIT ve CERN bünyesinde kurulmuş olan uluslararası world wide web (bildiğimiz www) standartlarını belirleyen örgüttür. Kullanıcıların bilgisayar, PDA, cep telefonu ya da diğer mobil aygıtlarla internette dolaştıkları web sitelerini stabil olarak görüntüleyebilmelerini sağlar.
1999 yılında W3C, ilk yönergeler grubunu oluşturdu. Kapsamı ise bütün kullanıcıların erişim sağlayabileceği bir web içeriğiydi. Buna Web İçeriği Erişilebilirlik Yönergeleri (WCAG) adı verildi ve erişilebilir tasarımlar sağlamak adına yıllar içinde güncellenmeye devam etti.
WCAG yönergelerinin getirdiği prensipler şu şekildedir:
• Bir web sitesi algılanabilir olmalıdır. Bilgi ve arayüz bileşenleri, kullanıcılara algılayabilecekleri şekillerde sunulmalıdır.
• Arayüz bileşenleri ve navigasyon çalıştırılabilir olmalıdır.
• Web sitesinin işleyişi anlaşılır olmalıdır.
• İçerik, yardımcı teknolojiler tarafından güvenilir bir şekilde yorumlanabilecek kadar sağlam olmalıdır.
Bahsedilen bu yönergeler “A”, “AA”, “AAA” olmak üzere üçüne göre erişilebilirlik kapmasında ayırt edilebilirlikleri derecelendirilir. “A” düzeyi en temel erişilebilirliği temsil ederken “AA”, çeşitli engellere sahip olan ve/veya farklı sebeplerden dolayı farklı erişim imkanı sunulması gereken kullanıcıların çoğunluğu tarafından erişilebilir olması için konulmuş uyumluluk düzeyidir. Bir sitenin “AAA” uyumluluk düzeyinde olabilmesi için ise erişilebilirlik adına ekstra yaptırımlar uygulaması gerekir.
Bir örnekle buna açıklık getirelim: ayırt edilebilirlilik yukarıda bahsedilen derecelendirmelerin her birinde varolan bir özelliktir. Aralarındaki fark ise, her bir derecede farklı yansımaları olan ve her derecede daha da detaylanıp yerine getirilmesi zorlaşan bir yapıya bürünme durumudur.
A
İlk olarak sadece “A” derecedeki ayırt edilebilirlik kriterlerine bakarsak yalnızca renk kullanımı ve ses kontrolü elementleriyle karşılaşıyoruz. Renk kullanımı konusunda, her kullanıcının renkleri göreceğini göz ardı etmemek, web sitesi ve uygulama tasarımlarında bunları dikkate alarak renkleri kullanmak gerekmektedir.
Örneğin, bir web sitesi giriş ekranı tasarımında girilen hatalı bilgileri sadece renk ile gösterseydik bazı kullanıcılar renkler üzerinden hatalı veya hatasız sonuçları ayırt edemeyeceklerdi.
Ses kontrolü için de web sitelerinde veya uygulamalarda otomatik olarak açılan herhangi bir sesin 3 saniyeden fazla çalmaması, sesi duraklatmak veya durdurmak için veya ses seviyesini genel sistem ses seviyesinden bağımsız olarak kontrol edebilmek gerekmektedir. Örneğin, işitme engelli biri sitenize girdiği zaman otomatik açılan bir reklam videonuz varsa, bu videonun ya sesi kapalı olarak gelmeli ya da sesli bir video ise kullanıcıya bunun uyarısının imgelerle yapılıyor olması gerekmektedir.
AA
Bir web sitesinin “AA” derece ayırt edilebilirlik kriterlerine geldiğimizde; minimum kontrast (en az 4,5:1 oranında), içerik ve işlevsellik kaybı olmadan %200’e kadar herhangi bir yardımcı teknoloji olmadan metin boyutlandırabilme; yine içeriğin, bilgi ve işlevsellik kaybı olmadan, 320 piksele kadar yatay, 256 piksele kadar dikey kaydırma olmadan sunulabilme sınırı olması; kelime aralıklarının, font büyüklüğünün en az 0,16 katı olması; harf boşluklarının, font büyüklüğünün en az 0,12 katı olması; paragraf aralıklarının font büyüklüğünün en az 2 katı olması; satır aralığının, font büyüklüğünün en az 1,5 katı olması gereklilikleri sağlanarak hazırlanan içerik, herhangi bir işlevsellik kaybına uğramadan bu kritere uyumlu hale getirilmiş olur.
AAA
Son olarak “AAA” kriterlerinde; gelişmiş kontrast özellikleri yani metnin görsel sunumu ve metin resimlerinin kontrast oranının en az 7:1 oranında olma zorunluluğu yer almaktadır. Belli şartlar dahilinde düşük arka plan sesi barındırması ya da hiç arka plan sesi olmaması. Görsel sunumda, ön ve arka plan renklerinin kullanıcı tarafından seçilebilir olması, metnin iki yana birden hizalanmamış olması; paragraflar aralıklarının, paragraf içindeki satır aralıklarının en az 1,5 katı olması; metnin, içerik ve işlevsellik kaybı olmadan, tam ekran bir pencerede bir metin satırını okumak için yatay olarak kaydırmasını gerektirmeyecek şekilde %200’e kadar herhangi bir yardımcı teknoloji olmadan metin boyutlandırabilme özellikleri yer alır.
Bu bahsi geçen kriterler, yukarıda bahsedilen WCAG yönergelerinin algılanabilirlik prensibinin yalnızca “ayırt edilebilirlik” alt başlığında sağlanması gereken kriterlerdir. Sadece algınabilirlik prensibinde; metin alternatifleri, zamana dayalı medya, uyarlanabilir olma alt başlıkları da yer almaktadır. Bunların hepsinin “A”dan “AAA”ya kadar olan tüm kriterler ile olan ilişkileri; üstüne diğer ana kriterlerin alt başlıklarının aynı kriterlerle olan ilişkileri de eklendiğinde liste oldukça uzuyor.
İkinci sıradaki çalıştırılabilir olma prensibinin altında klavyeden erişim; kullanıcıya bir içeriği okumak ve kullanmak için yeterli zamanı vermek; içeriklerin, bir kullanıcının nöbet veya fiziksel reaksiyon geçirme ihtimalini ortaya çıkaracak şekilde tasarlanmaması; sitenin, kullanıcının içerik bulabileceği, navigasyonda kaybolmayacağı şekilde tasarlanmış olması yer almaktadır.
Farklı sayfalarda farklı şekilde betimlemeler ve işaretler erişilebilirliği etkileyebilir. Anlaşılabilir olma prensibinin altında içeriklerin okunabilir ve açıklayıcı olması; sayfaların öngörülebilir şekillerde görünmesinin ve çalışmasının sağlanması; kullanıcıların hatalardan kaçınmasına ve hatalarını düzeltmesine yardımcı olunması bulunmaktadır.
Destekleme prensibinde ise yardımcı teknolojiler de dahil olmak üzere mevcut ve gelecekteki kullanıcı aracılarıyla uyumluluğun en üst düzeyde olması yer almaktadır.Bir web sitesi bilgisayar üzerinden ne kadar erişilebilir ise mobilde de aynı erişimi sağlatmaya çalışmalıdır. Bazı tasarımlarda ise kullanıcı için yardımcı araçlar gerekliyse kullanıcının bunlarla ilişkisi erişilebilirlik açısından ele alınmalıdır.
Bu prensiplerin altında bahsi geçen özelliklerin hepsinin altında da “A”dan “AAA”ya kadar farklı özellikler barındığını tekrar hatırlatmakta fayda var. Özellikle son zamanlardaki yüksek profilli davalardan yapılan çıkarımlara göre web siteleri ve uygulamalar, erişilebilir olma konusuna odaklanmaya daha fazla vakit harcamaya başladı. Birçok site, tüm kullanıcılar tarafından erişilebilir olma ihtiyaçlarının her geçen gün daha fazla farkına varıyor.
Web sitelerinin veya uygulamaların mobil tarafında alınan kararların nasıl alındığına dair belli başlı maddelere de bakmadan olmaz.
Başlangıç noktası olarak tüm temel öğelerin başparmak dostu bölgede olup olmadığını kontrol edilmesi diyebiliriz. Başparmak dostu bölge, kullanıcının akıllı telefonunu aynı eliyle tutarken başparmağıyla ekranda kolayca ulaşabileceği boşluğa verilen isimdir. Kullanıcıların büyük kısmı akıllı telefonlarını sağ eliyle kullanır. Dolayısıyla başparmak dostu bölge, ekranın sol alt köşesini ve ortasını içerir.
İnsanların daha kolay ulaşmaları gereken butonlar belirtilen bu bölge içinde yer almalı, diğerlerinden daha büyük öneme sahip olan ana menü, profil, chat box gibi bileşenlere yer verilmelidir.
Mobil erişilebilirliğe örnek olarak Safari uygulamasının yaptığı güncellemeyi gösterebiliriz. Mobillerdeki internet tarayıcılarının normalde arama butonları en üstte yer alır, üstte yer almasının sebebi web tarayıcılarından ilham almasıdır. Ancak mobilde en üst bölge, başparmak bölgesinin en zor uzanacağı alanlardan bir tanesidir. Safari yaptığı erişilebilirlik çalışması sonucu arama çubuğunu kullanıcılar için baş parmak erişilebilir bölgesine alarak kullanıcılarına rahat bir mobil arama seçeneği sunmuş oldu.
Mobil erişilebilirlik için önemli konulardan bir diğeri de dokunmatik klavyenin kullanımıdır. Otomatik düzeltmenin zayıf çalışması, kullanıcıların fark edip etmemesine göre çeşitli zararlar doğurabilir. Kullanıcı, bu durumun farkına vardığında bunu fazlasıyla sinir bozucu bulması kaçınılmaz sonuçların ilkidir. Eğer kullanıcı, zayıf çalışan bir otomatik düzeltmeyi fark etmezse çok farklı sonuçlar ortaya çıkabilir.
Yapılan birçok kullanıcı testi sonucunda özellikle ödeme sürecinde veya adres kaydı sırasında kısaltmalar, sokak adları, e-posta adresleri ve sözlükte olmayan benzer sözcükler için otomatik düzeltmenin yetersiz çalışmasından dolayı, kullanıcılar satın alma sürecini tamamlarken birçok defa hatalı veri gönderdiği kaydedilmiştir. Tam bu noktada konuya adres doğrulayıcılar dahil olmaktadır. Adres doğrulayıcı olmayan web sitelerinde, sipariş inceleme sayfasında dikkatli olunmadığı zaman, yanlış adres gönderme istatistiği çok fazla artmaktadır. Dolayısıyla bunun önüne geçmek için otomatik düzeltme kullanılabileceği sonucuna varıyoruz. Yani otomatik düzeltmenin her yerde devre dışı bırakılması da doğru değildir.
Adobe Color
Adobe Color, renk paleti çalışmalarınızda renklerin birbirleri arasındaki uyumu görmek ve çeşitli kurallara göre renk paletleri oluşturmak için yaratılmış bir web sitesidir. Bu site aynı zamanda erişilebilirlik adına da kullanıcılarına güzel bir palet sunmaktadır.
“Accessibility Tools” başlığı ile erişebileceğiniz bu alanda hem renk körlüğü için renklerin nasıl göründüğünü kontrol edebilir, hem de ‘AA’ ve ‘AAA’ seviyelerini belirleyerek kontrast ayarlaması yapabilirsiniz.
Coolers.so
Coolers.so sitesi de web sitesinde ya da bir uygulama tasarımı sırasında okunurluğu yüksek yazılar kullanmak için renklerinizi test edebileceğiniz sitelerden bir tanesi, Adobe Color’a göre daha sade ve derece üzerine bir arayüz ile erişilebilir tasarımlar yaparken sizlere yardımcı olabilecek bir site haline geliyor.
Bu içeriğimizde sizler için web sitelerinde ve akıllı telefonlarda kullanıcı odaklı olmak adına erişilebilirlikten bahsettik. Siz de erişilebilir ve kullanıcı deneyimi dostu tasarımlar hakkında daha fazla bilgi sahibi olmak istiyorsanız Kullanılabilirlik Konu başlığımızı inceleyebilir, online gerçekleşen UX Eğitimi ve Advanced UX Eğitimlerimize katılarak da kullanıcı dostu tasarımları bizimle beraber keşfederek, öğrenebilirsiniz.
-min.jpg)
