Web sitesi erişilebilirliği: WCAG 2.2 ile temel kontroller

Web erişilebilirliği, sitenizin görme, işitme, hareket ya da bilişsel engeli olan kişiler dâhil herkes tarafından kullanılabilmesi demektir. Ekran okuyucuyla gezinen bir kullanıcı, fareyi kullanamayıp yalnızca klavyeyle ilerleyen biri, küçük yazıları okumakta zorlanan yaşlı bir müşteri ya da güneş altında telefonuna bakan herhangi biri, erişilebilir tasarımdan doğrudan fayda görür.

Bu yazıda erişilebilirlik için uluslararası referans kabul edilen WCAG 2.2 yönergelerini kısaca tanıtıyor, yeni bir site yaptırırken ya da mevcut sitenizi gözden geçirirken kontrol edebileceğiniz temel konuları ve basit test yöntemlerini anlatıyoruz.

WCAG nedir?

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), World Wide Web Consortium (W3C) tarafından yayımlanır. Güncel sürüm olan WCAG 2.2, Ekim 2023’te W3C önerisi olarak yayımlandı. Yönergeler dört ilke etrafında düzenlenir:

• Algılanabilir: Bilgi, kullanıcının algılayabileceği biçimde sunulmalı; örneğin görsellerin metin karşılığı olmalı.
• İşletilebilir: Arayüz bileşenleri ve gezinme herkes tarafından kullanılabilmeli; örneğin her işlev klavyeyle yapılabilmeli.
• Anlaşılabilir: İçerik ve arayüzün işleyişi anlaşılır olmalı.
• Sağlam: İçerik, yardımcı teknolojiler dâhil farklı tarayıcı ve araçlarla güvenilir biçimde çalışmalı.

Her başarı ölçütü A, AA ya da AAA düzeyindedir. Yasal düzenlemelerin ve kurumsal hedeflerin büyük kısmı AA düzeyini esas alır; bu yazıdaki kontroller de bu düzeye odaklanır.

İhracat yapan işletmeler için: AB Erişilebilirlik Yasası

Avrupa Birliği’nin 2019/882 sayılı Direktifi, yani Avrupa Erişilebilirlik Yasası, 28 Haziran 2025’ten itibaren uygulanıyor. Yasa, AB’deki tüketicilere sunulan e-ticaret hizmetleri dâhil belirli ürün ve hizmetler için erişilebilirlik şartları getiriyor. Hizmet sağlayan mikro işletmeler bu yükümlülüklerden muaf tutuluyor. AB pazarındaki tüketicilere doğrudan online satış yapan bir Türk işletmesiyseniz, yasanın sizin için geçerli olup olmadığını değerlendirmeniz gerekir.

1. Görseller için metin alternatifi

Ekran okuyucular görselleri, onlara eklenen alternatif metin (alt metni) üzerinden kullanıcıya aktarır. Bilgi taşıyan her görselin, o bilgiyi kısaca anlatan bir alternatif metni olmalıdır. Yalnızca süs amaçlı görsellerde ise alternatif metin boş bırakılarak ekran okuyucunun bu görseli atlaması sağlanır. W3C’nin alternatif metin karar ağacı, bir görselin hangi gruba girdiğine karar vermek için pratik bir araçtır.

Yalnızca simgeden oluşan düğmeler de unutulmamalıdır. Bir büyüteç simgesi görsel olarak “ara” anlamına gelse de ekran okuyucu kullanıcısı için bu düğmenin erişilebilir bir adı olmalıdır.

2. Renk ve kontrast

• Metin kontrastı: WCAG’nin 1.4.3 ölçütüne göre normal metin ile arka planı arasında en az 4,5:1, büyük metinde en az 3:1 kontrast oranı olmalıdır.
• Arayüz bileşenleri: Form alanlarının kenarlıkları, düğmeler ve odak göstergeleri gibi öğeler de çevreleriyle en az 3:1 kontrast oluşturmalıdır.
• Yalnızca renge dayanmayın: Bir form hatasını yalnızca kırmızı çerçeveyle, bir bağlantıyı yalnızca renk farkıyla göstermek, renk ayırt etmekte zorlanan kullanıcılar için yeterli değildir. Renge ek olarak metin, simge ya da alt çizgi kullanın.

Kurumsal renk paletiniz açık tonlardan oluşuyorsa, bu renkleri metin rengi olarak değil vurgu ve arka plan rengi olarak kullanmak çoğu zaman kontrast sorununu çözer.

3. Klavye ile kullanım

Sitedeki her işlev, fare olmadan yalnızca klavyeyle de kullanılabilmelidir. Tab tuşuyla ilerlerken hangi öğenin seçili olduğu görünür olmalı; tarayıcının varsayılan odak çerçevesini tasarım gerekçesiyle kaldırmak sık yapılan bir hatadır. Kontrol edilmesi gerekenler:

• Menüler, açılır pencereler, sekmeler ve kaydırmalı alanlar klavyeyle açılıp kapanabiliyor mu?
• Bir açılır pencereye girildiğinde Escape ile çıkılabiliyor mu, yoksa kullanıcı içinde sıkışıp kalıyor mu?
• Odak sırası sayfanın görsel sırasıyla uyumlu mu?
• WCAG 2.2 ile eklenen ölçüte göre, odaklanan öğe sabit bir başlık, çerez bandı ya da sohbet balonu tarafından tamamen kapatılıyor mu?
• Sayfanın başında, menüyü atlayıp doğrudan ana içeriğe geçmeyi sağlayan bir bağlantı var mı?

4. Formlar

İletişim, teklif ve ödeme formları genellikle sitenin dönüşüm getiren bölümleridir; erişilebilirlik sorunları burada doğrudan müşteri kaybına dönüşür.

• Her alanın görünür ve alana programatik olarak bağlı bir etiketi olsun. Yalnızca alanın içindeki yer tutucu metin, yazmaya başlandığında kaybolduğu için yeterli değildir.
• Hata mesajları hangi alanda neyin yanlış olduğunu metinle açıklasın ve mümkünse nasıl düzeltileceğini söylesin.
• WCAG 2.2’ye göre, aynı işlem içinde kullanıcının daha önce girdiği bilgiyi tekrar yazması istenmemeli; bilgi otomatik doldurulmalı ya da seçilebilir olmalıdır.
• Giriş ekranlarında şifre yöneticilerinin çalışmasına ve şifrenin yapıştırılmasına izin verin. WCAG 2.2, kimlik doğrulamanın yalnızca hatırlama ya da bulmaca çözme gibi bilişsel bir teste dayanmamasını ister.

5. Dokunma hedefleri ve sürükleme

WCAG 2.2’de eklenen 2.5.8 ölçütüne göre tıklanabilir hedefler, bazı istisnalar dışında en az 24 x 24 CSS pikseli boyutunda olmalı ya da çevrelerinde yeterli boşluk bulunmalıdır. Mobilde birbirine çok yakın yerleştirilmiş küçük bağlantılar, yanlış öğeye dokunulmasına yol açar. Aynı sürümle gelen bir başka ölçüt de sürükleme gerektiren işlevlere, örneğin fiyat aralığı kaydırıcısına, tek bir dokunuşla ya da tıklamayla kullanılabilen bir alternatif sunulmasını ister.

6. Yapı, dil ve bağlantılar

• Başlıkları görsel boyutlarına göre değil, içerik hiyerarşisine göre kullanın. Ekran okuyucu kullanıcıları sayfada çoğunlukla başlıklar arasında gezinir.
• Sayfanın dilini HTML’de doğru belirtin. Türkçe bir sayfada dil bilgisi eksikse ekran okuyucu metni yanlış telaffuzla okuyabilir.
• Her sayfanın içeriğini anlatan benzersiz bir başlığı olsun.
• Bağlantı metinleri, bağlam olmadan okunduğunda da anlamlı olsun. “Buraya tıklayın” yerine “Fiyat listesini indirin” gibi ifadeler kullanın.
• Metin, tarayıcıda yüzde iki yüze kadar büyütüldüğünde içerik ve işlevler kaybolmamalıdır.

7. Video ve ses

Konuşma içeren tanıtım videolarına altyazı ekleyin. Otomatik oynayan ve birkaç saniyeden uzun süren ses ya da hareketli içerikler için durdurma imkânı sunun. Arka planda otomatik oynayan videolar hem dikkat dağıtabilir hem de bazı kullanıcılar için rahatsız edici olabilir.

Nasıl test edilir?

1. Klavye testi: Fareyi bir kenara bırakıp ana sayfadan iletişim formunu göndermeye kadar her adımı yalnızca Tab, Enter, boşluk ve ok tuşlarıyla deneyin.
2. Yakınlaştırma testi: Tarayıcıda sayfayı yüzde iki yüze kadar büyütün ve içeriğin okunabilir kaldığını kontrol edin.
3. Ekran okuyucu testi: macOS ve iOS’ta VoiceOver, Android’de TalkBack, Windows’ta NVDA ile birkaç temel sayfayı dinleyin.
4. Otomatik araçlar: Lighthouse ya da axe gibi araçlar kontrast ve eksik etiket gibi sorunları hızlıca bulur. Ancak bu araçlar sorunların yalnızca bir kısmını yakalayabilir; elle yapılan testlerin yerini tutmaz.
5. W3C hızlı kontrolleri: W3C’nin Easy Checks sayfası, uzman olmayan biri için başlangıç adımlarını sırayla anlatır.

Sık yapılan hatalar

• Odak çerçevesini tasarım gerekçesiyle tamamen kaldırmak.
• Açık gri metni beyaz zemin üzerinde kullanmak.
• Form alanlarında etiket yerine yalnızca yer tutucu metin kullanmak.
• Erişilebilirliği tek bir eklentiyle çözmeye çalışmak; sorunların çoğu sitenin kendi kodunda ve içeriğinde düzeltilmelidir.
• Erişilebilirliği yayından sonraya bırakmak; tasarım aşamasında ele almak çok daha az maliyetlidir.

Guru Dijital, web tasarım projelerinde erişilebilirliği renk paleti ve bileşen tasarımından itibaren ele alıyor. Mevcut sitenizin temel erişilebilirlik kontrollerinden geçmesini isterseniz ekibimiz bir ön inceleme yapıp öncelikli düzeltmeleri listeleyebilir.

Kaynaklar

• WCAG 2 Overview (W3C WAI)
• Web Content Accessibility Guidelines (WCAG) 2.2 (W3C)
• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C WAI)
• Understanding Success Criterion 2.4.7: Focus Visible (W3C WAI)
• Understanding Success Criterion 2.5.8: Target Size (Minimum) (W3C WAI)
• An alt Decision Tree (W3C WAI)
• Easy Checks: A First Review of Web Accessibility (W3C WAI)
• European Accessibility Act (Avrupa Komisyonu)
• Directive (EU) 2019/882 (EUR-Lex)