WCAG Nedir ve Neden Zorunludur?

WCAG (Web Content Accessibility Guidelines), engelli bireyler dahil tüm kullanıcıların web içeriklerine erişimini sağlayan teknik standarttır. Modern web ekosisteminde dijital ajans ekipleri için WCAG uyumluluğu yasal zorunluluk ve SEO/UX metriğidir.

Dört temel prensip (POUR): Algılanabilir (Perceivable), Çalıştırılabilir (Operable), Anlaşılabilir (Understandable), Sağlam (Robust).

Adım Adım WCAG Uygulama Rehberi

1. Semantik HTML Kullanımı

Div çorbasından kaçının. Tarayıcı ve ekran okuyucu native etiketlerle çalışır.

Başlık hiyerarşisi: Sayfada tek <h1>, sıralı <h2> - <h6>.
Navigasyon: <nav>, <main>, <header>, <footer> etiketleri.
Butonlar: Tıklanabilir eylemler için <div onClick> değil, <button>.

2. Renk Kontrastı ve Tipografi

Metin ve arka plan arasında minimum kontrast oranları:

Normal metin (WCAG AA): Minimum 4.5:1.
Büyük metin (18pt veya 14pt bold): Minimum 3:1.
UI bileşenleri ve form sınırları: Minimum 3:1.

3. Klavye Navigasyonu ve Focus State

Fare kullanamayan kullanıcı için tüm etkileşimler klavye ile çalışmalıdır.

outline: none; hatasını yapmayın. Özel :focus-visible stilleri tanımlayın.
Sekme sırası: tabindex değerini 0 veya -1 dışında pozitif sayılarla bozmayın.
Skip Link: Sayfa başına doğrudan ana içeriğe atlayan bağlantı ekleyin.

4. Görseller ve Medya

Anlamlı görseller: Açıklayıcı alt özniteliği zorunlu.
Dekoratif görseller: Ekran okuyucunun atlaması için alt="" veya aria-hidden="true".
Video içerikler: Altyazı ve transkript desteği.

5. Form Erişilebilirliği

Ekran okuyucu form alanlarını etiketleriyle eşleştirmelidir.

Her <input> için ilişkili <label for="id">.
Hata mesajları: aria-describedby ve aria-invalid="true" kullanımı.

Test Trendleri ve Araçlar

Otomatik Test: Lighthouse, Axe Core, WAVE.
Manuel Test: Sadece klavye (Tab, Shift+Tab, Enter, Space, Escape) navigasyon testi.
Ekran Okuyucu Testi: NVDA (Windows), VoiceOver (macOS/iOS).