Web Erişilebilirliği (WCAG) Nedir?
Kısa tanım
Web erişilebilirliği, web sitelerinin engelli bireyler dahil herkes tarafından algılanabilir, anlaşılabilir, gezinilebilir ve kullanılabilir olacak şekilde tasarlanıp geliştirilmesidir; ekran okuyucu, klavye, ekran büyütücü veya sesli komut kullananlar da buna dahildir. Temel uluslararası referans, W3C'nin Web İçeriği Erişilebilirlik Yönergeleri'dir (WCAG). Güncel sürüm WCAG 2.2'dir ve A, AA, AAA olmak üzere üç uygunluk düzeyi tanımlar.
Diğer adları: erişilebilirlik, WCAG, a11y, dijital erişilebilirlik, web accessibility
Kimin için?
Erişilebilirlik çoğu zaman yalnızca görme engelliler için yapılan bir düzenleme sanılır. Oysa kapsam çok daha geniştir: görme, işitme, hareket ve bilişsel engeli olan kişiler; kolu alçıda olduğu için fareyi kullanamayan biri; güneş altında ekranı zor seçen ya da gürültülü bir ortamda videoyu sessiz izlemek zorunda kalan herkes. Yaşla birlikte görme ve ince motor becerilerdeki değişimler de aynı ihtiyaçları doğurur. Altyazı, yeterli kontrast ve klavyeyle kullanılabilen formlar bu yüzden yalnızca belirli bir grubun değil, çok daha geniş bir kitlenin işini kolaylaştırır.
WCAG 2.2'ye kısa bakış
WCAG 2.2, 5 Ekim 2023'te W3C Önerisi (Recommendation) olarak yayımlandı ve 12 Aralık 2024'te güncellendi. W3C'ye göre WCAG 2.2, ISO/IEC 40500:2025 adıyla ISO standardı olarak da onaylanmıştır. Yönergeler dört ilke etrafında düzenlenir:
- Algılanabilir: Bilgi, kullanıcının algılayabileceği bir biçimde sunulur (görsellere metin alternatifi, videolara altyazı, yeterli kontrast).
- Kullanılabilir: Tüm işlevlere klavyeyle erişilir, kullanıcıya yeterli zaman tanınır, gezinme kolaydır.
- Anlaşılabilir: Metin okunaklıdır, sayfalar öngörülebilir davranır, formlar hataları açıklar ve önlemeye yardım eder.
- Sağlam: İçerik, ekran okuyucular dahil farklı yardımcı teknolojilerle güvenilir şekilde çalışır.
| Düzey | Anlamı |
|---|---|
| A | En temel gereksinimler; karşılanmazsa bazı kullanıcılar içeriğe hiç erişemez. |
| AA | Kuruluşların ve politikaların en sık hedef aldığı düzey; A kriterlerini de kapsar. |
| AAA | En yüksek düzey. W3C, bazı içerikler için tüm AAA kriterlerini karşılamak mümkün olmadığından AAA'nın tüm site için genel politika olarak şart koşulmasını önermez. |
2.2 ile gelenler
WCAG 2.2, 2.1'e dokuz yeni başarı kriteri ekler. Bunlardan bazıları: klavye odağındaki öğenin yapışkan başlık gibi öğelerin altında tamamen kaybolmaması (2.4.11, AA), sürükleme gerektiren işlemlere tek dokunuşla yapılabilen bir alternatif sunulması (2.5.7, AA), dokunma hedeflerinin istisnalar dışında en az 24×24 CSS pikseli olması (2.5.8, AA), girişte kullanıcıdan bulmaca çözmek ya da bilgi ezberlemek gibi bilişsel testler istenmemesi (3.3.8, AA), yardım bağlantılarının sayfalar arasında aynı yerde durması (3.2.6, A) ve aynı süreçte daha önce girilen bilginin yeniden sorulmaması (3.3.7, A). Artık işlevini yitirdiği için 4.1.1 Parsing kriteri ise kaldırıldı. Tam liste için W3C'nin WCAG 2.2'deki yenilikler sayfasına, kriterlerin kendisi için WCAG 2.2 belgesine bakabilirsiniz.
Erişilebilir HTML'den örnekler
<!-- Bilgi taşıyan görsel: ne gösterdiğini anlatın -->
<img src="ekip.jpg" alt="Beyaz tahta başında sayfa düzeni çizen beş kişi">
<!-- Süs görseli: boş alt ile ekran okuyucu atlar -->
<img src="ayrac.svg" alt="">
<!-- Etiket, alanla programatik olarak bağlı -->
<label for="eposta">E-posta adresi</label>
<input id="eposta" type="email" autocomplete="email">
<!-- Tıklanabilir div yerine gerçek buton -->
<button type="button" aria-expanded="false">Menü</button>Yerel HTML öğeleri klavye desteğini, odaklanabilirliği ve doğru rol bilgisini kendiliğinden getirir. ARIA özellikleri yalnızca HTML'nin karşılayamadığı durumlarda kullanılmalıdır; yanlış ARIA, hiç ARIA olmamasından daha kötü sonuç verebilir. Mantıklı bir başlık yapısı da ekran okuyucu kullanıcılarının sayfada gezinmesinin temel yollarından biridir.
Sık yapılan hatalar
- Düşük kontrast: AA düzeyinde normal metin için en az 4.5:1, büyük metin için 3:1 oran gerekir.
- Odak göstergesini kaldırmak ya da klavyeyle girilip çıkılamayan menü ve pencereler (klavye tuzağı).
- Etiketsiz form alanları, yalnızca renkle verilen bilgi ("kırmızı alanları doldurun").
- Viewport ayarıyla yakınlaştırmayı engellemek.
- Metin içeren görseller, otomatik başlayan sesli videolar.
- Sorunları kaynak kodda düzeltmek yerine sayfaya eklenen hazır bir eklentinin her şeyi çözeceğini varsaymak.
Bu hataların çoğu bileşen düzeyinde bir kez çözülebilir; erişilebilirliği tasarım sisteminin içine yerleştirmek, her yeni sayfada aynı sorunla yeniden uğraşmayı önler.
Bir siteyi nasıl test edersiniz?
- Otomatik tarama: Lighthouse veya axe gibi araçlar eksik alt metni, düşük kontrastı, etiketsiz alanları hızlıca yakalar. Ancak alt metnin anlamlı olup olmadığı gibi birçok kriteri değerlendiremezler; temiz bir rapor erişilebilir site anlamına gelmez.
- Klavye testi: Fareyi bırakıp sayfayı yalnızca Tab, Shift+Tab, Enter ve boşluk tuşuyla kullanın. Odak her zaman görünüyor mu, sıra mantıklı mı?
- Yakınlaştırma ve yeniden akış: Metni %200 büyütün; içeriğin 320 CSS pikseli genişlikte yatay kaydırma olmadan okunabildiğini kontrol edin. Burada responsive tasarım doğrudan erişilebilirliğe hizmet eder.
- Ekran okuyucu: NVDA, VoiceOver veya TalkBack ile temel akışları (menü, form, ödeme) deneyin.
- Kullanıcılarla test: Yardımcı teknoloji kullanan kişilerle yapılan testler, araçların göremediği sorunları ortaya çıkarır.
Erişilebilirlikle ilgili yasal yükümlülükler ülkeye ve sektöre göre değişir; bu içerik hukuki tavsiye değildir. Kendi durumunuz için geçerli kuralları bir hukuk uzmanıyla birlikte değerlendirmeniz gerekir.