İçeriğe geç
AccessibleOrNot

Kontrol listesi · Shopware 6

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

Shopware 6'da erişilebilirlik büyük ölçüde sürüme bağlı. 6.7 ile gelen iyileştirmeler varsayılan olarak açık; 6.6'da aynı değişiklikler bir özellik bayrağının arkasında. Önce sürümünüzü bilin, sonra bu 14 maddeye bakın.

Her maddede düzeltmenin yeri (yönetim paneli ya da Twig şablonu), ilgili WCAG ölçütü ve taramamızın bunu otomatik bulup bulamadığı yazıyor.

  • Son güncelleme: 7 Ekim 2026
  • Şablon yolları varsayılan Storefront temasına göre
  • Hukuki görüş değildir.

Shopware'de sürüm ve sorumluluk

Shopware, şablon ve CSS değişikliği gerektiren erişilebilirlik düzeltmelerini ACCESSIBILITY_TWEAKS adlı özellik bayrağının arkasına koydu; çünkü bu değişiklikler aynı alanları değiştiren eklentileri bozabiliyor. 6.6'da bayrak .env dosyasından proje düzeyinde açılır, yönetim panelinden açılmaz. 6.7'de bayrak varsayılan olarak açık.

Shopware 6.7, 14 Mayıs 2025'te yayımlandı. 6.6'dasanız ve güncelleme yakın değilse bayrağı bir test ortamında açıp tema ve eklentilerinizin nasıl davrandığını görün.

Tema eklentiniz varsayılan şablonları sw_extends ile genişletiyorsa, düzeltmeler aynı yolu kendi src/Resources/views/storefront/ klasörünüzde izler. Mağaza (Store) eklentilerinin ürettiği HTML'deki sorunlar eklenti geliştiricisinde düzeltilir.

Kaynak: Shopware geliştirici belgeleri, Storefront erişilebilirliği · Shopware, 6.7 sürüm duyurusu

14 maddelik kontrol listesi

Satın alma akışındaki sıraya göre. Almanya'ya satıyorsanız BFSG denetiminin ölçütü de WCAG 2.1 AA'ya dayanır.

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. Tüm sayfalar

    Mağaza 6.7'de ya da 6.6'da ACCESSIBILITY_TWEAKS bayrağı açık.

    Nasıl kontrol edilir
    Yönetim panelinin alt kısmında ya da Ayarlar > Sistem altında Shopware sürümüne bakın. 6.6 ise .env dosyasında ACCESSIBILITY_TWEAKS=1 satırı var mı, geliştiricinize sorun.
    Nerede düzeltilir
    6.6: proje .env dosyası (önce test ortamında). Kalıcı çözüm: 6.7'ye güncelleme. Her iki durumda da tema ve eklentileri bayrak açıkken test edin.
    Neden önemli
    Shopware'in klavye, ekran okuyucu ve kontrast iyileştirmelerinin önemli bir kısmı bu bayrağa bağlı. Kapalıysa aşağıdaki maddelerin bir kısmı zaten düzeltilmiş olabilecekken açık kalır.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirSürümü ve bayrağı dışarıdan göremeyiz. Bayrağın etkilediği tek tek sorunları ise diğer maddelerde buluruz.
    Kaynak

  2. Ürün sayfası

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

    Nasıl kontrol edilir
    Ürün sayfası galerisini ekran okuyucuyla dinleyin ya da görselleri inceleyin. Boş ya da dosya adı olan alt metinleri not edin.
    Nerede düzeltilir
    Yönetim > İçerik > Medya > görsel > alt metin alanı. Alt metin medya kaydına aittir; aynı görsel başka ürünlerde de bu metinle görünür.
    Neden önemli
    Görme engelli müşteri ürün 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 doğruluğuna makine karar veremez.

  3. Tema

    Alışveriş Dünyaları (Shopping Experiences) bloklarındaki görsellerin alt metni var, slaytlar durdurulabiliyor.

    Nasıl kontrol edilir
    Ana sayfa ve kategori sayfalarındaki görsel, metin-görsel ve slayt bloklarına bakın. Görselin içinde yazı var mı? Slayt kendiliğinden dönüyor mu?
    Nerede düzeltilir
    Yönetim > İçerik > Alışveriş Dünyaları > ilgili yerleşim > blok ayarları. Görsel alt metni medya kaydından gelir (İçerik > Medya). Otomatik oynatma blok ayarlarında.
    Neden önemli
    Kampanya metni görsele gömülüyse ekran okuyucuya görünmez; dönen slayt okunmadan değişir.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleEksik alt metni buluruz. Görsel içindeki yazıyı ve slayt davranışını bulamayız.

  4. Tüm sayfalar

    Her satış kanalında ve dilde sayfa dili doğru tanımlı.

    Nasıl kontrol edilir
    Her dil sürümünde sayfa kaynağındaki <html lang="…"> değerine bakın: Almanca kanalda de-DE, Türkçe kanalda tr-TR gibi.
    Nerede düzeltilir
    Değer satış kanalının dil ayarından gelir (Yönetim > Satış Kanalları > kanal > Alan adları ve diller). Tema base.html.twig içinde bunu sabitlediyse düzeltin.
    Neden önemli
    Ekran okuyucu telaffuzu bu değere göre seçer.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    EvetOtomatik bulunurlang değerinin eksik ya da geçersiz olduğunu buluruz.

  5. 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. Yapışkan üst menünün odağı örtmediğini de kontrol edin.
    Nerede düzeltilir
    Tema eklentinizin SCSS dosyaları (src/Resources/app/storefront/src/scss/). Storefront Bootstrap tabanlıdır; odak stilini ezen kuralları ve "outline: none" kullanımını arayın.
    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.

  6. Tema

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

    Nasıl kontrol edilir
    Ana renk üstündeki buton metnini, indirimli fiyatı ve bilgi metinlerini bir kontrast denetleyicisiyle ölçün.
    Nerede düzeltilir
    Yönetim > İçerik > Temalar > temanız > renk ayarları (ana renk, ikincil renk, metin rengi). Ana rengi değiştirmeden önce bu rengin buton metniyle kontrastını ölçün.
    Neden önemli
    Az gören ve yaşlı müşteri soluk fiyatı ya da açık renk butonu okuyamaz.
    WCAG
    Kapsam
    • EAA
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleDüz arka plandaki metni ölçeriz. Görsel üstündeki metin "insan incelemesi gerekir" listesine düşer.

  7. Ürün sayfası

    Varyant seçimi (beden, renk) klavyeyle yapılabiliyor ve seçenekler adıyla okunuyor.

    Nasıl kontrol edilir
    Ürün sayfasında Tab ile varyant seçicisine gelin, bir seçenek seçin. Sayfa yeniden yüklendikten sonra odak nerede kalıyor?
    Nerede düzeltilir
    page/product-detail/configurator.html.twig ve tema eklentinizdeki genişletmesi. Renk kutucukları yalnız renkle değil, metinle de ayırt edilmeli.
    Neden önemli
    Shopware'de varyant seçimi çoğunlukla sayfayı yeniden yükler; odak başa dönerse klavye kullanıcısı yolunu her seferinde yeniden bulur.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleAdı olmayan seçenekleri buluruz. Seçim sonrası odak davranışı etkileşim ister.

  8. Sepet

    Yan sepet (off-canvas) açılınca odak içine geçiyor, Esc ile kapanıyor, ekleme duyuruluyor.

    Nasıl kontrol edilir
    Ürünü sepete ekleyin. Yan sepet açılınca odak içinde mi? Tab arkadaki sayfaya kaçıyor mu? Ekran okuyucu bir şey söylüyor mu?
    Nerede düzeltilir
    component/checkout/offcanvas-cart.html.twig ve tema JavaScript'i. Bu alan 6.7 / ACCESSIBILITY_TWEAKS iyileştirmelerinden etkilenir; önce bayrak açıkken test edin.
    Neden önemli
    Odak arka sayfada kalırsa klavye kullanıcısı görmediği bağlantılarda dolaşır.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirYan sepeti açmak için ürün eklemek gerekir; bunu yapmıyoruz.

  9. Sepet

    Sepetteki adet seçimi ve kaldır butonlarının adı var.

    Nasıl kontrol edilir
    Dolu sepette ekran okuyucuyla satırları dinleyin. Adet seçimi ve kaldır butonu hangi ürüne ait olduğunu söylemeli.
    Nerede düzeltilir
    page/checkout/cart/index.html.twig ve satır öğesi şablonları (component/line-item/ altında). Simge butonlarına görünmez metin ekleyin.
    Neden önemli
    Adsız bir çöp kutusu ikonu ekran okuyucuda yalnız "buton" diye okunur.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    EvetOtomatik bulunurAdı olmayan buton ve alanları raporlarız. Not: boş sepetle taradığımız için satırları görmeyiz; dolu sepetle siz kontrol edin.

  10. Ödeme

    Adres ve onay adımındaki alanların görünür etiketi var; hatalar metinle ve alanın yanında; onay kutuları etiketli.

    Nasıl kontrol edilir
    Ödeme adımlarını gerçek ya da test siparişiyle geçin. Zorunlu bir alanı boş bırakın. Şartlar onay kutusunun etiketi ekran okuyucuda okunuyor mu?
    Nerede düzeltilir
    page/checkout/confirm/index.html.twig ve adres formu (component/address/ altında). Alan zorunluluğu ve görünürlüğü: Yönetim > Ayarlar > Giriş ve kayıt.
    Neden önemli
    Ödeme formu satışın son adımı. ACM testinde engellerin başında ödeme butonları vardı.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirShopware boş sepetle onay sayfasını göstermez, sepete yönlendirir. Form da göndermiyoruz. Elle kontrol listesinde.
    Kaynak

  11. Hesap ve formlar

    Kayıt ve iletişim formundaki captcha engel olmuyor.

    Nasıl kontrol edilir
    Kayıt ve iletişim formlarını ekran okuyucuyla gönderin. Görsel bulmaca çıkıyor mu? Görünmez bal küpü alanı ekran okuyucuda okunuyor mu?
    Nerede düzeltilir
    Yönetim > Ayarlar > Temel bilgiler > Captcha. Seçenekler: bal küpü (honeypot), Google reCAPTCHA v2 (kutucuk + gerektiğinde resim bulmacası), reCAPTCHA v3 (puan tabanlı, etkileşimsiz). Bal küpü ve v3 kullanıcıya bulmaca göstermez.
    Neden önemli
    Geçilemeyen bir resim bulmacası müşteriyi hesap açmaktan ve sipariş vermekten alıkoyar.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirBulmacanın çıkıp çıkmadığı ziyaretçiye göre değişir. Gizli alanın ekran okuyucudan da gizli olduğunu elle kontrol edin.
    Kaynak

  12. Hesap ve formlar

    Kayıt ve giriş formu alanlarının görünür etiketi var.

    Nasıl kontrol edilir
    Hesap sayfasındaki formlara bakın. Etiket yalnız alanın içindeki gri yazı mı?
    Nerede düzeltilir
    page/account/register/index.html.twig ve tema genişletmeleri.
    Neden önemli
    Placeholder etiketin yerini tutmaz: yazmaya başlayınca kaybolur.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleAdı hiç olmayan alanları buluruz. Görünür etiketin olup olmadığını elle kontrol edin.

  13. Kategori ve arama

    Kategori filtreleri etiketli; filtre seçince sonuç sayısı duyuruluyor, odak kaybolmuyor.

    Nasıl kontrol edilir
    Bir kategoride filtreyi klavyeyle açıp seçin. Açılır panel Esc ile kapanıyor mu? Odak nerede kalıyor?
    Nerede düzeltilir
    component/listing/filter-panel.html.twig ve filtre JavaScript'i.
    Neden önemli
    Her filtre seçiminde odak sayfanın başına atlıyorsa klavye kullanıcısı filtrelemeyi bırakır.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleEtiketi olmayan filtre öğelerini buluruz. Seçim sonrası davranış elle kontrol edilir.

  14. Tüm sayfalar

    Mobilde yakınlaştırma kapatılmamış, %200 büyütmede içerik kesilmiyor.

    Nasıl kontrol edilir
    Telefonda iki parmakla büyütmeyi deneyin. Masaüstünde tarayıcıyı %200'e yakınlaştırıp sepete ekle butonuna ulaşın.
    Nerede düzeltilir
    layout/meta.html.twig içindeki <meta name="viewport"> etiketi; kesilen içerik için tema SCSS'i.
    Neden önemli
    Az gören müşteri fiyatı ve beden tablosunu ancak büyüterek okur.
    WCAG
    Kapsam
    • EAA
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleYakınlaştırmayı engelleyen viewport ayarını doğrudan buluruz. %200 büyütmede kesilen içerik elle kontrol edilir.

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

  • 6.7'ye geçmek erişilebilirliği tamamen çözer mi?

    Hayır. 6.7 varsayılan Storefront'u iyileştirir. Sizin tema eklentiniz, Alışveriş Dünyaları içeriğiniz, alt metinleriniz ve eklentileriniz ayrıca kontrol ister.

    Shopware, 6.7 sürüm duyurusu

  • ACCESSIBILITY_TWEAKS bayrağını canlı mağazada açmak riskli mi?

    Olabilir. Shopware bu değişiklikleri bayrağa koydu çünkü şablon yapısını değiştirip aynı alanlara dokunan eklentileri bozabiliyorlar. Önce test ortamında açın, tema ve eklentileri bu listeyle kontrol edin.

    Shopware geliştirici belgeleri, Storefront erişilebilirliği

  • Almanya'ya satıyorum. BFSG için bu liste yeter mi?

    Bu liste satış akışında en sık sorun çıkan noktaları kapsar, tam bir denetim değildir. Almanya'daki denetimin teknik ölçütü EN 301 549, yani web için WCAG 2.1 AA. Hukuki yükümlülüklerinizi bir avukata sorun.

    EAA rehberi

  • Tarama mağazamda bir şey değiştirir mi?

    Hayır. Yalnız herkese açık sayfaları açıp okuruz. Giriş yapmayız, sepete ürün eklemeyiz, sipariş vermeyiz.

    Güvenlik

İlgili sayfalar

Shopware 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.