Web Erişilebilirlik Kontrol Listesi: Çalışan Tasarımcılar İçin WCAG 2.2
İşin gerçekleştiği yere göre düzenlenmiş WCAG 2.2 erişilebilirlik kontrol listesi: Figma, tarayıcı, yayın sonrası. Artı tasarımcı hatalarından kriterlere eşleme.
Çoğu web erişilebilirlik kontrol listesi tasarımcılar için işe yaramaz. WCAG başarı kriteri numarasına göre düzenlenirler; bu bir avukatın spesifikasyonu okuma biçimidir ve kimse yazılımı bu şekilde geliştirmez.
Tasarımcılar Figma'yı 1.4.3 kriteri aklında açmaz. Figma'yı açarlar ve bir metin rengi seçerler. Kullanışlı kontrol listesi, tasarımcıyla kararın alındığı yerde buluşur; bu da üç ayrı liste anlamına gelir: biri tasarım dosyası için, biri tarayıcı için, biri lansman sonrası için. Başka bir şekilde düzenlerseniz atlanır.
WCAG 2.2 aslında ne gerektiriyor
WCAG 2.2, 2026 itibarıyla mevcut küresel standarttır ve büyük ölçüde mobil, dokunmatik hedefler, bilişsel yük ve kimlik doğrulamaya odaklanan WCAG 2.1'in üzerine dokuz yeni başarı kriteri ekler.
Tasarımcılar için önem taşıyan dokuz yeni kriter kısa bir listedir. Odak görünümü daha katı hale geldi (2.4.11, 2.4.13). Sürükleme hareketlerinin artık sürükleme dışı bir alternatifi olması gerekiyor (2.5.7). Dokunmatik hedefler, etrafında yeterli boşluk olmadıkça minimum 24x24 CSS piksel boyutunda olmalı (2.5.8). Sayfalar arası tutarlı yardım yerleşimi zorunlu (3.2.6). Formlar aynı bilgiyi gereksiz yere iki kez isteyemez (3.3.7). Kimlik doğrulama, alternatif olmadan bir şifreyi hatırlamak gibi bilişsel bir teste dayanamaZ (3.3.8, 3.3.9).
AA, AB'nin Avrupa Erişilebilirlik Yasası, ABD'de Section 508 ve Birleşik Krallık'ın Kamu Sektörü Kuruluşları Erişilebilirlik Yönetmelikleri dahil olmak üzere küresel olarak çoğu erişilebilirlik yasasının gerektirdiği düzeydir. AAA daha katıdır ve çoğunlukla hükümet, sağlık ve eğitim için ayrılmıştır.
WCAG bölüm numaralarına göre düzenlenmiş bir kontrol listesi bir spesifikasyondur. İşin gerçekleştiği yere göre düzenlenmiş bir kontrol listesi bir araçtır.
İşe yarayan tek kontrol listesi formatı
Erişilebilirliğin kararlaştırıldığı üç yer vardır. Tasarım dosyası. Tarayıcıdaki oluşturulmuş arayüz. Lansman sonrası üretim sitesi.
Erişilebilirlik başarısızlıklarının yaklaşık %70'i Figma'da alınan kararlardır, %20'si uygulamada alınır ve %10'u lansman sonrasında içerik değişiklikleri, üçüncü taraf yerleştirmeleri veya kullanıcı tarafından oluşturulan materyaller aracılığıyla sızar. Bu üç aşamaya eşlenmeyen herhangi bir kontrol listesi, tasarımcıyı spesifikasyon dilinden iş akışı diline çevirmeye zorlar ve çevirinin olduğu yerde öğeler atlanır.
Bu makalenin geri kalanı, sırayla üç listedir. Sırayla çalıştırın. Tasarım aşaması kontrolünü geçemeyen hiçbir şey yapım aşamasına ulaşmamalıdır. Yapım aşamasını geçemeyen hiçbir şey yayınlanmamalıdır.
Tasarım aşaması kontrol listesi (Figma'da ne kontrol edersiniz)
Erişilebilirlik başarısızlıklarının yaklaşık %70'i tasarım dosyasında alınan kararlardır; bu da onları orada düzeltmenin en ucuz olduğu anlamına gelir.
| Kontrol | WCAG 2.2 kriteri | Figma'da nasıl doğrulanır |
|---|---|---|
| Gövde metni arka planına karşı 4,5:1 kontrast sağlar | 1.4.3 Kontrast (Minimum) | Stark, Able veya Figma'nın yerleşik kontrast denetleyicisi |
| Büyük metin (18pt+ veya 14pt+ kalın) 3:1 kontrast sağlar | 1.4.3 | Aynı araçlar |
| Metin dışı UI öğeleri (düğmeler, kenarlıklar, simgeler, odak halkaları) 3:1 kontrast sağlar | 1.4.11 Metin Dışı Kontrast | Tuvaldeki renk çiftlerini manuel olarak örnekleyin |
| Dokunmatik hedefler en az 24x24 CSS px (48x48 önerilir) | 2.5.8 Hedef Boyutu (Minimum) | Çerçeve boyutlarını doğrudan ölçün |
| Bilgi yalnızca renkle aktarılmaz | 1.4.1 Renk Kullanımı | Çerçeveyi gri ölçeğe alın (Figma eklentisi veya ekran görüntüsü filtresi) |
| Her görüntü çerçevesinde katman meta verilerinde alt metin bulunur | 1.1.1 Metin Olmayan İçerik | Figma'nın erişilebilirlik paneli veya geliştirici modu |
| Başlıklar mantıklı bir sıraya göre kullanılır (H1, H2, H3; H1, H3, H2 değil) | 1.3.1 Bilgi ve İlişkiler | Başlık ağacını yukarıdan aşağıya okuyun |
| Her etkileşimli öğe için odak durumu tasarlanmıştır | 2.4.7 Odak Görünür, 2.4.11 Odak Engellenmez | Her etkileşimli bileşenin bir odak varyantı vardır |
| Bağlantı metni bağlam dışında anlam taşır | 2.4.4 Bağlantı Amacı | "Buraya tıklayın" veya "daha fazla öğrenin" etiketleri yok |
| Form etiketleri görünürdür, yalnızca yer tutucu değil | 3.3.2 Etiketler veya Talimatlar | Her alanın girişin dışında kalıcı bir etiketi var |
Tasarım dosyası aynı zamanda yeni WCAG 2.2 mobil kriterlerini yakaladığınız yerdir. 2.5.8'i geçemeyen dokunma hedefleri neredeyse her zaman başarısız olur; çünkü tasarımcı masaüstü piksellerinde düşünmüştür ve hedef dolgu olmadan 16 piksellik bir simgedir.
Kontrast konusunda daha derin bir inceleme için bkz. kontrast kuralları ve APCA. Tasarım aşamasındaki renk çalışması, çoğu sitenin bir kod satırı yazılmadan önceki denetimi kaybettiği yerdir.
Yapım aşaması kontrol listesi (tarayıcıda ne kontrol edersiniz)
Tarayıcı, erişilebilirlik kararlarının kanıtlandığı veya açığa çıktığı yerdir; çünkü gerçek yardımcı teknolojinin çalışmanıza ilk dokunduğu yerdir.
| Kontrol | WCAG 2.2 kriteri | Tarayıcıda nasıl doğrulanır |
|---|---|---|
| Her sayfa yalnızca klavyeyle çalışır (tab, shift-tab, enter, boşluk, ok tuşları) | 2.1.1 Klavye | Fareyi çıkarın ve sayfada gezinin |
| Odak sırası görsel sırayı takip eder (LTR'de soldan sağa, yukarıdan aşağıya) | 2.4.3 Odak Sırası | Tab'layın ve odak halkasını izleyin |
| Odak hiçbir zaman yapışkan başlıklar, çerez banner'ları veya modallar tarafından gizlenmez | 2.4.11 Odak Engellenmez (Minimum) | Görünürlüğü doğrulamak için sekme yaparken kaydırın |
| Sürükleme etkileşimlerinin tıklama veya dokunma alternatifi vardır | 2.5.7 Sürükleme Hareketleri | Kaydırıcıları, sıralanabilir listeleri, karuselleri kontrol edin |
| İlk sekmede içeriğe atla bağlantısı görünür | 2.4.1 Blokları Atla | Sayfa yüklenirken bir kez sekme yapın |
| HTML işaretleri kullanılır (header, nav, main, footer, aside) | 1.3.1, 4.1.2 | DOM ana hatlarını inceleyin |
| Form hataları yalnızca renkle değil, duyurularak bildirilir | 3.3.1, 3.3.3, 4.1.3 | Ekran okuyucuyla bozuk bir form gönderin |
| Ekran okuyucu başlıkları, listeleri ve düğmeleri doğru şekilde duyurur | 4.1.2 Ad, Rol, Değer | Windows'ta NVDA, Mac'te VoiceOver, Android'de TalkBack |
| Kişisel veri alanlarında otomatik tamamlama öznitelikleri ayarlanmıştır | 1.3.5 Giriş Amacını Tanımla | Ad, e-posta, adres alanlarında autocomplete'i inceleyin |
| Medyada altyazı, transkript veya sesli açıklama bulunur | 1.2.1 ila 1.2.5 | Her videoyu oynatın, parçaları kontrol edin |
Otomatik araçlar bunların yaklaşık %30'unu yakalar. Geri kalanı, sekme tuşuna basan ve ekran okuyucu dinleyen bir insan gerektirir. İkisi de önemlidir ve hiçbiri diğerinin yerini almaz.
2026'daki en iyi tarayıcı aşaması araç yığını küçüktür: otomatik tarama için axe DevTools, sayfa düzeyinde denetimler için Lighthouse ve manuel geçiş için gerçek bir ekran okuyucu. Üç araç, sayfa başına on dakika, gerçek bir denetimin işaretleyeceği neredeyse her şeyi yakalar.
Yayın sonrası kontrol listesi (üretimde ne kontrol edersiniz)
Erişilebilirlik lansmanda sona ermez; çünkü içerik, üçüncü taraf yerleştirmeleri ve kullanıcı tarafından oluşturulan materyaller tasarımcının onayından sonra yayınlanır.
| Kontrol | WCAG 2.2 kriteri | Üretimde nasıl doğrulanır |
|---|---|---|
| CMS tarafından yazılan görsellerde editör düzeyinde zorunlu alt metin bulunur | 1.1.1 | CMS'i test edin: bir yazar alt metin olmadan yayınlayabilir mi? |
| Yerleştirilmiş üçüncü taraf widget'ları (sohbet, haritalar, formlar) erişilebilirdir | Değişir | Yerleştirmelerin bulunduğu sayfalarda axe çalıştırın |
| PDF indirmeleri ve belgeler etiketlenmiş ve okunabilirdir | 1.1.1, 1.3.1, 2.4.6 | Acrobat'ın erişilebilirlik denetleyicisinde açın |
| Yardım, destek ve iletişim bağlantıları her sayfada aynı yerdedir | 3.2.6 Tutarlı Yardım (WCAG 2.2 yeni) | Şablonlar arası görsel denetim |
| Formlar bir akışta gereksiz bilgileri iki kez istemez | 3.3.7 Gereksiz Giriş (WCAG 2.2 yeni) | Çok adımlı formları gözden geçirin |
| Kimlik doğrulamanın erişilebilir bir alternatifi var (passkey, e-posta bağlantıları, SSO) | 3.3.8, 3.3.9 Erişilebilir Kimlik Doğrulama (WCAG 2.2 yeni) | Şifre yöneticisi engellenmiş olarak kaydolmayı ve oturum açmayı deneyin |
| Dinamik içerik (modallar, toast bildirimleri, canlı bölgeler) duyurulur | 4.1.3 Durum Mesajları | Ekran okuyucu açıkken her birini tetikleyin |
| Sayfa, kullanıcı %200 yakınlaştırması sonrasında da kontrast ve hedef boyutu kurallarını karşılar | 1.4.4 Metni Yeniden Boyutlandır, 1.4.10 Yeniden Akış | Tarayıcıyı %200'e yakınlaştırın ve kontrol edin |
| Otomatik oynatılan medya yok veya medyada duraklama kontrolü var | 1.4.2 Ses Kontrolü, 2.2.2 Duraklat, Durdur, Gizle | Sayfayı soğuktan yükleyin |
| Çerez banner'ı klavye odağını hapsetmiyor | 2.1.2 Klavye Tuzağı Yok | Banner'a sekme yapın, geri sekme yapın |
Yayın sonrası listesi, çoğu ekibin başarısız olduğu yerdir. Tasarım erişilebilir biçimde yayınlandı. CMS yazarları onu etiketlenmemiş PDF'ler, otomatik oynatılan videolar ve başlatıcısında 2:1 kontrast oranına sahip bir sohbet widget'ı ile dolduruyor. Erişilebilirlik bir sistem özelliğidir, lansman kilometre taşı değil.
Yaygın tasarımcı hatalarının WCAG kriterleriyle eşlenmesi
Her erişilebilirlik denetim bulgusu belirli bir WCAG başarı kriterine kadar izlenebilir ve çoğu tasarımcı aynı beş kritere karşı aynı beş hatayı yapar.
| Tasarımcı hatası | Aslında ne olduğu | İhlal ettiği WCAG 2.2 kriteri |
|---|---|---|
| Tek etiket olarak yer tutucu metin | Kullanıcılar yazmaya başladıkları anda etiketi kaybeder | 3.3.2 Etiketler veya Talimatlar |
| aria-label veya ipucu olmadan yalnızca simge düğmeler | Ekran okuyucular amacı olmayan "düğme" duyurur | 4.1.2 Ad, Rol, Değer |
| Yalnızca kırmızı kenarlık veya kırmızı metinle gösterilen hata mesajları | Renk körü kullanıcılar hata görmez | 1.4.1 Renk Kullanımı, 3.3.1 Hata Tanımlama |
| Estetik nedenlerle kaldırılan odak halkası | Klavye kullanıcıları nerede olduklarını göremez | 2.4.7 Odak Görünür |
| Boşluk olmadan 24x24 px'in altındaki dokunma hedefleri | Mobil kullanıcılar sürekli yanlış dokunur | 2.5.8 Hedef Boyutu (Minimum) |
| "İnce" UI'da düşük kontrast (yer tutucu metin, devre dışı durumlar, yardımcı kopya) | Güneş ışığındaki veya görme kaybı olan okuyucular okuyamaz | 1.4.3 Kontrast (Minimum), 1.4.11 Metin Dışı Kontrast |
| Odağı kapatan ancak ESC ile kapanma seçeneği olmayan modal | Klavye kullanıcıları modala sıkışır | 2.1.2 Klavye Tuzağı Yok |
| Yalnızca sürükleme navigasyonuna sahip karuseller | Motor engelli kullanıcılar ilerleyemez | 2.5.7 Sürükleme Hareketleri |
| Sekmede odaklanan öğeyi gizleyen yapışkan başlık | Kullanıcılar sayfanın kaydığını görür ama konumlarını kaybeder | 2.4.11 Odak Engellenmez |
| SSO veya e-posta bağlantısı olmadan yalnızca şifreyle oturum açma | Bilişsel yük başarısızlığı | 3.3.8 Erişilebilir Kimlik Doğrulama |
Aynı on hata her denetim raporunun büyük çoğunluğunu oluşturur. Bunları düzeltin ve herhangi bir danışman bir elektronik tablo açmadan WCAG 2.2 AA'nın %80'ine gelirsiniz.
Erişilebilirlik temelleri aynı zamanda iyi bir görsel hiyerarşi ile de bağlantılıdır. Kontrast, hedef boyutu ve odak durumları hiyerarşi kararlarıdır. Hiyerarşiyi doğru yapan bir tasarım, erişilebilirlik kontrol listesinin çoğunu varsayılan olarak doğru yapar; bu nedenle iyi renk teorisi ile erişilebilir tasarım arasındaki örtüşme neredeyse tamamdır.
Bir haftanızı yakmadan kontrol listesini nasıl çalıştırırsınız
Kontrol listesi yalnızca çalıştırmanın günler değil dakikalar aldığı durumlarda yararlıdır; bu da araçların işin büyük bölümünü yapması gerektiği anlamına gelir.
Çalışma temposu üç geçiştir, her aşama için bir tane, her biri çalışmanın o aşamaya ulaştığı anda yapılır. Hepsini sonda değil. Sonunda bunlardan birini değil. Her biri ucuz olan, her biri mümkün olan yerde araçlarla zorunlu kılınan üç ayrı geçiş.
- Tasarım geçişi: ekran başına 10 dakika. Her metin çifti için Stark veya Figma'nın kontrast denetleyicisi, yalnızca renk bilgisini test etmek için çerçeveyi gri ölçeğe alın, her dokunma hedefini ölçün. Bunu inceleme sırasında değil, teslim öncesinde yapın.
- Yapım geçişi: şablon başına 10 dakika. axe DevTools taraması, yalnızca klavye navigasyon testi, en çok ziyaret edilen sayfalarda bir ekran okuyucu geçişi. Yeni kodun gerilemeyle birleşememesi için axe-core'u CI'ya entegre edin.
- Gönderim geçişi: sürüm başına değil, aylık. Üretimde tam site axe veya pa11y taraması, herhangi bir belge kitaplığında PDF denetimi, formlar ve kimlik doğrulama akışlarının manuel olarak gözden geçirilmesi.
Bu, ürün başına aylık yarım günlük çalışma ve tasarım teslimi başına yaklaşık 15 dakikadır. Bundan fazlası olursa ekip çalıştırmayı bırakır. Bundan azı olursa denetimler düzeltilmemiş döner.
SSS
WCAG 2.2 yasal olarak zorunlu mu?
Evet, büyük pazarların çoğunda. Avrupa Erişilebilirlik Yasası Haziran 2025'te yürürlüğe girdi ve minimum olarak WCAG 2.1'e, mevcut çalışma standardı olarak 2.2'ye atıfta bulunuyor. ABD'deki Section 508, WCAG 2.0'a atıfta bulunuyor ancak tedarik sözleşmeleri giderek artan biçimde 2.2'yi şart koşuyor. Kanada, Birleşik Krallık, Avustralya ve Japonya'nın tamamı WCAG 2.1 veya 2.2'ye bağlı benzer gereksinimlere sahip. Bu pazarlardan herhangi birine gönderiyorsanız, 2.2 AA güvenli hedeftir.
Gerçekten bilmem gereken yeni WCAG 2.2 kriterleri neler?
Tasarımcılar için en önemli dört tanesi. 2.5.7 Sürükleme Hareketleri, sürükleme etkileşimleri için sürükleme dışı bir alternatif gerektirir. 2.5.8 Hedef Boyutu (Minimum), yeterli boşlukla en az 24x24 CSS piksel boyutunda dokunma hedefleri gerektirir. 2.4.11 Odak Engellenmez, odaklanan öğenin kaydırma ve yapışkan katmanlar aracılığıyla görünür kalmasını gerektirir. 3.3.8 Erişilebilir Kimlik Doğrulama, bir şifreyi hatırlamak gibi bilişsel testleri alternatif olmadan (SSO, passkey veya e-posta bağlantısı) yasaklar.
Mobil için ayrı bir kontrol listesine ihtiyacım var mı?
Hayır. WCAG 2.2, yeni kriterlerinin (hedef boyutu, sürükleme, odak) neden bu kadar mobil odaklı olduğunu açıklayan, açıkça mobil ve dokunmatik kullanımı kapsayacak şekilde yazılmıştır. Aynı üç aşamalı kontrol listesi mobil web ve duyarlı tasarım için çalışır. Native uygulamaların ek platforma özgü yönergeleri var (Apple'ın HIG ve Android Accessibility) ancak WCAG kuralları yine de geçerlidir.
WCAG 2.2'deki minimum dokunma hedefi boyutu nedir?
2.5.8 Hedef Boyutu (Minimum) kapsamında minimum 24x24 CSS pikseldir, ancak hedeflerin etrafında yeterli boşluk varsa veya metinle satır içindeyse istisnalar geçerlidir. Çoğu tasarımcının hedeflemesi gereken pratik boyut, Apple ve Google'ın platform önerilerini karşılayan ve WCAG spesifikasyonundaki kenar durumlarından kaçınan 48x48 CSS pikseldir.
Kontrol listesini gönderin, tahmini değil
Erişilebilirlik bir uyum görevi değildir. Üç anda oluşturulan, araçlarla zorunlu kılınan, insanlar tarafından kontrol edilen bir tasarım özelliğidir.
Erişilebilir siteler acısız biçimde gönderen ekipler en iyi denetçilere sahip olanlar değil. Kontrolleri tasarım aşamasına, yapım aşamasına ve gönderim aşamasına taşıyan ve bilinen hatalarla herhangi bir aşamanın geçilmesini reddeden ekiplerdir.
Üç listeyi çalıştırın. On yaygın hatayı bileşik hale gelmeden yakalayın. Tarayıcı aşaması taramalarını CI'ya otomatikleştirin. Yayın sonrası kaymaları aylık olarak denetleyin. WCAG 2.2 AA bir bitiş çizgisi olmaktan çıkar ve ekibin çalışma biçiminin bir özelliği haline gelir.
Bugün sitenizdeki bir ürün yüzeyini seçin. Tasarım aşaması kontrol listesini Figma dosyasına karşı çalıştırın. Düzeltmeleri sayın. Bu sayı bunu daha erken çalıştırmama maliyetidir.
Kontrol listesini gönderin, tahmini değil.
Need a site that passes WCAG 2.2 without a three-month remediation cycle? Brainy ships accessible design from the first Figma frame.
Get Started
