Temalar için erişilebilirlik

Temanızı özelleştirirken, online mağazanızın erişilebilir halde kalmasına yardımcı olacak tasarım ve içerik tercihleri yapmanız önerilir. Erişilebilir bir web sitesi, engelli kişiler de dahil olmak üzere herkes tarafından kullanılabilecek şekilde tasarlanır. Online mağazanızın erişilebilirliği, müşterilerinize kapsayıcı bir deneyim sunmada kritik önem taşır.

Aşağıdaki yönergeler Web İçeriği Erişilebilirlik Yönergeleri (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 veya aşağıda listelenen kaynaklara göz atarak web erişilebilirliği hakkında daha fazla bilgi edinebilirsiniz.

Metin erişilebilirliği

Online 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ı

Online 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 bir kontrast 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 kolayca 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ıza zengin metin düzenleyicisi ile başlıklar eklerken bunların sıralı düzende (1 - 6) tutulması önemlidir. Başlıklar, sayfa içeriğinin düzenlenme biçimini iletmek için yardımcı teknolojiler tarafından 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 yana yaslı olarak hizalanmış metin bloğu. Her 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.
  • Metin hizalaması iki yana yaslı olarak yapılmaz. İ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 renk değişikliğinden yararlanamazsınız. Aşağıdaki örnekte, metnin bir bağlantı olduğunun belirtilmesi için renk değişikliğinden yararlanılmadığından Discover our story (Öykümüzü keşfedin) metninin altı çizilidir:

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

Online 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üzenleyicisinden temanı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

Online mağazanıza video eklerken, görme bozuklukları olan müşterilerin, işitme engelli veya işitme güçlüğü yaşayan müşterilerin ya da vestibüler rahatsızlıklara duyarlı 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 okuyan metin okuma özelliğinden yararlanı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

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

  • Slayt gösterileri otomatik olarak oynatılmaz.
  • 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

Online 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 örnekte Email (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