Web erişilebilirliği, görme, işitme, hareket veya bilişsel farklılıkları olan kişiler dahil herkesin bir web sitesini kullanabilmesidir. Ekran okuyucu kullanan bir ziyaretçi, klavyeyle gezinen biri veya güneş altında telefonuna bakan herkes erişilebilir tasarımdan fayda sağlar.
WCAG nedir?
WCAG (Web Content Accessibility Guidelines), W3C tarafından yayımlanan uluslararası erişilebilirlik yönergeleridir. Güncel sürüm olan WCAG 2.2, kriterleri A, AA ve AAA olmak üzere üç seviyede tanımlar. Kurumsal siteler için genellikle AA seviyesi hedeflenir.
Dört temel ilke (POUR)
- Algılanabilir: İçerik farklı duyularla algılanabilmelidir. Görsellerin metin alternatifi, videoların altyazısı olmalıdır.
- Kullanılabilir: Tüm işlevler klavyeyle kullanılabilmeli, kullanıcıya yeterli süre tanınmalıdır.
- Anlaşılabilir: Metinler açık, formlar öngörülebilir, hata mesajları yol gösterici olmalıdır.
- Sağlam: İçerik, ekran okuyucular dahil farklı yardımcı teknolojilerle uyumlu çalışmalıdır.
Hemen uygulanabilecek 10 kural
1. Görsellere anlamlı alternatif metin yazın
alt metni görselin içeriğini veya işlevini anlatmalıdır. Süsleme amaçlı görsellerde boş bırakılabilir (alt="").
2. Yeterli renk kontrastı sağlayın
AA seviyesinde normal metin için en az 4.5:1, büyük metin için 3:1 kontrast oranı önerilir.
3. Başlık hiyerarşisini doğru kurun
Her sayfada bir h1, altında mantıklı sırayla h2 ve h3 kullanın. Ekran okuyucu kullanıcıları sayfada başlıklar üzerinden gezinir.
4. Klavye ile gezinmeyi test edin
Tab tuşuyla tüm bağlantı, buton ve form alanlarına ulaşılabilmeli, odaklanılan öğe görünür olmalıdır.
5. Form alanlarını etiketleyin
Her girişin görünür bir label etiketi olmalıdır. Yalnızca placeholder kullanmak yeterli değildir.
6. Bağlantı metinlerini anlamlı yapın
"Buraya tıklayın" yerine bağlantının nereye gittiğini anlatan metinler kullanın.
7. Anlamı yalnızca renge bağlamayın
Hata durumunu sadece kırmızı renkle değil, ikon ve metinle de belirtin.
8. Dili belirtin
<html lang="tr"> ekran okuyucunun doğru telaffuz kullanmasını sağlar.
9. Hareketleri kontrol altında tutun
Otomatik oynayan animasyonlar ve kayan içerikler durdurulabilmeli; hareket azaltma tercihine (prefers-reduced-motion) saygı gösterilmelidir.
10. Semantik HTML kullanın
button, nav, main, header gibi etiketler yardımcı teknolojilere yapı hakkında bilgi verir. Her şeyi div ile yapmaktan kaçının.
Erişilebilirlik ve SEO ilişkisi
Erişilebilirlik ve SEO aynı temellere dayanır: anlamlı başlıklar, açıklayıcı bağlantı metinleri, alternatif metinler ve temiz HTML. Arama motorları da içeriği bir ekran okuyucu gibi yapısal olarak okur. Bu nedenle erişilebilir bir site genellikle arama motorları için de daha anlaşılırdır.
Nasıl test edilir?
- Tarayıcı geliştirici araçlarındaki Lighthouse erişilebilirlik denetimi
- Tarayıcı eklentisi olarak çalışan otomatik denetim araçları
- Klavyeyle manuel gezinme testi
- Ekran okuyucu ile kısa bir kullanım testi (NVDA, VoiceOver, TalkBack)
Otomatik araçlar sorunların yalnızca bir kısmını yakalar; manuel test vazgeçilmezdir.
Sık sorulan sorular
Erişilebilirlik yasal bir zorunluluk mu?
Bazı ülkelerde ve kamu kurumları için yasal düzenlemeler bulunur; Avrupa'da belirli ürün ve hizmetler için erişilebilirlik gereksinimleri genişlemektedir. Kendi durumunuz için güncel mevzuatı bir uzmanla değerlendirmeniz önerilir.
Mevcut siteyi erişilebilir yapmak zor mu?
Çoğu iyileştirme (kontrast, alt metin, etiketler, başlıklar) küçük değişikliklerle yapılabilir. Yapısal sorunlar ise daha kapsamlı çalışma gerektirebilir.
Sonuç
Erişilebilir bir web sitesi daha fazla kişiye ulaşır, daha iyi bir deneyim sunar ve arama motorları için de daha anlaşılır olur. Küçük adımlarla başlayıp düzenli test ederek sitenizi herkes için kullanılabilir hale getirebilirsiniz. Sitenizin erişilebilirlik denetimi için iletişime geçebilirsiniz.