İçeriğe geç
AccessibleOrNot

Kontrol listesi · Shopify

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

Bu liste ürün sayfasından ödemeye kadar 15 noktayı kapsar. Her maddede düzeltmenin yeri (yönetim paneli ya da tema dosyası), ilgili WCAG ölçütü ve taramamızın bunu otomatik bulup bulamadığı yazıyor.

Shopify'da işin bir kısmı sizde, bir kısmı Shopify'da. Tema, içerik ve kurduğunuz uygulamalar sizin sorumluluğunuzda; ödeme sayfasının çekirdeği Shopify'ın.

  • Son güncelleme: 7 Ekim 2026
  • Dosya adları Dawn temasına göre
  • Hukuki görüş değildir.

Shopify'da kim neyi düzeltebilir

Tema (Online Store > Themes): şablonlar, renkler, butonlar, menüler. Tema düzenleyicisinden (Customize) ayar, "Edit code" ile Liquid ve CSS düzeyinde değişiklik yapılır. Kod değiştirmeden önce temanın bir kopyasını alın.

İçerik: ürün görseli alt metinleri, banner metinleri, video altyazıları. Bunlar yönetim panelinde, tema güncellemesinden etkilenmez.

Uygulamalar: yorum, sohbet, pop-up ve filtre uygulamaları sayfaya kendi kodunu ekler. Bu koddaki sorunu tema dosyasında düzeltemezsiniz; uygulama geliştiricisine bildirmeniz gerekir.

Ödeme: checkout.liquid dosyası bilgi, kargo ve ödeme adımları için 13 Ağustos 2024'ten beri kullanılmıyor. Ödeme sayfasını Shopify barındırır; siz marka ayarlarını, Shopify Plus'taysanız ödeme uzantılarını yönetirsiniz.

Shopify'ın kendi yardım sayfası da şunu söylüyor: tema erişilebilirlik yönergelerine uymak, mağazanın tamamen erişilebilir olduğunu garanti etmez.

Kaynak: Shopify Yardım, tema erişilebilirliği · Shopify.dev, checkout.liquid

15 maddelik kontrol listesi

Satın alma akışındaki sıraya göre. Ödeme ve sepet maddeleri öncelikli: Hollanda'daki ACM testinde en sık engel ödeme butonları ve captcha'lardı.

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ı

    Her ürün görselinin anlamlı bir alt metni var.

    Nasıl kontrol edilir
    Ürün sayfasında görsele sağ tıklayıp "İncele" deyin ya da ekran okuyucuyla dinleyin. Alt metin boşsa, dosya adıysa (IMG_2041.jpg) ya da her görselde aynıysa düzeltin.
    Nerede düzeltilir
    Shopify yönetimi > Products > ürün > medya öğesine tıklayın > Add alt text. Aynı ürünün ikinci ve üçüncü görseli farklı bir şey gösteriyorsa (arka yüz, kumaş dokusu) alt metin de farklı olmalı.
    Neden önemli
    Görme engelli müşteri ürünün rengini, desenini, kalıbını alt metinden öğrenir. Alt metin yoksa ekran okuyucu dosya adını okur ya da görseli atlar.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleAlt metni hiç olmayan görselleri buluruz. Alt metnin görseli doğru anlatıp anlatmadığına makine karar veremez.
    Kaynak

  2. Tema

    Banner ve slayt görsellerinin alt metni var; görselin içine gömülü kampanya metni alt metinde de yazıyor.

    Nasıl kontrol edilir
    Ana sayfadaki her banner için sorun: görselin üstünde "%30 indirim" gibi bir yazı var mı? Varsa aynı yazı alt metinde ya da sayfada metin olarak da olmalı.
    Nerede düzeltilir
    Online Store > Themes > Customize > ilgili bölüm (ör. Image banner, Slideshow) > görsel > alt metin alanı. Mümkünse kampanya metnini görsele gömmek yerine bölümün metin alanına yazın.
    Neden önemli
    Görselin içindeki yazı ekran okuyucuya görünmez. Kampanyanın kendisi kaybolur.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleEksik alt metni buluruz. Görselin içinde yazı olup olmadığını bilemeyiz.
    Kaynak

  3. Tüm sayfalar

    Sayfanın dili doğru tanımlı: Türkçe mağazada tr, Almanca mağazada de.

    Nasıl kontrol edilir
    Sayfa kaynağında <html lang="…"> değerine bakın. Shopify Markets ile birden fazla dilde satıyorsanız her dil için ayrı kontrol edin.
    Nerede düzeltilir
    layout/theme.liquid dosyasındaki <html> etiketi. Dawn'da değer mağaza diline göre otomatik gelir (request.locale.iso_code). Sabit "en" yazılmışsa bu satırı değiştirin.
    Neden önemli
    Ekran okuyucu metni hangi dilin telaffuzuyla okuyacağını bu değerden seçer. Yanlış dil, Türkçe metnin İngilizce okunması demek.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    EvetOtomatik bulunurlang değerinin eksik ya da geçersiz olduğunu buluruz. Değerin sayfadaki gerçek dille uyuşmadığını yalnız bariz durumlarda yakalarız.

  4. Tüm sayfalar

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

    Nasıl kontrol edilir
    Sayfayı açıp ilk Tab'a basın. "İçeriğe atla" (Skip to content) bağlantısı görünmeli ve Enter'la ana içeriğe götürmeli.
    Nerede düzeltilir
    layout/theme.liquid. Dawn'da bu bağlantı hazır gelir (skip-to-content-link); tema değiştirdiyseniz ya da üst kısmı özelleştirdiyseniz yerinde olduğunu ve hedefin (main içeriği) var olduğunu kontrol edin.
    Neden önemli
    Mega menüsü olan bir mağazada klavye kullanıcısı her sayfada onlarca bağlantıyı tek tek geçmek zorunda kalır.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleAtlama yolu hiç yoksa çoğunlukla işaretlenir. Bağlantının çalışıp çalışmadığını klavyeyle siz denemelisiniz.

  5. Tema

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

    Nasıl kontrol edilir
    Tab ile gezinin. Odaklanan buton ya da bağlantının etrafında belirgin bir çerçeve görmelisiniz. Bir an bile kaybolursa not edin.
    Nerede düzeltilir
    assets/base.css (Dawn) ve eklediğiniz özel CSS. "outline: none" ya da "outline: 0" arayın; :focus-visible için görünür bir stil bırakın. Uygulamaların eklediği CSS de odağı 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.

  6. Tema

    Metin ve buton renkleri yeterli kontrastta: normal metin en az 4,5:1, büyük metin en az 3:1.

    Nasıl kontrol edilir
    Fiyat, indirimli fiyat, "stokta yok" etiketi ve görsel üstündeki metinleri bir kontrast denetleyicisiyle ölçün.
    Nerede düzeltilir
    Online Store > Themes > Customize > Theme settings > Colors (Dawn'da renk şemaları). Görsel üstü metin için ilgili bölümde arka plan katmanının opaklığını artırın.
    Neden önemli
    Az gören ve yaşlı müşteriler soluk gri fiyatı ya da açık renk butonu okuyamaz. Shopify'ın kendi tema yönergesi de 4,5:1 istiyor.
    WCAG
    Kapsam
    • EAA
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleDüz arka plandaki metin kontrastını ölçeriz. Görsel ya da gradyan üstündeki metne makine karar veremez; bunlar "insan incelemesi gerekir" listesine düşer.
    Kaynak

  7. Ürün sayfası

    Beden ve renk seçimi klavyeyle yapılabiliyor ve ekran okuyucu seçeneği adıyla okuyor.

    Nasıl kontrol edilir
    Ürün sayfasında Tab ile varyant seçicisine gelin, ok tuşları ya da boşlukla bir beden seçin. Ekran okuyucu "Beden, M, seçili" gibi bir şey söylemeli. Renk kutucukları yalnız renkle değil, adla da ayırt edilmeli.
    Nerede düzeltilir
    sections/main-product.liquid ve snippets/product-variant-picker.liquid (Dawn). Seçenek grubunun fieldset ve legend içinde, her seçeneğin label ile bağlı olması gerekir. Renk kutucuğu (swatch) uygulaması kullanıyorsanız sorun uygulamada olabilir.
    Neden önemli
    Beden seçemeyen müşteri sepete ürün ekleyemez. Bu, satışı doğrudan kesen bir engel.
    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ışıp çalışmadığını elle denemek gerekir.

  8. Ürün sayfası

    Sepete ekle butonunun adı var ve ekleme sonrası müşteriye duyuruluyor.

    Nasıl kontrol edilir
    Ekran okuyucuyla "Sepete ekle"ye basın. "Sepete eklendi" gibi bir bildirim okunmalı; sessiz kalıyorsa müşteri ürünün eklendiğini bilemez.
    Nerede düzeltilir
    Buton: sections/main-product.liquid. Bildirim: Dawn'da sepet çekmecesi (snippets/cart-drawer.liquid) ya da sepet bildirimi (snippets/cart-notification.liquid), seçim Theme settings > Cart altında. Bildirim alanı bir durum mesajı (role="status" ya da aria-live) olarak işaretlenmeli.
    Neden önemli
    Görsel bildirim ekran okuyucuya ulaşmazsa müşteri butona tekrar tekrar basar ya da alışverişi bırakır.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleButonun adı yoksa buluruz. Durum mesajını test etmek için ürünü sepete eklemek gerekir; bunu yapmıyoruz.

  9. Sepet

    Sepet çekmecesi açılınca odak içine geçiyor, Esc ile kapanıyor, kapanınca odak geri dönüyor.

    Nasıl kontrol edilir
    Sepet ikonuna klavyeyle basın. Odak çekmecenin içine geçmeli; Tab arkadaki sayfaya kaçmamalı; Esc çekmeceyi kapatmalı.
    Nerede düzeltilir
    snippets/cart-drawer.liquid ve ilgili JavaScript (Dawn'da assets/cart-drawer.js). Uygulama tabanlı bir yan sepet kullanıyorsanız uygulama geliştiricisine.
    Neden önemli
    Odak arka sayfada kalırsa klavye kullanıcısı görmediği bağlantılarda dolaşır; çekmeceden çıkamazsa sayfa kilitlenir.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirÇekmeceyi açmak ve odak hareketini izlemek etkileşim ister. Elle kontrol listesinde.

  10. Sepet

    Sepetteki adet alanı, artı/eksi ve kaldır butonlarının her birinin adı var.

    Nasıl kontrol edilir
    Ekran okuyucuyla sepet sayfasını dinleyin. "Buton" diye adsız okunan bir şey olmamalı; kaldır butonu hangi ürünü kaldırdığını söylemeli.
    Nerede düzeltilir
    sections/main-cart-items.liquid (sepet sayfası) ve snippets/cart-drawer.liquid (çekmece). Simge butonlarına görünmez metin ya da aria-label ekleyin; çeviri metinleri locales/*.json dosyalarında.
    Neden önemli
    Adsız bir çöp kutusu ikonu ekran okuyucuda yalnızca "buton" diye okunur. Müşteri neyi sildiğini bilemez.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    EvetOtomatik bulunurAdı olmayan buton ve alanları doğrudan raporlarız. Not: boş sepetle taradığımız için ürün satırlarını yalnız sepet sayfası şablonda görünürse görürüz.

  11. Ödeme

    Ödeme sayfası baştan sona klavyeyle tamamlanabiliyor; hata mesajları metinle ve alanın yanında.

    Nasıl kontrol edilir
    Gerçek ya da test siparişiyle ödemeye gidin. Bir alanı boş bırakıp devam edin: hata hangi alanda, ne diyor? Kart alanlarına Tab ile girilebiliyor mu?
    Nerede düzeltilir
    Ödeme çekirdeği Shopify'da: sorun Shopify'ın kendi alanlarındaysa Shopify desteğine bildirin. Renk ve yazı tipi: Shopify yönetimi > Settings > Checkout > özelleştirme (marka) ekranı. Ödeme uzantısı ya da uygulamayla eklediğiniz alanlar sizin ve uygulama geliştiricinizin sorumluluğunda.
    Neden önemli
    ACM'nin Mart 2026 testinde engellerin başında ödeme butonları vardı. Ödeme çalışmıyorsa diğer düzeltmelerin satışa etkisi olmaz.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirShopify boş sepetle ödeme sayfasını açmaz, sepete yönlendirir. Bu adımları taramıyoruz; elle kontrol listesinde.
    Kaynak

  12. Hesap ve formlar

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

    Nasıl kontrol edilir
    Giriş ve kayıt sayfasını ekran okuyucuyla, çerezleri temizlenmiş bir tarayıcıda deneyin. Görsel bulmaca çıkıyorsa sesli ya da başka bir alternatifle geçilebiliyor mu?
    Nerede düzeltilir
    Online Store > Preferences > Spam protection. hCaptcha iletişim/yorum formları ve giriş/kayıt/şifre sayfaları için ayrı ayrı açılıp kapatılır. Kapatmak spam riskini artırır; kararı test sonucuna göre verin.
    Neden önemli
    Captcha, ACM testinde ödeme butonlarıyla birlikte en sık engellerden biriydi. Görsel bulmacayı geçemeyen müşteri hesap açamaz.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirCaptcha'nın bulmaca gösterip göstermediği ziyaretçiye göre değişir; otomatik testle karar verilemez.
    Kaynak

  13. Tema

    Otomatik dönen slaytlar durdurulabiliyor.

    Nasıl kontrol edilir
    Ana sayfa slaytı kendiliğinden dönüyorsa görünür bir durdur butonu var mı? Klavyeyle erişilebiliyor mu?
    Nerede düzeltilir
    Online Store > Themes > Customize > Slideshow bölümü > otomatik döndürme ayarı (Dawn'da "Auto-rotate slides"). Gerek yoksa kapatın; açık kalacaksa durdur butonunun çalıştığını kontrol edin.
    Neden önemli
    Hareket eden içerik dikkat sorunu yaşayan kullanıcıyı sayfadan koparır; ekran okuyucu daha okumadan slayt değişir.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    HayırElle kontrol gerekirOtomatik testler yalnız eski blink/marquee etiketlerini yakalar. Slayt davranışı elle kontrol edilir.

  14. Kategori ve arama

    Koleksiyon filtreleri etiketli; filtre seçince sayfa beklenmedik biçimde değişmiyor, sonuç sayısı duyuruluyor.

    Nasıl kontrol edilir
    Bir koleksiyonda filtreyi klavyeyle seçin. Odak kayboluyor mu? Ekran okuyucu yeni sonuç sayısını söylüyor mu?
    Nerede düzeltilir
    snippets/facets.liquid (Dawn). Üçüncü taraf bir filtre uygulaması kullanıyorsanız sorun uygulamada olabilir; geliştiricisine bildirin.
    Neden önemli
    Filtre seçince odak sayfanın başına atlıyorsa müşteri her seçimde yolunu yeniden bulmak zorunda kalır.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleEtiketi olmayan filtre kutularını buluruz. Seçim sonrası davranış etkileşim ister; elle kontrol.

  15. Tüm sayfalar

    Uygulamaların eklediği pop-up, sohbet ve yorum alanları klavyeyle kullanılabiliyor ve kapatılabiliyor.

    Nasıl kontrol edilir
    Bülten pop-up'ı açıldığında odak içine geçiyor mu, kapat butonunun adı var mı, Esc ile kapanıyor mu? Sohbet balonu odak sırasında sona mı geliyor?
    Nerede düzeltilir
    Online Store > Themes > Customize > App embeds bölümünden hangi uygulamaların açık olduğunu görün. Sorun uygulamanın kodundaysa tema dosyasında düzeltilmez; geliştiriciye bildirin, düzelmiyorsa alternatif arayın.
    Neden önemli
    Kapatılamayan bir pop-up, klavye kullanıcısı için mağazanın tamamını kapatır.
    WCAG
    Kapsam
    • EAA
    • Genelge
    AccessibleOrNot bunu otomatik bulur mu?
    KısmenBir kısmı otomatik, kalanı elleTaramada görünen pop-up'ların adsız butonlarını buluruz. Çerez banner'ını kapatarak tararız; zamanlı açılan pop-up'ları her zaman yakalayamayı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

  • Shopify temaları zaten erişilebilir değil mi?

    Shopify'ın tema mağazası için erişilebilirlik yönergeleri var. Ama Shopify'ın kendisi, bu yönergelere uymanın mağazanın tamamen erişilebilir olduğunu garanti etmediğini yazıyor. Özelleştirmeleriniz, uygulamalarınız ve içeriğiniz (alt metin, renkler) sonucu değiştirir.

    Shopify Yardım, tema erişilebilirliği

  • Ödeme sayfasındaki sorunu ben düzeltebilir miyim?

    Kısmen. checkout.liquid artık ödeme adımlarında çalışmıyor. Renk ve marka ayarları sizde; Plus planında ödeme uzantılarıyla eklediğiniz alanlar da sizde. Shopify'ın kendi alanlarındaki sorunu Shopify'a bildirmeniz gerekir.

    Shopify.dev, checkout.liquid

  • Bir erişilebilirlik uygulaması kurmak yetmez mi?

    Sayfanın üstüne katman ekleyen uygulamalar tema kodunu değiştirmez. ABD Federal Ticaret Komisyonu, "her siteyi WCAG'ye uyumlu yapar" iddiasını kanıtsız bulup Nisan 2025'te accessiBe'ye 1 milyon $ ödeme kararı verdi. Bu listedeki maddeler temada ve içerikte düzeltilir.

    FTC, Nisan 2025

  • Dawn kullanmıyorum. Dosya adları yine geçerli mi?

    Online Store 2.0 temalarının çoğu benzer bir yapı kullanır: layout/theme.liquid, sections/ altında ürün ve sepet bölümleri, snippets/ altında parçalar. Adlar farklı olabilir; tema düzenleyicideki bölüm adından dosyayı bulabilirsiniz.

  • 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, tema kodunuza erişmeyiz.

    Güvenlik

İlgili sayfalar

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