WCAG 2.2 Kontrol Listesi: Web Sitenizi Uyumlu Hâle Getirin

Web erişilebilirliği, bir web sitesinin görme, işitme, hareket veya bilişsel farklılıkları olan kullanıcılar da dâhil herkes tarafından kullanılabilmesi demektir. Bu alandaki küresel referans, W3C tarafından yayımlanan WCAG (Web Content Accessibility Guidelines) standardıdır. WCAG 2.2, bu standardın güncel sürümüdür ve önceki sürümlere yeni başarı kriterleri ekler. Bu yazıda WCAG 2.2'yi anlaşılır bir kontrol listesine dönüştürüyoruz.

WCAG Neden Önemli?

Erişilebilirlik yalnızca bir 'iyi niyet' konusu değildir. Nüfusun önemli bir bölümü kalıcı ya da geçici bir engelle yaşar ve erişilemez bir site bu kullanıcıları dışarıda bırakır. Bunun yanında erişilebilir tasarım, SEO, kullanılabilirlik ve genel kullanıcı deneyimini de iyileştirir.

Avrupa'da kamu sektörü ve giderek daha fazla özel kuruluş için erişilebilirlik yasal bir gerekliliktir. Avrupa standardı EN 301 549, bilgi ve iletişim teknolojileri ürünlerinin erişilebilirlik gereksinimlerini tanımlar ve web içeriği için doğrudan WCAG'yi referans alır. Yani WCAG'ye uymak, EN 301 549 uyumunun temelini oluşturur.

Dört Temel İlke: POUR

WCAG'nin tamamı dört temel ilke etrafında örgütlenir. Bu ilkeler İngilizce baş harfleriyle POUR olarak anılır:

• Perceivable (Algılanabilir): İçerik ve arayüz, kullanıcıların algılayabileceği biçimde sunulmalıdır. Görme engelli bir kullanıcı bir görseli 'göremiyorsa', o görselin bir metin alternatifi olmalıdır.
• Operable (Çalıştırılabilir): Arayüz bileşenleri ve gezinme kullanılabilir olmalıdır. Fare kullanamayan biri, tüm işlevlere klavye ile ulaşabilmelidir.
• Understandable (Anlaşılabilir): İçerik ve arayüzün işleyişi anlaşılır olmalıdır. Metinler okunabilir, davranışlar öngörülebilir olmalıdır.
• Robust (Sağlam): İçerik, yardımcı teknolojiler dâhil çok çeşitli araçlarla güvenilir biçimde yorumlanabilecek kadar sağlam olmalıdır.

Her başarı kriteri bu dört ilkeden birine bağlıdır. Bu yapı, erişilebilirliği dağınık bir kurallar yığını olmaktan çıkarıp anlamlı bir çerçeveye oturtur.

Uyum Seviyeleri: A, AA ve AAA

WCAG başarı kriterleri üç uyum seviyesine ayrılır:

Pratikte hedeflenmesi gereken seviye genellikle AA'dır. A seviyesi tek başına yetersiz kalırken, AAA'nın tüm site genelinde sağlanması çoğu zaman mümkün ya da gerekli değildir. EN 301 549 gibi düzenlemeler de temel olarak AA seviyesini esas alır.

İlkelere Göre Başarı Kriteri Kontrol Listesi

Aşağıda POUR ilkelerine göre gruplanmış, en sık karşılaşılan başarı kriterlerini pratik kontroller hâlinde bulabilirsiniz.

Algılanabilir (Perceivable)

• Metin alternatifleri: Tüm anlamlı görseller için alt metni sağlayın; dekoratif görselleri boş alt ile işaretleyin.
• Renk kontrastı: Normal metin için en az 4.5:1, büyük metin için en az 3:1 kontrast oranı sağlayın (AA).
• Sadece renge dayanmayın: Bilgiyi yalnızca renkle aktarmayın; ikon, etiket veya desenle destekleyin.
• Zaman temelli medya: Videolar için altyazı, ses içerikleri için metin dökümü sunun.
• Yeniden akış (reflow): İçerik 400% yakınlaştırmada yatay kaydırma gerektirmeden okunabilmelidir.

Çalıştırılabilir (Operable)

• Klavye erişimi: Tüm işlevler yalnızca klavyeyle kullanılabilmelidir; klavye tuzağı olmamalıdır.
• Görünür odak: Klavye odağı her zaman net biçimde görünür olmalıdır (odak göstergesi).
• Dokunma hedefi boyutu: Etkileşimli hedefler yeterince büyük olmalıdır (WCAG 2.2, AA için asgari 24x24 CSS pikseli önerir).
• Zaman sınırları: Süre kısıtlı işlemlerde kullanıcıya uzatma veya kapatma imkânı verin.
• Atlama bağlantısı: Tekrarlayan içeriği geçmek için 'içeriğe atla' bağlantısı sunun.

Anlaşılabilir (Understandable)

• Sayfa dili: html etiketinde sayfanın dilini (lang) belirtin.
• Form etiketleri: Her form alanının açık ve programatik bir etiketi olmalıdır.
• Hata bildirimi: Hataları açıkça tanımlayın ve düzeltme için öneri sunun.
• Tutarlı gezinme: Menü ve gezinme öğeleri sayfalar arasında tutarlı kalmalıdır.
• Öngörülebilir davranış: Odaklanma veya girdi, beklenmedik bağlam değişikliği tetiklememelidir.

Sağlam (Robust)

• Geçerli işaretleme: HTML'in doğru iç içe geçmiş ve kapatılmış olması, yardımcı teknolojilerin doğru yorumlaması için önemlidir.
• İsim, rol, değer: Özel arayüz bileşenlerinin adı, rolü ve durumu ekran okuyuculara ARIA ile doğru aktarılmalıdır.
• Durum mesajları: Dinamik durum mesajları, odak değişmeden ekran okuyuculara iletilmelidir.
• Başlık yapısı: Başlıkları (h1-h6) mantıksal ve hiyerarşik bir sırayla kullanın.

Uygulama İçin Adım Adım Yol Haritası

1. Mevcut durumu tarayın. Otomatik bir erişilebilirlik taramasıyla kontrast, alt metni ve etiket eksikliklerini tespit edin.
2. Klavye ile gezinin. Fareyi bırakın; sitenizi baştan sona yalnızca klavyeyle kullanmayı deneyin.
3. Başlık ve yapıyı düzeltin. Anlamlı bir başlık hiyerarşisi ve doğru işaretleme kurun.
4. Kontrast ve hedef boyutlarını iyileştirin. Renk oranlarını ve tıklanabilir alanları AA eşiğine getirin.
5. Formları ve hataları güçlendirin. Etiketler, hata mesajları ve odak yönetimini gözden geçirin.
6. Ekran okuyucuyla test edin. Kritik akışları bir ekran okuyucu ile deneyimleyin.
7. Sürekli izleyin. Erişilebilirliği tek seferlik değil, düzenli bir denetim döngüsü hâline getirin.

Örnek Senaryo

Bir eğitim platformu olan 'AkademiNet', kurs kayıt formunda görsel olarak güzel ama erişilemez bir tasarım kullanıyordu. Zorunlu alanlar yalnızca kırmızı renkle işaretleniyor, form etiketleri yer tutucu (placeholder) metnine gömülü hâlde geliyordu. Klavye ile gezinen bir kullanıcı ise odak göstergesini göremiyordu.

Bir kullanıcı geri bildiriminin ardından ekip bir erişilebilirlik denetimi yaptı. Sorunlar POUR çerçevesine oturtuldu: zorunluluğun sadece renkle bildirilmesi bir 'algılanabilir' ihlaliydi; görünmeyen odak 'çalıştırılabilir' ilkesini; placeholder'a gömülü etiketler ise 'anlaşılabilir' ilkesini zedeliyordu.

AkademiNet, zorunlu alanlara metin etiketi ekledi, her alana kalıcı ve programatik label bağladı, görünür bir odak göstergesi tanımladı ve dokunma hedeflerini büyüttü. Denetim sonrası form AA seviyesine ulaştı ve klavye ile ekran okuyucu kullanıcıları için sorunsuz kullanılabilir hâle geldi.

Sık Sorulan Sorular

Hangi uyum seviyesini hedeflemeliyim?

Çoğu kurum ve düzenleme için pratik hedef AA seviyesidir. A tek başına yetersiz, AAA ise tüm site genelinde çoğu zaman ulaşılamazdır. Bu nedenle AA, güvenli ve makul bir hedeftir.

WCAG 2.2, 2.1'den çok mu farklı?

WCAG 2.2, 2.1'in üzerine yeni başarı kriterleri ekler; özellikle odak görünürlüğü, dokunma hedefi boyutu ve gezinmeyle ilgili iyileştirmeler öne çıkar. 2.1'e uyumlu bir site, ek kriterleri karşılayarak 2.2'ye görece kolay taşınabilir.

EN 301 549 ile WCAG arasındaki ilişki nedir?

EN 301 549 bir Avrupa standardıdır ve web içeriği erişilebilirliği için doğrudan WCAG'yi referans alır. Dolayısıyla WCAG AA uyumu sağlamak, EN 301 549 web gereksinimlerinin karşılanmasında temel adımdır.

Otomatik tarama tek başına yeterli mi?

Hayır. Otomatik araçlar kontrast, eksik alt ve etiket gibi birçok sorunu hızla yakalar, ancak klavye kullanılabilirliği, odak sırası ve ekran okuyucu deneyimi gibi konular manuel test gerektirir. En iyi sonuç, otomatik ve manuel testin birlikte kullanılmasıyla elde edilir.

Bu içerik yalnızca genel bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz.

JUS. ile web sitenizi ücretsiz tarayarak erişilebilirlik sorunlarınızı POUR ilkelerine göre görebilir ve WCAG 2.2 AA hedefine giden yol haritanızı çıkarabilirsiniz.