Web Sitesi Erişilebilirliği: Pratik Bir WCAG 2.2 Rehberi
WCAG 2.2'nin kendi siteniz için nasıl okunacağı, gerçek hataların çoğunu kapsayan düzeltmeler, herkesin çalıştırabileceği 30 dakikalık elle test ve erişilebilirlik ile kullanılabilirliğin nasıl örtüştüğü.
Sıkça sorulan sorular
Bir web sitesinin WCAG uyumlu olması ne demektir?
Sitenin Web İçeriği Erişilebilirlik Yönergeleri'nin başarı ölçütlerini seçilen bir düzeyde, genellikle WCAG 2.1 veya 2.2 AA düzeyinde karşıladığı anlamına gelir. AA düzeyi her A ve AA ölçütünü içerir. WCAG'a atıf yapan çoğu yasa ve satın alma politikası AA düzeyini ister.
WCAG yönergelerini sitem için nasıl yorumlamalıyım?
W3C'nin 'How to Meet WCAG' hızlı başvurusuyla başlayın, A ve AA düzeyine filtreleyin ve her ölçüt için amacı sade bir dille açıklayan 'Understanding' sayfasını okuyun. Sonra her sayfayı tek tek değil, ana şablonlarınızı (ana sayfa, bir içerik sayfası, bir form, ödeme) test edin.
Bir erişilebilirlik overlay'i veya eklentisi sitemi uyumlu yapabilir mi?
Hiçbir araç bir siteyi tek başına uyumlu yapamaz. Araç çubuğu ekleyen overlay'ler altta yatan kodu düzeltmez ve birçok engelli kullanıcı ile erişilebilirlik uzmanı bunların yolu tıkadığını bildiriyor. HTML'yi, kontrastı, etiketleri ve klavye desteğini doğrudan düzeltin.
Kullanılabilirlik ile erişilebilirlik arasındaki fark nedir?
Erişilebilirlik, engelli insanların siteyi algılayabilmesi, anlayabilmesi, içinde gezinebilmesi ve etkileşime girebilmesi demektir. Kullanılabilirlik, sitenin herkes için kolay ve verimli olması demektir. Büyük ölçüde örtüşürler: net etiketler, iyi kontrast ve öngörülebilir gezinme yalnızca engelli olanlara değil tüm ziyaretçilere yardım eder.
Otomatik denetleyiciler tüm erişilebilirlik sorunlarını bulur mu?
Hayır. WAVE, axe ve Lighthouse gibi araçlar eksik alt metin, düşük kontrast ve eksik etiketler gibi sorunları yakalar; ama alt metnin anlamlı olup olmadığı veya odak sırasının mantıklı olup olmadığı gibi birçok ölçütü bir insanın kontrol etmesi gerekir.
WCAG uyumlu bir web sitesi, Web İçeriği Erişilebilirlik Yönergeleri'ni (WCAG) seçilen bir düzeyde karşılar ve neredeyse her işletme için bu, WCAG 2.2 AA düzeyi demektir. Uygulamada çoğu site aynı birkaç sorunda başarısız olur: düşük renk kontrastı, eksik görsel alt metni, etiketsiz form alanları, boş bağlantılar ve düğmeler ve klavyeyle erişilemeyen şeyler. Bunları düzeltin, bir klavye ve bir ekran okuyucuyla test edin; gerçek kullanıcıların karşılaştıklarının büyük bir kısmını kapsamış olursunuz.
Bu rehber, WCAG'ı kaybolmadan nasıl okuyacağınızı, en önemli düzeltmeleri ve kendi başınıza yapabileceğiniz 30 dakikalık bir testi anlatıyor.
WCAG nasıl yapılandırılmıştır
WCAG, W3C tarafından yayımlanır. Katmanlar hâlinde düzenlenmiştir:
POUR olarak bilinen dört ilke: içerik Perceivable (algılanabilir), Operable (işletilebilir), Understandable (anlaşılabilir) ve Robust (sağlam) olmalıdır.
Her ilkenin altında yönergeler (örneğin "Metin Alternatifleri" veya "Klavyeyle Erişilebilir").
Her yönergenin altında başarı ölçütleri. Bunlar test edilebilir kurallardır; her biri numaralandırılmıştır (1.4.3 Kontrast gibi) ve bir düzey verilmiştir: A, AA veya AAA.
A düzeyi asgaridir. AA düzeyi, yasal ve satın alma gereksinimleri için yaygın hedeftir. AAA düzeyi daha katıdır ve tüm siteler için genellikle istenmez.
WCAG 2.2, Ekim 2023'te bir W3C Tavsiyesi oldu. Asgari hedef boyutu, odağın örtülmemesi ve erişilebilir kimlik doğrulama gibi ölçütler ekledi ve 4.1.1 Ayrıştırma'yı eskimiş olduğu için kaldırdı.
WCAG kendi siteniz için nasıl yorumlanır
Şartname bir standart gibi okunur, çünkü bir standarttır. Ondan geçmenin pratik bir yolu:
W3C'nin "How to Meet WCAG (Quick Reference)" sayfasını açın.
Yalnızca A ve AA düzeyine filtreleyin.
Her ölçüt için bağlantılı "Understanding" sayfasını okuyun. Amacı, geçen ve kalan örneklerle sade bir dille açıklar.
Her sayfayı test etmek yerine şablonlarınızı test edin: ana sayfa, standart bir içerik sayfası, bir blog yazısı, bir form, bir ürün veya ödeme sayfası. Bir şablonu düzeltmek, onun üzerine kurulu her sayfayı düzeltir.
Her sorunu ölçüt numarası, sayfa ve düzeltmenin neye benzediğiyle kaydedin.
Gerçek hataların çoğunu kapsayan düzeltmeler
1. Renk kontrastı (1.4.3 ve 1.4.11)
Normal metin: arka planına karşı en az 4.5:1.
Büyük metin (yaklaşık 24px normal veya 18.66px kalın ve daha büyük): en az 3:1.
Arayüz bileşenleri ve anlamlı grafikler (düğme kenarlıkları, girdi çerçeveleri, bilgi ileten simgeler): en az 3:1.
Açık gri yer tutucu metin ve soluk marka renkleri üzerindeki beyaz metin olağan suçlulardır. WebAIM'in kontrast denetleyicisi veya tarayıcınızın geliştirici araçlarıyla kontrol edin.
2. Görseller için metin alternatifleri (1.1.1)
Bilgilendirici görsellere önemli olanı anlatan alt metin verilir: alt="Technician replacing a furnace filter".
Dekoratif görsellere boş alt verilir: alt=""; böylece ekran okuyucular onları atlar.
Metin görselleri (bir broşür ekran görüntüsü, JPG olarak bir menü) aynı metnin gerçek metin olarak da bulunmasını gerektirir.
Ana sayfaya giden bir logo gibi bağlantılı görseller hedefi tarif eder: alt="Acme Plumbing home".
3. Form etiketleri ve hatalar (1.3.1, 3.3.1, 3.3.2)
Her girdinin kendisine bağlı görünür bir <label> etiketi olmalıdır. Yer tutucu metin bir etiket değildir: yazdığınızda kaybolur.
Hata mesajları neyin yanlış gittiğini ve nasıl düzeltileceğini ("Alan kodlu bir telefon numarası girin") yalnızca kırmızı bir kenarlıkla değil, metinle söyler.
Zorunlu alanlar yalnızca renkle değil, metinle veya erişilebilir bir göstergeyle işaretlenir.
4. Klavye erişimi (2.1.1, 2.4.3, 2.4.7)
Her bağlantı, düğme, menü ve form kontrolü Tab, Shift+Tab, Enter ve Space ile çalışmalıdır.
Odak sırası görsel sırayı izler.
Görünür bir odak göstergesi nerede olduğunuzu gösterir. Tarayıcı çerçevesini outline: none ile ve yerine bir şey koymadan kaldırmak yaygın bir hatadır.
Açılır menüler ve modallar klavyeden açılmalı, çalışmalı ve kapanmalıdır; modallar kapanana kadar odağı içeride tutmalıdır.
5. Adı olan bağlantılar ve düğmeler (2.4.4, 4.1.2)
Yalnızca simgeli düğmeler (bir hamburger menü, bir arama büyüteci, sosyal medya simgeleri) görünür metin, aria-label veya gizli metin aracılığıyla erişilebilir bir ada ihtiyaç duyar.
"Buraya tıklayın" ve "Devamını oku" bağlantılarıyla dolu bir sayfadan kaçının. Bağlantı metnini hedefi anlatacak şekilde yazın ya da her birine ayrı bir erişilebilir ad verin.
6. Yapı ve başlıklar (1.3.1, 2.4.6)
Sayfayı anlatan sayfa başına bir <h1>.
Yazı boyutuna göre değil, mantıksal sırayla başlıklar (bölümler için h2, içlerinde h3).
Gerçek listeler, başlık hücreli tablolar ve landmark'lar (<header>, <nav>, <main>, <footer>) kullanın.
Sayfa dilini ayarlayın: <html lang="en">.
7. WCAG 2.2'de yeni, bilinmeye değer
2.5.8 Target Size (Minimum), AA: tıklanabilir hedefler en az 24 x 24 CSS pikseli olmalı ya da daha küçük olanların çevresinde yeterli boşluk bulunmalıdır.
2.4.11 Focus Not Obscured (Minimum), AA: yapışkan üst bilgiler, çerezler banner'ları ve sohbet widget'ları odaklanan öğeyi tamamen gizlememelidir.
3.3.8 Accessible Authentication (Minimum), AA: alternatifi olmadan giriş yapmak için bulmaca çözmeyi veya bilgi hatırlamayı zorunlu kılmayın; parola yöneticilerine ve yapıştırmaya izin verin.
3.3.7 Redundant Entry, A: insanlara aynı süreçte zaten verdikleri bilgiyi yeniden yazdırmayın.
8. Medya ve hareket
Videolar altyazı gerektirir (1.2.2); önceden kaydedilmiş video, önemli görsel içerik için sesli betimleme veya metin alternatifi gerektirir.
Beş saniyeden uzun süre kendiliğinden hareket eden her şey için onu duraklatmanın bir yolu olmalıdır (2.2.2).
Büyük animasyonlar için prefers-reduced-motion ayarına saygı gösterin.
30 dakikalık elle test
Otomatik araçlar resmin yalnızca bir kısmını yakalar. Her ana şablon için bu rutini ekleyin.
0 ile 5. dakikalar: otomatik tarama. WAVE'i (tarayıcı uzantısı), axe DevTools'u ya da Lighthouse'un erişilebilirlik bölümünü çalıştırın. Eksik alt, eksik etiketler ve kontrast hataları gibi açık hataları düzeltin.
5 ile 15. dakikalar: yalnızca klavye. Fareyi bırakın. Sayfada en baştan Tab ile ilerleyin.
Odağın nerede olduğunu her zaman görebiliyor musunuz?
Menüyü açıp kapatabiliyor, her form alanını kullanabiliyor ve gönderebiliyor musunuz?
Bir "İçeriğe geç" bağlantısı var mı ve çalışıyor mu?
Odak hiç yapışkan bir üst bilginin veya banner'ın arkasında kayboluyor mu?
15 ile 25. dakikalar: ekran okuyucu. VoiceOver'ı (macOS ve iOS'ta yerleşik) ya da NVDA'yı (Windows'ta ücretsiz) kullanın.
Başlık listesini dinleyin. Sayfayı anlatıyor mu?
Görsellere ve düğmelere Tab ile gidin. Bağlamdan bağımsız anlamlılar mı?
Formu doldurun. Her alan etiketiyle birlikte duyuruluyor mu? Hatalar duyuruluyor mu?
25 ile 30. dakikalar: yakınlaştırma ve yeniden akış. Tarayıcıyı %200 ve sonra %400'e yakınlaştırın. %400'de içerik yatay kaydırma olmadan tek sütuna yeniden akmalı (1.4.10 Reflow) ve hiçbir şey kesilmemelidir.
Kullanılabilirlik ve erişilebilirlik örtüşür
"Web kullanılabilirliği erişilebilirlik" arayanlar, ikisini gruplamakta haklıdır. Neredeyse her erişilebilirlik düzeltmesi bir kullanılabilirlik düzeltmesidir:
Erişilebilirlik düzeltmesi
Kime daha yardım eder
Güçlü kontrast
Güneşte telefondaki herkes
Görünür etiketler
Aceleyle form dolduran herkes
Altyazılar
Sesi kapalı izleyenler
Klavye desteği
İleri düzey kullanıcılar, izleme dörtgeni bozuk olanlar
Daha büyük dokunma hedefleri
Mobildeki herkes
Net hata mesajları
Yazım hatası yapan herkes
Overlay'ler, beyanlar ve yasa
Overlay'ler: tek satırda uyumluluk vaat eden widget'lar altta yatan kodunuzu değiştirmez. Sitenin kendisini düzeltin.
Erişilebilirlik beyanı: hangi standardı hedeflediğinizi, bilinen sorunları ve yardım veya alternatif biçimler için size nasıl ulaşılacağını söyleyen kısa bir sayfa yayımlayın.
Yasal bağlam: gereksinimler ülkeye göre değişir. Avrupa Erişilebilirlik Yasası, Haziran 2025'ten itibaren AB'deki birçok ürün ve hizmete uygulanır; ABD'de ADA sıklıkla web sitelerine uygulanır; kamu kurumlarının çoğu zaman özel kuralları vardır. Kendi durumunuz için hukuki tavsiye alın.
Kontrol listesi
[ ] Kontrast: metin için 4.5:1, büyük metin ve arayüz parçaları için 3:1
[ ] Bilgilendirici görsellerde alt metin, dekoratif olanlarda boş alt
[ ] Her girdinin görünür, bağlı bir etiketi var
[ ] Sitenin tamamı klavyeyle görünür odakla çalışıyor
[ ] Simge düğmelerinin erişilebilir adları var
[ ] Mantıksal başlıklar ve landmark'lar, sayfa dili ayarlı
Erişilebilirlik aramayı da destekler: başlıklar, alt metin ve açıklayıcı bağlantılar aynı zamanda sayfa içi SEO temelleridir; sayfa içi SEO kontrol listemizde ele alınıyor.
We.Inc siteleri doğrudan düzenleyebileceğiniz standart HTML, CSS ve React kodu olarak üretir; böylece etiketleri, alt metni ve kontrastı kendiniz düzeltebilir ya da değişiklikleri sohbette isteyebilirsiniz. Yayımladığınız her şeyde yukarıdaki elle kontrolleri her zaman çalıştırın.