Online mağazalar için WCAG 2.2 AA kontrol listesi

Shopify ve WooCommerce için sayfa türüne göre WCAG 2.2 AA kontrol listesi: alt metin, kontrast, etiketler, klavye, odak, hedef boyutu ve yeni 2.2 kriterleri.

FixReports editör ekibi10 dk okuma

Bir online mağaza için WCAG 2.2 AA kontrol listesi, mağaza şablonlarının çoğunda görülen hatalarla başlar: eksik alternatif metin (alt text), düşük kontrastlı metin, erişilebilir adı olmayan bağlantı ve butonlar, etiketsiz form alanları, klavye tuzakları ve görünmeyen odak. WCAG 2.2 bunlara mağazaları özellikle zorlayan AA kontrolleri ekler: yapışkan (sticky) çubukların altında kalan odaklı öğeler (2.4.11), 24 x 24 CSS pikselden küçük dokunma hedefleri (2.5.8) ve kullanıcıların bir şeyi hatırlamasını ya da yeniden yazmasını gerektiren giriş adımları (3.3.8). Her sayfa türünü (ana sayfa, koleksiyon, ürün, sepet) klavyeyle ve otomatik bir denetim aracıyla test edin, ardından tema şablonlarını düzeltin ki her sayfa bu düzeltmeyi devralsın.

Temel noktalar

  • WCAG 2.2, 5 Ekim 2023'te W3C Tavsiyesi oldu. Güncel sürüm 12 Aralık 2024 tarihlidir ve ISO/IEC 40500:2025 (yeni sekmede açılır) olarak onaylanmıştır.
  • WebAIM Million 2026 (yeni sekmede açılır) çalışmasında (Şubat 2026 verileri) en popüler bir milyon ana sayfanın %95,9'unda tespit edilebilir WCAG 2 hataları vardı.
  • En yaygın altı hata şunlardı: düşük kontrastlı metin (sayfaların %83,9'u), eksik alternatif metin (%53,1), eksik form etiketleri (%51), boş bağlantılar (%46,3), boş butonlar (%30,6) ve eksik sayfa dili (%13,5).
  • Bu örneklemdeki 42.516 Shopify ana sayfasında ortalama 75,1 hata tespit edildi; tüm sayfalarda bu ortalama 56,1'di.
  • WCAG 2.2, dört AA kriteri (2.4.11, 2.5.7, 2.5.8, 3.3.8) ve iki A seviyesi kriteri (3.2.6, 3.3.7) ekler ve 4.1.1 Parsing kriterini kaldırır.

WCAG 2.2 online mağazalar için neyi değiştirdi?

WCAG 2.2, altısı A veya AA seviyesinde olmak üzere dokuz başarı kriteri ekledi ve 4.1.1 Parsing kriterini geçerliliğini yitirdiği için kaldırdı (W3C WAI (yeni sekmede açılır)).

Yeni kriterSeviyeMağazada ne anlama geliyor
2.4.11 Focus Not Obscured (Minimum)AAOdaklanan bir bağlantı veya buton; yapışkan başlık, yapışkan sepete ekle çubuğu, çerez bildirimi veya canlı sohbet widget'ı tarafından tamamen gizlenmemelidir
2.5.7 Dragging MovementsAAFiyat aralığı kaydırıcısı gibi sürükleme gerektiren her öğenin tek dokunuşla kullanılabilen bir alternatifi olmalıdır
2.5.8 Target Size (Minimum)AATıklama ve dokunma hedefleri en az 24 x 24 CSS piksel olmalı ya da her birinin çevresindeki 24 px'lik daire komşularına değmeyecek şekilde aralıklı yerleştirilmelidir
3.2.6 Consistent HelpAYardım bağlantıları, iletişim bilgileri veya canlı sohbet her sayfada aynı göreli sırada yer alır
3.3.7 Redundant EntryAAynı süreçte aynı bilgiyi iki kez istemeyin; otomatik doldurun veya kullanıcının seçmesine izin verin
3.3.8 Accessible Authentication (Minimum)AABir alternatif ya da yapıştırma ve parola yöneticileri gibi bir yardımcı sunulmadıkça giriş, ezberlemeye veya bir şeyi bakarak yeniden yazmaya dayanmamalıdır

Diğer üçü (2.4.12, 2.4.13 ve 3.3.9) AAA seviyesindedir. WCAG 2.2, 4.1.1 dışında 2.1'deki tüm kriterleri koruduğu için 2.2 AA'yı karşılamak 2.1 AA'yı da karşılamak anlamına gelir.

Mağaza şablonlarında en sık hangi WCAG kriterleri ihlal ediliyor?

Her yıl aynı birkaç kriter öne çıkar: kontrast, alternatif metin, form etiketleri, bağlantı ve buton adları; bunlara ek olarak otomatik araçların yalnızca bir kısmını yakalayabildiği klavye ve odak sorunları.

KriterMağazalarda ne hatalıNasıl düzeltilir
1.1.1 Non-text Content (A)Alternatif metni olmayan ya da alternatif metin olarak dosya adı kullanan ürün görselleri; metni olmayan bağlantılı görsellerGörseldeki ürünü tanımlayın (renk, stil, açı). alt="" değerini yalnızca dekoratif görseller için kullanın. Shopify temaları image.alt değerini çıktıya yazmalıdır
1.4.3 Contrast (Minimum) (AA)Açık gri gövde metni, yer tutucu (placeholder) metin, indirim rozetleri, hero görsellerin üzerindeki metinlerNormal metin için 4,5:1, büyük metin için 3:1 (yaklaşık 24 px veya kalın yazıda 18,5 px) (W3C (yeni sekmede açılır))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Yalnızca simgeden oluşan sepet, arama ve sosyal medya bağlantıları; slayt okları; adı olmayan "X" kapatma butonlarıHer kontrole görünür bir metin veya aria-label verin; örneğin "Sepet, 2 ürün"
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Yalnızca yer tutucu metni olan bülten ve arama alanları; etiketsiz adet alanlarıInput id değeriyle eşleşen bir <label for> kullanın; radyo buton olarak çalışan renk seçeneklerini (swatch) legend içeren bir fieldset içinde gruplayın
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Yalnızca fareyle üzerine gelindiğinde (hover) açılan menüler, div öğeleriyle oluşturulmuş renk seçenekleri, klavyeden kapatılamayan açılır pencerelerGerçek button ve a öğeleri kullanın; Escape tuşu açılır katmanları kapatmalı ve odağı geri döndürmelidir
2.4.7 Focus Visible (AA)Tema CSS dosyasında outline: noneArka plandan belirgin şekilde ayrışan bir :focus-visible stili ekleyin

WebAIM ayrıca bağlantılı görsellerin dörtte birinde alternatif metin olmadığını ve alternatif metni eksik görsellerin %45'inin bağlantı olduğunu tespit etti (WebAIM (yeni sekmede açılır)). Bir koleksiyon sayfasındaki ürün ızgarasında bu genellikle ürün görseli bağlantısı anlamına gelir.

Ana sayfada neleri kontrol etmelisiniz?

Başlığı (header), hero alanını ve açılan her şeyi kontrol edin, çünkü her ziyaretçi ilk önce bunlarla karşılaşır.

  • Atlama bağlantısı. İlk odaklanılabilir öğe olarak bir "İçeriğe geç" bağlantısı (2.4.1 Bypass Blocks, A).
  • Başlık simgeleri. Arama, hesap ve sepet simgelerinin erişilebilir adları vardır ve sepetin adı ürün sayısını içerir.
  • Menü. Enter veya Boşluk tuşuyla açılır, alt öğelere Tab ile ulaşılabilir, Escape ile kapanır ve fareyle üzerine gelmeye (hover) bağlı değildir (2.1.1). Shopify'ın Theme Store gereklilikleri (yeni sekmede açılır), açılır menüler dahil sayfanın tüm bölümlerinin klavyeyle erişilebilir olması gerektiğini belirtir.
  • Hero slaytı. Slaytlar beş saniyeden uzun süre kendiliğinden hareket ediyorsa bir duraklatma kontrolü sağlayın (2.2.2 Pause, Stop, Hide, A).
  • Duyuru çubuğu ve görsel üzerindeki metinler. Kontrastı ölçün; marka renkleri çoğu zaman 4,5:1 oranını karşılamaz.
  • Açılır pencereler ve çerez bildirimleri. Odağı açılır pencerenin içine taşıyın, e-posta alanını etiketleyin, Escape ile kapatılabilmesini sağlayın ve yapışkan bir bildirimin odaklanan öğeyi hiçbir zaman tamamen kapatmadığından emin olun (2.4.11). W3C, odaklanan öğelerin yapışkan çubukların altında kalmasını önlemenin yollarından biri olarak CSS scroll-padding özelliğini gösterir (W3C (yeni sekmede açılır)).
  • Sayfa dili. html öğesinde doğru bir lang özniteliği bulunur (3.1.1 Language of Page, A).

Koleksiyon sayfalarında neleri kontrol etmelisiniz?

Koleksiyon sayfaları genellikle ürün kartları, filtreler ve renk seçenekleri yüzünden hata verir.

  • Ürün kartları. Görsel bağlantısının alternatif metni vardır ya da görsel yardımcı teknolojilerden gizlenir ve ürün adını başlık bağlantısı taşır.
  • Filtreler. Her onay kutusunun bir etiketi, her grubun bir başlığı veya açıklaması (legend) vardır. Filtre paneli klavyeyle açılır, kullanılır ve kapanır. Güncellenen sonuç sayısını bir durum mesajı olarak duyurun (4.1.3 Status Messages, AA).
  • Fiyat kaydırıcıları. Filtrenin sürükleme gerektirmeden (2.5.7) ve fare olmadan (2.1.1) çalışması için minimum ve maksimum sayı alanları ekleyin.
  • Renk seçenekleri. Her renk seçeneğinin metin olarak bir adı vardır ve "tükendi" durumu yalnızca renkle gösterilmez (1.4.1 Use of Color, A). Renk seçenekleri 24 x 24 CSS piksel boyutunu veya aralık kuralını karşılar (2.5.8).
  • Sıralama ve sayfalama. Sıralama açılır menüsünün bir etiketi vardır; sayfa bağlantıları ve "daha fazla yükle" butonları hedef boyutu kuralını karşılar.

Ürün sayfalarında neleri kontrol etmelisiniz?

Satın alma kararı ürün sayfasında verilir; bu yüzden fotoğraflarla sepete ekle butonu arasındaki her kontrolü test edin.

  • Galeri. Her görselin alternatif metni vardır, küçük resimler "2. görseli göster" gibi adlara sahip butonlardır ve oklar sürükleme gerektirmeden çalışır (2.5.7).
  • Varyant seçiciler. Beden ve renk seçenekleri etiketli bir grup içindedir (1.3.1), seçili seçenek ekran okuyuculara aktarılır (4.1.2) ve stokta olmayan bedenler metinle işaretlenir.
  • Adet. Adet alanının bir etiketi vardır; eksi ve artı butonlarının adları vardır ve bu butonlar 2.5.8'i karşılar. Shopify'ın Theme Store'u artık en az 24 x 24 CSS piksel boyutunda dokunma hedefleri şart koşuyor; erişilebilirlik en iyi uygulamaları (yeni sekmede açılır) ise birincil kontroller için 44 x 44 öneriyor.
  • Sepete ekle. Başarı ve hata mesajları duyurulur (4.1.3). FTC'nin bir overlay (erişilebilirlik katmanı) sağlayıcısına karşı hazırladığı şikayette, ekran okuyucunun ürünün sepete eklendiğini duyurmadığı ve 5 yıldızlı bir puan görselinin "previous" (önceki) butonu olarak sesli okunduğu bir site örnek gösterildi (FTC şikayeti (yeni sekmede açılır)).
  • Puanlar, sekmeler ve akordeonlar. Puanlarda "5 üzerinden 4,5 yıldız" gibi bir metin bulunur. Akordeonlar açık mı kapalı mı olduklarını bildirir.
  • Yapışkan sepete ekle çubuğu. Klavye kullanıcısı sayfada Tab ile aşağı ilerlerken odaklanan öğeyi tamamen kapatmamalıdır (2.4.11).
  • Video. Konuşma içeren ürün videolarında altyazı bulunur (1.2.2 Captions (Prerecorded), A).

Sepette ve giriş ekranında neleri kontrol etmelisiniz?

Sepet, çoğu temanın tamamen kontrol ettiği son sayfadır; bu yüzden onu ödeme butonuna kadar test edin, ardından hesap girişinin hafızaya veya yeniden yazmaya dayanmadığını kontrol edin.

  • Yan sepet paneli (cart drawer). Shopify'ın en iyi uygulamalarında anlatıldığı gibi odak panelin içine taşınır, panel açık olduğu sürece orada kalır ve Escape ile kapatıldığında sepet butonuna geri döner.
  • Sepet satırları. Her adet alanı ürün adıyla etiketlenir ve her kaldır butonu neyi kaldırdığını söyler; örneğin "Keten gömleği kaldır, beden M".
  • İndirim kodu ve not alanları. Etiketlidir ve hatalar metinle açıklanır (3.3.1 Error Identification, A).
  • Ödeme butonu. Tab ile ulaşılabilir, odaklandığında görünür ve yapışkan öğelerin arkasında gizli kalmaz.
  • Giriş (3.3.8). Shopify müşteri hesapları varsayılan olarak tek kullanımlık kodla parolasız giriş (yeni sekmede açılır) kullanır. W3C'ye göre kodlar yapıştırılabilir veya otomatik doldurulabilir olmalıdır; yapıştırmayı ya da parola yöneticilerini engellemek bu kriteri ihlal eder. Nesne tanımaya dayalı CAPTCHA'lara AA seviyesinde izin verilir, ancak bulmaca veya matematik CAPTCHA'ları için başka bir yöntem sunulmalıdır (W3C (yeni sekmede açılır)).

Burada platform farkları önemlidir. Shopify'da bilgi, kargo ve ödeme adımları için checkout.liquid artık desteklenmiyor (yeni sekmede açılır); bu nedenle ödeme sayfasındaki işaretlemenin (markup) çoğu temanıza değil Shopify'a aittir. Eklediğiniz ödeme uygulamalarını ve özelleştirmeleri test edin. WooCommerce kullanıyorsanız ödeme sayfası, WordPress sitenizdeki bir sayfadır. WooCommerce, çekirdek ön yüzünün WCAG 2.2 AA'ya büyük ölçüde uyumlu olduğunu söylüyor (beyanın son güncellemesi 1 Nisan 2025), ancak temanız ve eklentileriniz bunu yine de bozabilir (WooCommerce (yeni sekmede açılır)).

Mağazanızı bu kontrol listesine göre nasıl test edersiniz?

Her sayfa türünde otomatik bir taramayı, yalnızca klavyeyle yapılan bir satın alma denemesini ve kısa bir ekran okuyucu kontrolünü birleştirin.

  1. Otomatik tarama. axe, WAVE veya Lighthouse gibi araçlar kontrast, alternatif metin, etiket ve boş bağlantı sorunlarını yakalar. Shopify'ın Theme Store'u ana sayfa, koleksiyon ve ürün sayfalarında ortalama en az 90 Lighthouse erişilebilirlik puanı ister. Bu bir alt sınırdır, uygunluk anlamına gelmez: W3C'ye göre araçlar erişilebilirliği tek başlarına belirleyemez (yeni sekmede açılır).
  2. Yalnızca klavyeyle satın alma. Ana sayfadan başlayarak menü veya arama üzerinden bir ürüne ulaşın, filtreleyin, bir varyant seçin, sepete ekleyin, sepeti açın ve fare kullanmadan ödeme butonuna ulaşın.
  3. Ekran okuyucuyla hızlı kontrol. VoiceOver veya NVDA ile ürün adını, fiyatı, varyant durumunu ve sepete ekleme onayını dinleyin.
  4. Değişikliklerden sonra yeniden test edin. Tema güncellemeleri ve yeni uygulamalar düzeltmeleri geri alabilir.

Ücretsiz taramamız, ana sayfa, koleksiyon, ürün, sepet ve içerik sayfalarında gerçek Chromium ve axe-core ile 1. adımı kapsar. Erişilebilirlik Düzeltme Raporu 25 sayfaya kadar test eder, 2. adımı ödeme butonuna kadar yalnızca klavyeyle yapılan bir alışveriş testiyle ekler, düzeltme öncesi ve sonrası kod örnekleri verir ve ekran okuyucuyla bir kişinin yapması gereken 3. adım için bir kontrol listesi içerir. İkisi de ADA veya WCAG uyumluluğunu garanti etmez.

Sık sorulan sorular

WCAG 2.2, ABD'deki online mağazalar için yasal bir zorunluluk mu?

ABD Adalet Bakanlığı'nın özel işletmeler için web standardı belirleyen bir ADA yönetmeliği yoktur; bakanlığın 2022 tarihli web rehberinde (yeni sekmede açılır) WCAG, yararlı bir yol gösterici olarak anılır. İhtarnameler (demand letter) genellikle WCAG 2.1 veya 2.2 AA'ya atıf yapar; bu nedenle kendi yükümlülükleriniz için bir avukatla görüşün.

WCAG 2.2 AA'yı karşılamak WCAG 2.1 AA'yı da karşılamak anlamına gelir mi?

Pratik açıdan evet. WCAG 2.2, W3C'nin geçerliliğini yitirdiği için kaldırdığı 4.1.1 Parsing dışında WCAG 2.1'in tüm başarı kriterlerini korur.

WCAG 2.2'de minimum hedef boyutu nedir?

2.5.8'e göre hedefler en az 24 x 24 CSS piksel olmalıdır; ancak daha küçük her hedefin merkezine yerleştirilen 24 px'lik bir daire diğer hedeflere veya onların dairelerine değmiyorsa bu şart aranmaz. Cümle içindeki bağlantılar, stil uygulanmamış tarayıcı kontrolleri, belirli bir sunumun zorunlu olduğu durumlar ve kriteri karşılayan eşdeğer bir kontrolü bulunan hedefler muaftır.

Lighthouse erişilebilirlik puanının 100 olması mağazamın uyumlu olduğu anlamına gelir mi?

Hayır. Otomatik araçlar hataların yalnızca bir kısmını tespit eder ve WebAIM, tespit edilmiş hata olmamasının bir sayfanın erişilebilir veya uyumlu olduğu anlamına gelmediğini belirtir.

Parolayla giriş 3.3.8'i ihlal eder mi?

Tek başına etmez. Kullanıcılar parola alanına yapıştırma yapabiliyor ve parola yöneticisi kullanabiliyorsa alan kriteri karşılar; ihlale yol açan, yapıştırmanın veya otomatik doldurmanın engellenmesidir.

Mağazamı ne sıklıkla yeniden test etmeliyim?

Her tema güncellemesinden, yeni uygulama kurulumundan veya büyük şablon değişikliğinden sonra yeniden test edin ve satın alma yolunu düzenli aralıklarla kontrol edin, çünkü uygulamalar haber vermeden yeni işaretleme (markup) ekleyebilir.

Kaynaklar

Tüm rehberler