Temalar için erişilebilirlik

Bu sayfanın yazdırılma zamanı: Oct 30, 2023. Geçerli sürüm için https://help.shopify.com/tr/manual/online-store/themes/customizing-themes/accessibility adresini ziyaret edin.

马提幔ızıozelleştirirken,在线ğ祈祷的召唤ızın eriş我lebilir halde kalmasına yardımcı olacak tasarım ve içerik tercihleri yapın. Erişilebilir bir web sitesi, engelli kişiler de dahil olmak üzere herkes tarafından kullanılabilecek şekilde tasarlanır. Online mağazanız için erişilebilirliği göz önünde bulundurarak tercih yapmanız tüm müşterilerinize kapsayıcı bir deneyim sunmanıza yardımcı olabilir.

Aşağıdaki yönergelerWebİceriğ我Erişilebilirlik Yonergeleri (WCAG)göz önünde bulundurularak oluşturulmuştur. Erişilebilir bir web sitesi oluştururken dikkate alınması gereken çok sayıda faktör söz konusu olduğundan, yalnızca aşağıdaki yönergelerin izlenmesi online mağazanızın tamamen erişilebilir olacağını garanti etmez. WCAG web sitesini ziyaret ederek veyaaşağıda listelenen kaynaklaragöz atarak web erişilebilirliği hakkında daha fazla bilgi edinebilirsiniz.

İpucu: Geliştiriciyseniz Shopify araçlarından ve en iyi uygulamalarından yararlanarak erişilebilirlik için temanızda daha ileri düzeyde optimizasyon yapabilirsiniz.Shopify.dev'den daha fazla bilgi edinin.

Bu sayfada

Metin erişilebilirliği

辊筒ine mağazanızdaki metinlerin, görme engelli müşteriler veya yoğun metin blokları okuma konusunda güçlük yaşayan kişiler için okunabilir olması önemlidir.

Renk kontrastı

辊筒ine mağazanızın renklerini düzenlerken tüm metinlerinizin, renk körü veya görme engelli müşteriler için erişilebilir olduğundan emin olun. Bu müşteriler bir şeyi diğerinden görsel olarak ayırt etmek için yeterli düzeydeki renk kontrastından yararlanır. Mağazanızın farklı bölümlerindeki kontrastı kontrol etmek için online birkontrast oranı aracıkullanabilirsiniz.

Aşağıdaki örnekte metnin, arka planıyla 2.4:1 oranında bir kontrastı vardır ve bu metni okumak bazı müşteriler için zordur.

Açık gri metin bloğu ve düz beyaz arka plan.

Sonraki örnekte, metnin kontrast oranı 4,8:1'dir ve bu metin çoğu müşteri tarafından daha kolay bir şekilde okunabilir.

Düz beyaz arka planda koyu gri metin bloğu.

Gövde metinleri, başlıklar, bağlantılar ve form alanları da dahil olmak üzere tüm metinlerin kontrastlığını test edin. Aşağıdaki yönergeleri kullanın:

  • Gövde metninin ve düğme metninin rengi, arka planıyla en az 4.5:1 oranında bir kontrasta sahiptir.
  • Başlıkların ve diğer büyük (yazı tipi boyutu 24 piksel ve üzeri) metinlerin rengi, arka planıyla en az 3:1 oranında bir kontrasta sahiptir.
  • Slayt gösterileri, banner'lar ve videolar da dahil olmak üzere görsellerin üzerindeki tüm metinlerin rengi, arka planıyla yeterli kontrast oranlarına sahiptir. Büyük (yazı tipi boyutu 24 piksel ve üzeri) metinler için kontrast oranı en az 3:1'dir. Daha küçük metinler için kontrast oranı en az 4.5:1'dir.
  • Giriş kenarlıkları ve simgeler de dahil olmak üzere metin harici öğelerin rengi, arka planıyla en az 3:1 oranında bir kontrasta sahiptir.

İpucu: Bazı temalarda, metnin kontrastını ve okunurluğunu iyileştirmek için metin ile görsel arasında renk katmanı ekleyebilirsiniz.

Metin başlıkları

Sayfanızazengin metin düzenleyicisiile başlıklar eklerken bunların sıralı düzende (1-6) tutulması önemlidir. Başlıklar, yardımcı teknolojiler tarafından, sayfa içeriğinin düzenlenme biçimini iletmek için kullanılır. Düzeylerin atlanması (başlık düzeyi 2'den sonra başlık düzeyi 4'ün gelmesi gibi) kullanıcılar açısından kafa karıştırıcı olabilir. Aşağıdaki yönergeyi kullanın:

  • Başlıklar sıralı düzende kullanılır ve düzey atlanmaz.

Metin boyutu ve hizalaması

Temanızın tipografi ayarlarını düzenlerken metninizin, müşterilerin rahatça okuyabileceği genişlikte olduğundan emin olun.

Metnin kolayca okunabilmesi için sözcükleri ile harfleri arasında da tutarlı düzeyde boşluk bulunması gerekir. Aşağıdaki örnekte, iki yana yaslı şekilde metin hizalaması sözcükler arasında tutarsız boşluk kullanımına neden olmaktadır.

İki雅娜yaslıolarak hizalanmışmetin鼓风机ğu。她的bir metin satırı, alanı uçtan uca doldurur. Metni sığdırmak için sözcükler arasında farklı boyutlarda boşluklar kullanılır.

Bir sonraki örnekte sola yaslı şekilde metin hizalaması sözcükler arasında tutarlı bir boşluk kullanımı yaratır.

Sola yaslı olarak hizalanmış metin bloğu. Her bir sözcük arasında tutarlı boşluk vardır.

Metin boyutunu ve hizalamasını özelleştirirken aşağıdaki yönergeleri kullanın:

  • Gövde metni için minimum yazı tipi boyutu 16 piksele eş değerdir.
  • Metinler için iki yana yaslı hizalama kullanılmamalıdır. İki yana yaslı metin, sözcükler arasında tutarsız boşluk kullanımına neden olur.

Not: Farklı yazı tipleri, aynı yazı tipi boyutuna sahip olsa bile birbirinden küçük veya büyük görünebilir. Kullandığınız yazı tipi 16 pikselde diğer yazı tiplerinden daha küçük görünüyorsa daha büyük bir boyut kullanın.

Metin bağlantıları

Metninize bağlantılar eklerken bu bağlantıların tüm müşterileriniz tarafından fark edilebileceğinden emin olun. Bazı müşteriler renkleri görme konusunda sorun yaşadığından, bir bağlantıyı normal metinden ayırt etmek için yalnızca farklı renkler kullanmanız önerilmez. Metnin bir bağlantı olduğunun belirtilmesi için yalnızca farklı renkler kullanılmasındansa, ilgili kısmın altı çizilmelidir.

Temanızın stil sayfasını düzenliyorsanız metin bağlantısı stillerini kaldırmadığınızdan emin olun. Aşağıdaki yönergeyi kullanın:

  • Metin bağlantılarının altı çizilidir veya bu bağlantılar, normal metinden ayırt edilebilecekleri görsel bir özelliğe sahiptir.

Görseller için alternatif metin

辊筒ine mağazanıza görseller eklediğinizde bunlara görme engelli veya görme bozuklukları olan müşterilerin erişebilmesini sağlamanız önemlidir. Her bir görseli doğru şekilde açıklayan alternatif metin ekleyerek bunu yapabilirsiniz. Ekran okuyucuları kullanan müşteriler online mağazanızdaki görsellerin içeriğini öğrenmek için alternatif metinden yararlanır.

Shopify yöneticisindenürün görsellerinize alternatif metin ekleyebilirsiniz. Tema düzenleyicisindentemanızdaki diğer görsellere alternatif metin ekleyebilirsiniz.

Bir görsele alternatif metin eklerken, görseli gözleri kapalı birisine açıklıyormuş gibi yapmak faydalı bir uygulama olabilir. Zihinlerinde bir görsel oluşturmalarına yardımcı olun. Bir görseli açıklama biçiminiz, web sayfanızın bağlamına da bağlıdır. Örneğin, işletmenizin seyahat acentesi olması durumunda bir görseli açıklama biçiminiz, açık hava ekipmanları mağazası işletiyor olmanız durumunda bir görseli açıklama biçiminizden farklı olabilir. Aşağıdaki görseli düşünün:

Sırt çantası takmış ve kollarını birbirinin omzuna atmış, okyanusa bakan iki arkadaş

Bir seyahat acentesi için, iki arkadaşın seyahat ettiği ülkenin ve bölgenin yanı sıra baktıkları okyanusun veya denizin adını düşünebilirsiniz. Diğer taraftan, açık hava ekipmanları mağazası için, iki arkadaşın sırt çantalarının markalarına ve özelliklerine odaklanabilirsiniz.

İşletmeniz bir seyahat acentesiyse, yetersiz bir alternatif metne örnek olarak "Okyanusun önünde iki kişi" ifadesi verilebilir. Aynı acente için iyi bir alternatif metin örneği olarak "Lagos, Portekiz'de seyahat eden ve güneşli bir günde Praia do Camilo koyuna bakan iki arkadaş" ifadesi verilebilir.

Slayt gösterisi ve video erişilebilirliği

辊筒ine mağazanıza video eklerken, görme bozuklukları olan müşterilerin, işitme engelli veya işitme güçlüğü yaşayan müşterilerin ya davestibüler rahatsızlıklaraduyarlı müşterilerin gereksinimlerini göz önünde bulundurduğunuzdan emin olun.

Bu müşterilerin bir kısmı, ekran okuyucuların, web sayfalarındaki içerikleri yüksek sesle okuyanmetin okuma özelliğindenyararlanır. Videolardaki ve müziklerdeki fazladan sesler, özellikle beklenmedik olduğunda bu deneyimi zorlaştırabilir. İşitme engelli veya işitme güçlüğü yaşayan müşteriler için videolarınıza alt yazı ekleyerek bu müşterilerin içeriğe erişebilmesini sağlamanız önerilir.

Vestibüler rahatsızlıkları olan müşteriler, hareket eden içerik nedeniyle baş dönmesi yaşayabilir. Bu nedenle, slayt gösterilerinin ve videoların otomatik olarak oynatılmaması önemlidir.

Slayt gösterileri

辊筒ine mağazanıza slayt gösterisi eklerken aşağıdaki yönergeleri kullanın:

  • Slayt gösterileri otomatik olarak oynatılmamalıdır.
  • Slayt gösterileri otomatik olarak oynatılıyorsa müşterilerin, slayt gösterisini duraklatmak veya durdurmak için kullanabileceği bir ayar içerir.

Videolar

辊筒ine mağazanıza video eklerken aşağıdaki yönergeleri kullanın:

  • Videolar otomatik olarak oynatılmamalıdır.
  • Videolar otomatik olarak oynatılıyorsa videoların sesi kapatılmalıdır.
  • Ses içeren videolarda, video tamamen görünür durumda olmalı ve diğer sayfa öğeleri tarafından engellenmemelidir. Bu, alt yazıların görünür halde kalmasını sağlar.
  • Diyalog içeren videolar için metin transkriptleri kullanılabilir. Bunlar sayfaya veya ayrı bir sayfanın bağlantısına eklenir.

Bu yönergeler bir slayt gösterisinde bulunan videolar için de geçerlidir.

Klavye desteği

Görme veya motor bozukluğu olan müşteriler, internette görevlere gidip bu görevleri tamamlamak için klavye kullanıyor olabilir. Bu müşteriler klavyelerinin odağının bir web sayfasının hangi noktasında olduğunu belirlemek için görsel belirteçten yararlanır. Aşağıdaki örnekteEmail(E-posta) alanında bir görsel odak belirteci vardır.

Bir online mağazada Email (E-posta) ve Password (Parola) için form alanlarını gösteren bir müşteri giriş ekranı. Email (E-posta) alanının hatları mavi renktedir.

Temanızın stil sayfasını düzenlerseniz sayfa öğelerinden klavye odağı stilini kaldırmadığınızdan emin olun. Aşağıdaki yönergeyi kullanın:

  • Tüm etkileşimli sayfa öğelerinin, klavye odağındayken net bir görsel belirteci bulunur. Bu öğeler bağlantıları, düğmeleri ve form alanlarını içerir.

Kaynaklar

Bu makalede bahsedilen konulara yönelik web erişilebilirliği hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın.

Renk kontrastı kaynakları

Metin kaynakları

Alternatif metin kaynakları

Slayt gösterisi ve video kaynakları

Klavye desteği kaynakları

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene