KAMİS
AA Düzeyi İlkeler
Altyazılar (Canlı)
İlke
Canlı yayımlanan içerikler için altyazı sağlanmalıdır.
Açıklama
İnternet sitelerinde canlı olarak yayımlanan sesli ve görüntülü içerikler için altyazı seçeneği sunulması gerekmektedir. Altyazıların, sadece içerikte yer alan konuşmalar hakkında değil, ortamda yer alan efektler ve diğer önemli detaylar hakkında da bilgilendirici olması beklenmektedir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 1.2.4
Örnek
Örnek sitede, canlı yayınlanan içeriklerin altyazısının olması duyma zorluğu çeken kullanıcıların içeriği anlayabilmelerini sağlayacaktır.
Sesli Açıklama (Önceden Kaydedilmiş)
İlke
Video öğeleri için sesli açıklamalar sağlanmalıdır.
Açıklama
İnternet sitelerinde yer alan önceden kaydedilmiş video öğeleri için sesli açıklamaların sunulması beklenmektedir. Böylelikle, görme engelli kullanıcıların video içeriklerini daha kolay anlayabilmesi sağlanacaktır. Sesli açıklamaların içerikle senkronize olmasına ve video içeriğinde yer alan görsel değişiklikler hakkında da bilgi vermesine dikkat edilmelidir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 1.2.5
Örnek
Örnek sitede olduğu gibi, video içeriklerinin görme engelli kullanıcılar tarafından anlaşılabilmesi için sadece sesli versiyonlarının da sunulması gerekmektedir.
Kontrast (Asgari)
İlke
Metin ve görsel öğeler uygun kontrast değerlerine sahip olmalıdır.
Açıklama
İnternet sitelerindeki metin ve görsel öğeler ile zemin arasında minimum 4.5:1 kontrast oranının sağlanması beklenmektedir. Bu değerden daha düşük kontrast oranlarının okunabilirliği düşürdüğü göz önünde bulundurulmalıdır. Bununla birlikte, büyük ölçekli resim ve görseller için 3:1 kontrast oranının kullanılması tavsiye edilmektedir. Kurum logoları ve sadece tasarım amacıyla kullanılan görseller için ise kontrast oranlarının sağlanması gerekmemektedir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 1.4.3
Örnek
Örnek sitede içerikler beyaz zemin üzerine siyah renk kullanılarak yazılmış, kontrast değerleri uygun hale getirilmiştir. Renkler arasındaki kontrast testleri çevrimiçi olarak http://snook.ca/technical/colour_contrast/colour.html adresinden yapılabilmektedir.
Yazının Yeniden Boyutlandırılması
İlke
Metin öğelerinin yeniden boyutlandırılabilmesi sağlanmalıdır.
Açıklama
İnternet sitelerinde yer alan metinlerin, işlevselliklerini kaybetmeyecek ve yardımcı teknolojilere ihtiyaç duymayacak şekilde %200 oranına kadar yeniden boyutlandırılabilmesi gerekmektedir. Böylelikle, farklı derecelerdeki engel oranlarına sahip görme engelli vatandaşların, herhangi bir yardımcı teknolojiye ihtiyaç duymadan içerikleri okuyabilmesi sağlanabilir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 1.4.4
Örnek
Örnek sitede olduğu gibi, site içeriklerinde yer alan yazıların boyutlarının arttırılıp azaltılabiliyor olması gerekmektedir. Görme güçlüğü çeken kullanıcılar yazı boyutlarını arttırarak içeriği okuyabilmektedir.
Metin Görüntüleri
İlke
Metinlerin resim formatında kullanımından kaçınılmalıdır.
Açıklama
Ekran okuyucu programlar gibi erişilebilirlik araçları, resimlerin içinde yer alan metinleri okuyamamakta, sadece alternatif metinlere dayanarak kullanıcıları bilgilendirmektedir. Ayrıca, bu metinlerin kullanıcılar tarafından yeniden boyutlandırılması mümkün olmamaktadır. Bu nedenle, metinlerin resim formatında kullanılmasından mümkün olduğunca kaçınılması gerekmektedir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 1.4.5
Örnek
Örnek sitede içeriklerin tamamı metin olarak sunulmuştur. Ekran okuyucuların internet sitelerini okuyabilmesi için içeriklerin metin olarak sunulması gerekmektedir. Metinsel karakterler içeren ancak resim olarak yerleştirilen bir içerik (Örneğin, başlığın resim olarak verilmesi) ekran okuyucular tarafından fark edilmeyebilir.
Birden Fazla Yol
İlke
İnternet sitesi içeriklerine farklı yollarla erişim sağlanabilmelidir.
Açıklama
Kullanıcıların internet sitelerinde yer alan içerik ve işlemlere farklı yolları kullanarak erişebilmesi gerekmektedir. Bunun için, arama alanları, gezinim öğeleri ya da site haritası gibi seçenekler kullanıcılara sunulmalıdır. Kullanıcıların alışkanlıkları göz önünde bulundurularak, bütün alt sayfalardan ana sayfaya bağlantı vererek, ana sayfanın site haritası gibi kullanılması da sağlanabilir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 2.4.5
Örnek
Örnek sitede arama özelliğin bulunması ve site haritasının verilmesi içeriklere iki yoldan ulaşılabilmesini sağlamaktadır. İnternet sitesindeki içeriklere farklı yollarla ulaşım sağlanması kullanıcıların daha hızlı istediklerini bulmalarına yardımcı olmaktadır.
Başlıklar ve Etiketler
İlke
Başlıkların ve etiketlerin açık, anlamlı ve tutarlı olması sağlanmalıdır.
Açıklama
Kullanıcıların aradıkları bilgiye kolaylıkla ulaşabilmeleri ve site içeriklerini doğru anlayabilmeleri için açık ve anlamlı başlıklara yer verilmelidir. Veri giriş alanları ve gezinim öğeleri için de açıklayıcı ve yönlendirici etiketler kullanılmalı, etiketler ilişkili oldukları içeriklerle tutarlı olacak şekilde biçimlendirilmelidir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 2.4.6
Örnek
Örnek sitede başlık içerik ile ilişkili olacak şekilde oluşturulmuştur. İnternet sitesinde kullanılan içeriklerin ve başlıkların birbirleri ile ilişkili olmaları gerekmektedir.
Görünür Odaklama
İlke
İmleç görünür ve ayırt edilebilir olmalıdır.
Açıklama
Kullanıcıların internet sitelerindeki mevcut konumlarını anlayabilmeleri ya da hangi öğeleri seçtiklerini ayırt edebilmeleri için imlecin görünür ve ayırt edilebilir olması gerekmektedir. Örneğin, veri giriş alanlarında imlecin hangi alanda olduğunun görsel olarak belirtilmesi, kullanıcıların kolay ve doğru veri girişi yapmalarına yardımcı olacaktır.
Referanslar
- WCAG 2.0 – AA Düzeyi / 2.4.7
Örnek
Örnek sitede veri girilecek alanda imleç bulunmaktadır. Böylece kullanıcı hangi alana veri girilmesi gerektiğini anlayabilmektedir.
Bölümlerin Dili
İlke
İçerikler oluşturulurken kullanılan dil anlaşılır olmalıdır.
Açıklama
İnternet sitesi içeriklerinin hangi dilde oluşturulduğu kullanıcı ajanları ve ekran okuyucu programlar gibi yardımcı teknolojiler tarafından belirlenebilmelidir. İçerik içinde farklı dilde kelimeler ya da cümleler yer alıyorsa, bu ifadelerin farklı dilde olduğu HTML kodunda açıkça belirtilmelidir. İçeriğin dili doğru algılanmadığında, kelimelerin programlar tarafından doğru telaffuz edilemeyeceği ve kullanıcıların karışıklık yaşayabileceği unutulmamalıdır.
Referanslar
- WCAG 2.0 – AA Düzeyi / 3.1.2
Örnek
Örnek sitede cümle içinde yer alan farklı dildeki kelimeler kaynak kodunda belirtilmiştir. İnternet sitelerinde kullanılan dillerin ekran okuyucular tarafından tanınması için HTML kodunda tanımlama yapılması gerekmektedir. Otomatik olarak Türkçe ayarlanmış bir okuyucu farklı dilde bir ifade gördüğünde ekrandaki ifadeyi okuyamayabilir ya da hatalı okuyabilir.
Tutarlı Gezinme
İlke
Gezinim öğeleri ve bağlantılar bütün sayfalarda tutarlı olmalıdır.
Açıklama
Engelli kullanıcılar, aynı internet sitesine ait alt sayfalarda farklı tasarımlarla karşılaştıklarında karışıklık yaşayabilirler. Bu nedenle, internet sitelerinde yer alan gezinim öğelerinin ve bağlantıların, bütün alt sayfalarda tutarlı olacak şekilde tasarlanması gerekmektedir. Gezinim öğeleri ve bağlantıların renk, görünüm, sıralama ve sayfa yerleşimi gibi özelliklerinin, internet sitesinin farklı sayfalarında değişkenlik göstermemesi beklenmektedir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 3.2.3
Örnek
Örnek sitede olduğu gibi internet sitelerinde kullanılan gezinim öğeleri her sayfada aynı görünümde ve özellikte olmalıdır.
Tutarlı Tanımlama
İlke
Aynı işleve sahip öğeler, benzer şekilde isimlendirilmelidir.
Açıklama
İnternet sitelerindeki aynı işleve sahip öğeler, tutarlı olarak isimlendirilmeli ve aynı etiketlere sahip olmalıdır. Özellikle ekran okuyucu programlar aracılığı ile site içeriklerine erişim sağlayan kullanıcıların, farklı isimlendirilen öğelerin işlevlerini anlamayabileceği göz önünde bulundurulmalıdır. Örneğin, veri girişi yapılırken düğme isminin bazı sayfalarda “Kaydet” bazı sayfalarda ise “Tamam” olması engelli kullanıcıların karışıklık yaşamasına neden olabilir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 3.2.4
Örnek
Örnek sitede, “Hizmet Listesi” sayfasına dönmek için bütün sayfalarda aynı düğmeye tutarlı olarak yer verilmiştir.
Hata Önerisi
İlke
Hata mesajları açık ve yönlendirici olmalıdır.
Açıklama
Kullanıcılar hata yaptıklarında hatanın içeriği ve nasıl düzeltilebileceği konusunda yönlendirilmelidir. Örneğin, veri girişini doğru formatta yapamayan bir kullanıcıya, yalnızca bu alanı hatalı doldurduğunun bilgisinin verilmesi yetersiz kalabilir. Bunun yerine, sadece hatanın nedenini değil aynı zamanda nasıl düzeltilebileceğini de açıklayan bir hata mesajının gösterilmesi beklenmektedir.
Referanslar
- WCAG 2.0 – AA Düzeyi / 3.3.3
Örnek
Örnek sitede, hatalı veri girişi yapıldığında kullanıcılara girilecek veri tipi hakkında bilgi verilmektedir. Hatalı girişler yapıldığında hatanın nasıl giderilebileceğine dair ipuçları kullanıcılar ile paylaşılmalıdır.
Hatalardan Korunma (Hukuki, Mali, Verilerle İlgili)
İlke
Hukuki ya da mali sonuçları olan işlemlerde kullanıcıların hata yapma oranı azaltılmalıdır.
Açıklama
İnternet sitelerinde yapılan işlemler ya da veri girişleri, kullanıcılar için hukuki yükümlülükler ya da mali sonuçlar doğurabilir. Bu durumda, kullanıcılar ilgili işlemi tamamlamadan ya da veri girişini sonlandırmadan önce bilgilendirilmelidir. Kullanıcıların girdikleri verilerin doğruluğunu teyit etmeleri sağlanmalı, gerekli durumlarda kullanıcıların bir önceki adıma dönerek işlemlerini yeniden düzenlenebilmesi seçeneği sunulmalıdır.
Referanslar
- WCAG 2.0 – AA Düzeyi / 3.3.4
Örnek
Örnek internet sitesinde görüldüğü gibi önceki işlemlere gitme seçeneği kullanıcılara verilmeli, daha önce girilen bilgilerin güncellenebilmesi sağlanmalıdır.
Sayfa (Ekran) Yönü
İlke
Internet siteleri ara yüzler için hem yatay hem de dikey ekran yönünü desteklemelidir.
Açıklama
İnternet sitelerinin özellikle mobil cihazlardan erişilen versiyonlarında, sayfada içerik sunulurken, kullanıcılardan mobil cihazın yönünü değiştirmelerini gerektirecek bir ara yüz tasarlanmamalıdır. Kullanıcılara internet sitelerini hem dikey hem de yatay olarak görüntüleyebilme imkânı verilmelidir. Kullanıcının seçmiş olduğu ekran yönüne sadık kalınarak, internet sitesi tercih ile uyumlu ekran yönünde içeriği sunabilmelidir. Böylece ekranı döndürme konusunda engeli ya da kısıtı olan kullanıcıların tek bir ekran yönü ile sınırlandırılmaması sağlanmış olacaktır.
Referanslar
- WCAG 2.1 – AA Düzeyi / 1.3.4
Örnek
Örnek sitede, video izlerken kullanıcının ekranı dikey konumdadır ve video bu dikey konumda açılmıştır.
Veri Giriş Amacı Belirleme
İlke
Kullanıcıların veri girişi yapması gereken alanların amaçları net bir biçimde belirlenmeli ve internet sitesi kodlanırken veri alanına, veri alanının neyi amaçladığına yönelik etiket bilgisi eklenmelidir.
Açıklama
Veri alanlarına hangi verilerin girilmesi gerektiğinin kodlama yapılırken belirlenmesi ve veri giriş alanına otomatik doldurma özelliğinin eklenmesi, kullanıcıların kullandıkları internet tarayıcısının veri alanlarını geçmiş bilgileri temel alarak otomatik olarak doldurmasını sağlayacaktır, bu da kullanıcıların daha az veri girmesini ve daha kullanışlı bir deneyim yaşamasına imkân verecektir. Özellikle ekran okuyucu gibi internet ara yüzlerini metinsel bir şekilde okuyan yardımcı teknolojilerin, kullanıcılardan tam olarak hangi bilginin istendiğini anlaması erişilebilirliğin sağlanmasında önemlidir.
Referanslar
- WCAG 2.1 – AA Düzeyi / 1.3.5
Örnek
Örnek sitede, veri giriş amacı açıkça belirtilmiş ve otomatik doldurma özelliği ile geçmişte girilmiş olan veriyi seçme imkanı verilmiştir.
Kaydırma
İlke
İçerik fonksiyonellik ve bilgi kaybına yol açmayacak şekilde iki boyutlu kaydırmaya ihtiyaç duyulmayacak türde sunulmalıdır.
Açıklama
İnternet siteleri, kullanıcıların eriştikleri dijital ortamların ekran boyutlarına ve çözünürlüklerine duyarlı olmalı ve olabildiğince yatay ya da dikey kaydırmaya yol açmayacak şekilde içerik organizasyonu yapılmalıdır. Özellikle mobil cihazlar için geçerli bu husus, zayıf görüşe sahip ve içeriği zoom yaparak takip etmek durumunda olan kullanıcılar için yakınlaştırma yaparak içeriğe tek bir sütun halinde daha kolay erişebilmeleri sağlanacaktır.
Bu husus için internet sitesinin 320 piksel ekran genişliğine ve 256 piksel ekran uzunluğuna uygun şekilde dijital aygıta uyumlanmasını sağlamalıdır. Zayıf görüşe sahip kullanıcılar için belirli bir yakınlaştırma oranını geçtikten sonra bile ekranda yatay kaydırma yapılmadan tüm içeriklerin ulaşılabilir olması sağlanmalıdır.
Referanslar
- WCAG 2.1 – AA Düzeyi / 1.4.10
Örnek
Örnek sitede, ilk görselde yakınlaştırma yapılmadan ve kaydırma olmadan tüm içeriğe ulaşılabilmekte, ikinci görselde yakınlaştırma oranı %400 yapıldığında da tek bir sütun halinde yatay kaydırmaya ihtiyaç duyulmadan sitedeki içeriklere erişilebilmektedir.
Metinsel Olmayan İçeriklerde Kontrast
İlke
Metinsel olmayan içeriklerde yakın elementler arasında belirli bir renk kontrastı olmalıdır.
Açıklama
İnternet sitelerinde metinsel olmayan kullanıcı ara yüzü elementleri (düğmeler, form alanları, linkler vb.) ile resimlerin (grafikler, diyagramlar vb.) yakınlarında bulunan zemin renkleri arasında renk oranının 3:1 oranında kontrast olması gerekmektedir. Böylelikle; zayıf görüşe sahip kullanıcılar, ara yüz elementlerini ve grafikleri birbirinden daha iyi bir şekilde ayırt edebilecektir.
Referanslar
- WCAG 2.1 – AA Düzeyi / 1.4.11
Örnek
Bir siteden alınan örnekte, isim verisi girilmesi gereken ilk veri giriş alanının alt zeminden ayırt edilip öne çıkması adına renk kontrastı ile sağlanmış, veri girilmek üzere alana tıklandığında ya da ulaşıldığında, veri girişi yapıldığı an fark edilebilir kılınması adına farklı bir renk ile çerçevelendiği görülmektedir.
Metinler Arası Boşluk
İlke
Paragraflar, satırlar, kelimeler ve karakterler arasında kullanıcıların içerik ve fonksiyon kaybı olmadan kolayca algılayabilecekleri şekilde mesafe bulunmalıdır.
Açıklama
İnternet sitelerinde okunabilirliği ve algılayamayı artırmak adına metinsel öğeler arasındaki mesafelerin belirlenerek, tüm site genelinde standart hale getirilmesi önemlidir. İnternet sitesi hazırlanırken, kodlama aşamasında işaretleme dillerinin minimum belirtilen değerleri sağlamasına dikkat etmek gerekmektedir.
Referanslar
- WCAG 2.1 – AA Düzeyi / 1.4.12
Örnek
İnternet sitelerinde satırlar arasında an az 1,5 yazı karakteri boyutu, paragraflar arasında en az 2 yazı karakteri boyutu, harfler arasında en az 0,12 yazı karakteri boyutu ve kelimeler arasında en az 0,16 yazı karakteri boyutu bırakılması algılanabilirliği artıracaktır.
Fare ya da Klavye Hareketi ile Tetiklenen İçerikler
İlke
Ekranda sunulan ek bilginin kullanıcının ek bir klavye veya fare hareketi olmadan görünebilmesi ve kaybolabilmesi sağlanmalıdır.
Açıklama
İnternet sitelerinde bir içerik üzerine fare ile gelindiğinde ya da veri giriş olan kısımlara gelindiğinde ve fare ya da klavye etkileşimi bittiğinde kaybolan ek bilgi (drop-down menüler, ipucu metinleri vb.) kullanıcıların etkileşimde bulunduğu alanı kapatmamalı, okunabilir olmalı ve istendiğinde kapatılabilmelidir. Bu tür durumlarda kullanıcı ek bilginin ekrandan kaybolmasını istiyorsa fare ile üzerine gelmeden ve klavye odağı beklenmeden bilgi bir klavye tuşu (Esc vb.) ile kaybolabilmelidir.
Referanslar
- WCAG 2.1 – AA Düzeyi / 1.4.13
Örnek
Örnekte, sitede LTVF isimli düğmenin fare ile üzerine gelindiğinde, düğme ile ilgili ipucu metni, bir alttaki kırmızı düğmenin üzerine gelerek düğmeyi kapatmaktadır. Bu gibi durumlarda ipucu metninin kullanıcının müdahalesi olmadan kaybolabilmesi ve başka bir düğmeyi kapatmaması gerekmektedir.
Durum Mesajları
İlke
Durum mesajları ile işlemin gerçekleşme durumu kullanıcıya iletilmelidir.
Açıklama
Kullanıcılar içerikte meydana gelen değişiklikler konusunda bilgilendirilmeli ve farkına varmaları sağlanmalıdır. Durum mesajı kullanıcıya bir eylemin başarısı veya sonuçları, bir uygulamanın bekleme durumu, bir işlemin ilerlemesi veya hataların varlığı hakkında bilgi sağlar.
Referanslar
- WCAG 2.1 – AA Düzeyi / 4.1.3
Örnek
Örneğin bir internet sitesinde posta kodu veri girişinin beklendiği bir veri alanına yanlış bir kod girilirse, veri giriş alanının yukarısına “Geçersiz Giriş” mesajının görünmesi sağlanabilir. Böylelikle ekran okuyucu programlar bu metni kullanıcılara okuyacak ve hata yapmaları durumunda yönlendirilmelerini sağlayacaktır.