İçeriğe geç
AccessibleOrNot

Kontrol listesi · WooCommerce

WooCommerce mağazası için erişilebilirlik kontrol listesi (WCAG 2.1 AA / Genelge)

WooCommerce'te sorunların çoğu üç yerden gelir: tema, WooCommerce şablonları ve eklentiler. Bu liste 14 maddede hangisinin nerede düzeltileceğini, ilgili WCAG ölçütünü ve taramamızın bunu otomatik bulup bulamadığını gösteriyor.

Kodunuz sizde olduğu için WooCommerce'te düzeltme alanınız Shopify ya da hazır altyapılardan geniştir. Sorumluluk alanınız da öyle.

  • Son güncelleme: 7 Ekim 2026
  • Klasik şablonlar ve blok sepet/ödeme
  • Hukuki görüş değildir.

WooCommerce'te kim neyi düzeltebilir

Önce sepet ve ödeme sayfanızın hangi yapıda olduğuna bakın. WooCommerce 8.3'ten beri yeni kurulumlarda sepet, ödeme ve sipariş onayı blok tabanlı gelir. Bu sayfalar sayfa düzenleyicisindeki Sepet ve Ödeme bloklarıyla yönetilir; cart/cart.php gibi PHP şablonları bunlarda devreye girmez.

Klasik şablon kullanıyorsanız WooCommerce şablonunu temanızda ezebilirsiniz: dosyayı wp-content/plugins/woocommerce/templates/ altından temanızdaki woocommerce/ klasörüne aynı yapıyla kopyalayın. Değişiklikleri alt temada (child theme) yapın; yoksa tema güncellemesinde silinir. Şablondaki hook'ları silmeyin, eklentiler onlara bağlanır.

Eklentiler (varyasyon kutucukları, yan sepet, pop-up, captcha, ödeme sağlayıcıları) kendi HTML'ini üretir. Sorun eklentideyse şablonda değil eklentide düzeltilir: geliştiricisine bildirin.

Blok tema kullanıyorsanız renk ve yazı tipi Görünüm > Düzenleyici > Stiller'de, klasik temada Görünüm > Özelleştir'dedir.

Kaynak: WooCommerce 8.3: blok sepet ve ödeme varsayılan · WooCommerce, şablonları tema üzerinden ezme · WooCommerce, sepet ve ödeme sayfasını özelleştirme

14 maddelik kontrol listesi

Satın alma akışındaki sıraya göre. Önce ödeme ve sepet: Hollanda'daki ACM testinde engellerin başında ödeme butonları ve captcha'lar vardı.

Liste nasıl okunur

  • Evet: taramamız bu sorunu doğrudan raporlar.
  • Kısmen: sorunun bir kısmını bulur ya da "insan incelemesi gerekir" listesine koyar; kalanı sizin kontrolünüz.
  • Hayır: otomatik testle bulunamaz. Klavye, ekran okuyucu ya da gerçek bir siparişle elle kontrol edin.
  • EAA etiketi: madde WCAG 2.1 A veya AA içinde. Genelge etiketi: madde WCAG 2.2 A içinde.

  1. Ürün sayfası

    Ürün ve galeri görsellerinin anlamlı alt metni var.

    Nasıl kontrol edilir
    Ürün sayfasında galeri görsellerini inceleyin ya da ekran okuyucuyla dinleyin. Boş, dosya adı ya da her görselde aynı olan alt metinleri not edin.
    Nerede düzeltilir
    WordPress yönetimi > Ortam > Kütüphane > görsel > "Alternatif metin" alanı. Alt metin görselin kendisine kaydedilir; aynı görseli birden fazla üründe kullanıyorsanız metnin hepsine uyduğunu kontrol edin.
    Neden önemli
    Görme engelli müşteri ürünün rengini, desenini, detayını alt metinden öğrenir.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleAlt metni hiç olmayan görselleri buluruz. Metnin görseli doğru anlatıp anlatmadığına makine karar veremez.

  2. Tüm sayfalar

    Sayfanın dili doğru tanımlı.

    Nasıl kontrol edilir
    Sayfa kaynağında <html lang="…"> değerine bakın. Çok dilli eklenti (WPML, Polylang vb.) kullanıyorsanız her dili ayrı kontrol edin.
    Nerede düzeltilir
    Ayarlar > Genel > Site dili. Klasik temalarda değer header.php içindeki language_attributes() çağrısından gelir; tema bunu sabit bir değerle değiştirdiyse düzeltin.
    Neden önemli
    Ekran okuyucu telaffuzu bu değere göre seçer. Yanlış dil, Türkçe metnin başka bir dilin kurallarıyla okunması demek.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    EvetOtomatik bulunurlang değerinin eksik ya da geçersiz olduğunu buluruz.

  3. Tüm sayfalar

    Klavye kullanıcısı menüyü atlayıp içeriğe geçebiliyor.

    Nasıl kontrol edilir
    Sayfayı açıp ilk Tab'a basın. "İçeriğe atla" bağlantısı görünmeli ve çalışmalı.
    Nerede düzeltilir
    Klasik temada header.php; blok temada üst bilgi şablon parçası (Görünüm > Düzenleyici > Şablon parçaları). Birçok tema bu bağlantıyı hazır getirir, özelleştirmede silinmiş olabilir.
    Neden önemli
    Uzun menüsü olan mağazada klavye kullanıcısı her sayfada onlarca bağlantıyı tek tek geçer.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleAtlama yolu hiç yoksa çoğunlukla işaretlenir. Çalışıp çalışmadığını klavyeyle siz denemelisiniz.

  4. Tema

    Klavye odağı her zaman görünür.

    Nasıl kontrol edilir
    Tab ile gezinin. Her odaklanan öğede belirgin bir çerçeve görmelisiniz.
    Nerede düzeltilir
    Temanın style.css dosyası ve Görünüm > Özelleştir > Ek CSS. "outline: none" ya da "outline: 0" arayın; :focus-visible için görünür bir stil bırakın. Sayfa oluşturucu (page builder) eklentileri de odak stilini silebilir.
    Neden önemli
    Fare kullanamayan müşteri nerede olduğunu göremezse alışverişe devam edemez.
    WCAG
    Kapsam
    • EAA
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirOdak görünürlüğü otomatik testle güvenilir biçimde ölçülemez. Elle kontrol listesinde.

  5. Tema

    Metin ve buton renkleri yeterli kontrastta: normal metin en az 4,5:1.

    Nasıl kontrol edilir
    Fiyat, indirimli fiyat (üstü çizili eski fiyat dahil), "stokta yok" etiketi ve buton metinlerini bir kontrast denetleyicisiyle ölçün.
    Nerede düzeltilir
    Blok temada Görünüm > Düzenleyici > Stiller > Renkler; klasik temada Görünüm > Özelleştir > Renkler ya da Ek CSS. WooCommerce'in kendi bildirim ve buton renkleri tema CSS'iyle ezilebilir.
    Neden önemli
    Soluk gri fiyat ya da açık renk buton, az gören ve yaşlı müşteri için okunmaz.
    WCAG
    Kapsam
    • EAA
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleDüz arka plandaki metni ölçeriz. Görsel ya da gradyan üstündeki metin "insan incelemesi gerekir" listesine düşer.

  6. Ürün sayfası

    Varyasyon seçimi (beden, renk) etiketli ve klavyeyle yapılabiliyor.

    Nasıl kontrol edilir
    Değişken bir üründe Tab ile seçiciye gelin ve bir seçenek seçin. Ekran okuyucu seçeneğin adını ve seçili olduğunu söylemeli.
    Nerede düzeltilir
    Varsayılan şablon single-product/add-to-cart/variable.php her seçim kutusu için etiket üretir. Renk/beden kutucuğu (swatch) eklentisi kullanıyorsanız sorun genellikle eklentidedir: kutucuklar buton ya da radyo düğmesi olmalı, adları olmalı.
    Neden önemli
    Beden seçemeyen müşteri sepete ürün ekleyemez.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleAdı olmayan seçenekleri ve hatalı ARIA kullanımını buluruz. Klavyeyle seçimin gerçekten çalıştığını elle denemek gerekir.

  7. Ürün sayfası

    Adet alanının ve artı/eksi butonlarının adı var.

    Nasıl kontrol edilir
    Ekran okuyucuyla adet alanına gelin. "Ürün adı adet" gibi bir şey okunmalı; artı/eksi butonları "buton" diye adsız okunmamalı.
    Nerede düzeltilir
    global/quantity-input.php. Varsayılan şablonda ekran okuyucuya özel bir etiket var. Tema ya da eklenti artı/eksi butonu eklediyse butonlara görünmez metin ekleyin.
    Neden önemli
    Adsız bir "+" ekran okuyucuda yalnız "buton" diye okunur.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    EvetOtomatik bulunurAdı olmayan alanları ve butonları doğrudan raporlarız.

  8. Kategori ve arama

    Liste sayfasında "Sepete ekle" sonrası müşteriye duyuru yapılıyor.

    Nasıl kontrol edilir
    Kategori sayfasında ekran okuyucuyla "Sepete ekle"ye basın. Sayfa yenilenmeden ekleniyorsa bir bildirim okunmalı.
    Nerede düzeltilir
    WooCommerce > Ayarlar > Ürünler > arşivlerde AJAX ile sepete ekleme seçeneği (Enable AJAX add to cart buttons on archives). Açıksa, ekleme sonrası görünen bildirim ya da mini sepet güncellemesi bir durum mesajı (role="status" ya da aria-live) olarak işaretlenmeli. Yan sepet eklentisi kullanıyorsanız eklentide.
    Neden önemli
    Sessiz bir ekleme, ekran okuyucu kullanıcısının ürünü üç kez sepete atmasına ya da alışverişi bırakmasına yol açar.
    WCAG
    Kapsam
    • EAA
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirDurum mesajını görmek için ürünü sepete eklemek gerekir; bunu yapmıyoruz.

  9. Sepet

    Sepetteki kaldır bağlantısı hangi ürünü kaldırdığını söylüyor.

    Nasıl kontrol edilir
    Sepette ekran okuyucuyla "×" bağlantısına gelin. "Ürün adı sepetten kaldır" gibi okunmalı, yalnız "çarpı" değil.
    Nerede düzeltilir
    Klasik sepette cart/cart.php. Varsayılan şablon kaldır bağlantısına ürün adını içeren bir aria-label verir; temanız şablonu ezdiyse bu niteliğin korunduğunu kontrol edin. Blok sepette bu metinler bloktan gelir.
    Neden önemli
    Beş ürünlü sepette beş tane adsız "×", müşterinin yanlış ürünü silmesi demek.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    EvetOtomatik bulunurAdı olmayan bağlantıları raporlarız. Not: boş sepetle taradığımız için ürün satırlarını görmeyiz; sepet şablonunu dolu sepetle siz kontrol edin.

  10. Ödeme

    Ödeme formundaki her alanın görünür etiketi var; hatalar metinle ve alanla ilişkili.

    Nasıl kontrol edilir
    Ödemeye gidin, zorunlu bir alanı boş bırakıp "Sipariş ver"e basın. Hata hangi alanla ilgili, ekran okuyucu bunu okuyor mu? Ad, adres, e-posta alanlarında tarayıcı otomatik doldurma öneriyor mu?
    Nerede düzeltilir
    Blok ödemede: sayfa düzenleyicisinde Ödeme bloğu ve alan ayarları. Klasik ödemede: checkout/form-checkout.php ve checkout/form-billing.php; alan etiketleri ve autocomplete değerleri woocommerce_checkout_fields filtresiyle değiştirilir. Etiketi yalnız placeholder'a çeviren tema/eklenti ayarlarından kaçının.
    Neden önemli
    Ödeme formu satışın son adımı. ACM testinde engellerin başında ödeme adımı vardı.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirWooCommerce boş sepetle ödeme sayfasını genellikle sepete yönlendirir ve biz form göndermiyoruz. Elle kontrol listesinde.
    Kaynak

  11. Ödeme

    Kart bilgisi alanları (ödeme sağlayıcısı) klavye ve ekran okuyucuyla kullanılabiliyor.

    Nasıl kontrol edilir
    Test modunda bir ödeme yapın. Kart numarası, son kullanma ve CVC alanlarına Tab ile girilebiliyor mu, adları okunuyor mu? 3D Secure penceresinde odak nereye gidiyor?
    Nerede düzeltilir
    Kart alanları çoğunlukla ödeme sağlayıcısının çerçevesinde (iframe) çalışır; sizin şablonunuzda değildir. Sorunu sağlayıcıya bildirin ve erişilebilirlik beyanlarını isteyin.
    Neden önemli
    Kart alanına giremeyen müşteri ödeme yapamaz. Bu madde sizin kodunuzda olmasa da satış kaybı sizin.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirÖdeme sağlayıcısı alanları ancak dolu sepetle görünür; taramıyoruz.

  12. Hesap ve formlar

    Giriş, kayıt ve ödeme formlarındaki captcha'nın erişilebilir bir yolu var.

    Nasıl kontrol edilir
    Captcha olan formları ekran okuyucuyla deneyin. Görsel bulmaca çıkıyorsa alternatifle geçilebiliyor mu?
    Nerede düzeltilir
    WooCommerce'te captcha bir eklentiyle gelir. Eklenti ayarlarından hangi formlarda çıktığını görün; görünmez doğrulama ya da bal küpü (honeypot) seçeneği varsa değerlendirin.
    Neden önemli
    Captcha, ACM testinde en sık engellerden biriydi. Geçilemeyen bir bulmaca hesabı ve siparişi kilitler.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirBulmacanın çıkıp çıkmadığı ziyaretçiye göre değişir; otomatik testle karar verilemez.
    Kaynak

  13. Hesap ve formlar

    Giriş ve kayıt formu alanlarının görünür etiketi var.

    Nasıl kontrol edilir
    Hesabım sayfasındaki giriş ve kayıt formlarına bakın. Etiket yalnız alanın içindeki gri yazı (placeholder) ise yazmaya başlayınca kayboluyor.
    Nerede düzeltilir
    myaccount/form-login.php. Varsayılan şablonda görünür etiketler var; tema ezmesi ya da üyelik eklentisi bunları kaldırmış olabilir.
    Neden önemli
    Placeholder etiketin yerini tutmaz: kaybolur, çoğu zaman kontrastı düşüktür.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleAdı hiç olmayan alanları buluruz. Adı yalnız placeholder'dan gelen alanlar otomatik testten geçebilir; görünür etiketi elle kontrol edin.

  14. Tüm sayfalar

    Mobilde yakınlaştırma kapatılmamış.

    Nasıl kontrol edilir
    Telefonda ürün sayfasını iki parmakla büyütmeyi deneyin.
    Nerede düzeltilir
    Klasik temada header.php içindeki <meta name="viewport">: user-scalable=no ya da maximum-scale=1 varsa kaldırın.
    Neden önemli
    Az gören müşteri fiyatı ve beden tablosunu ancak büyüterek okur.
    WCAG
    Kapsam
    • EAA
    AccessibleOrNot bunu otomatik bulur mu?
    EvetOtomatik bulunurYakınlaştırmayı engelleyen viewport ayarını doğrudan raporlarız.

Taramamızın bilmediğiniz sınırları

Otomatik test, erişilebilirlik sorunlarının hacim olarak yaklaşık %57'sini bulur. Bu oran Deque'nin 2021'de 13.000'den fazla sayfada yaptığı çalışmadan geliyor; ölçütlerin değil, bulunan sorun sayısının oranı. Kalan kısım elle kontrol ister.

  • Giriş yapmıyoruz, sepete ürün eklemiyoruz, form göndermiyoruz.
  • Sepet ve ödeme sayfalarını boş sepetle açıyoruz. Çoğu platform boş sepetle ödeme sayfasını göstermez; adres ve kart adımlarını siz test etmelisiniz.
  • Klavyeyle gezinme, odak sırası ve ekran okuyucu deneyimini test etmiyoruz.
  • Her şablonu masaüstü (1280 px) ve mobil (390 px) genişlikte tarıyoruz.

Kaynak: Deque, otomatik test çalışması (%57)

Elle test için 10 dakika

  1. Fareyi bırakın. Ana sayfadan bir ürünü yalnız Tab, Shift+Tab, Enter ve boşluk tuşuyla sepete ekleyin.
  2. Her Tab basışında odağın nerede olduğunu görebiliyor musunuz? Göremediğiniz an not edin.
  3. Sepetten ödemeye geçin, bir alanı boş bırakıp devam etmeyi deneyin. Hata mesajı ne diyor, nerede çıkıyor?
  4. Tarayıcıyı %200'e yakınlaştırın. Sepete ekle ve ödeme butonları hâlâ görünüyor mu?
  5. Telefonda VoiceOver (iOS) ya da TalkBack (Android) açıp ürün sayfasını dinleyin: görseller ve beden seçenekleri ne diye okunuyor?

Sık sorulan sorular

  • Sepetim blok mu, klasik mi? Nasıl anlarım?

    Sayfalar > Sepet (ve Ödeme) sayfasını düzenleyicide açın. Sepet ya da Ödeme bloğu görüyorsanız blok tabanlıdır. Yalnız bir kısa kod ([woocommerce_cart], [woocommerce_checkout]) varsa klasik şablon çalışır.

    WooCommerce, sepet ve ödeme sayfasını özelleştirme

  • WooCommerce şablonunu doğrudan eklenti klasöründe düzeltsem olur mu?

    Olmaz. WooCommerce güncellendiğinde değişiklik silinir. Dosyayı alt temanızdaki woocommerce/ klasörüne kopyalayıp orada düzeltin.

    WooCommerce, şablonları tema üzerinden ezme

  • Erişilebilirlik eklentisi (widget) kurmak yetmez mi?

    Sayfanın üstüne katman ekleyen eklentiler şablonu ve içeriği değiştirmez. FTC, "her siteyi uyumlu yapar" iddiası nedeniyle Nisan 2025'te accessiBe'ye 1 milyon $ ödeme kararı verdi. Bu listedeki maddeler şablonda, eklentide ve içerikte düzeltilir.

    FTC, Nisan 2025

  • Sorun bir eklentiden geliyorsa ne yapmalıyım?

    Raporumuzda her bulgunun HTML örneği ve seçicisi var; eklentiye ait sınıf adları çoğunlukla kaynağı gösterir. Bu örnekle eklenti geliştiricisine bildirin. Düzelmiyorsa aynı işi yapan başka bir eklentiyi değerlendirin.

İlgili sayfalar

WooCommerce mağazanızda bu listenin otomatik kısmını şimdi görün.

Adresinizi girin. Ürün, kategori, sepet ve ödeme şablonlarınızı tarar, bulguları bu listedeki maddelere göre sıralarız. "Hayır" maddeleri için elle kontrol listesi raporda.

Mağazamı taraÖrnek raporu gör

Kart bilgisi istemiyoruz. Yalnızca herkese açık sayfalarınızı tarıyoruz.