Yardım
Oturum aç

Temalar için erişilebilirlik

Temanızı özelleştirirken online mağazanızın erişilebilir kalmasına yardımcı olacak tasarım ve içerik seçimleri yapın. Erişilebilir bir web sitesi, engelliler 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 seçimler yapmak, tüm müşterilerinize kapsayıcı bir deneyim sunmanıza yardımcı olabilir.

Aşağıdaki yönergeler Web İçeriği Erişilebilirlik Yönergeleri (WCAG) dikkate alınarak oluşturulmuştur. Erişilebilir bir web sitesi oluştururken dikkate alınması gereken birçok faktör olduğundan, yalnızca aşağıdaki yönergeleri izlemek online mağazanızın tam olarak erişilebilir olacağını garanti etmez. Web erişilebilirliği hakkında daha fazla bilgi edinmek için WCAG web sitesini ziyaret edebilir veya aşağıda listelenen kaynaklara göz atabilirsiniz.

Bu sayfada

Metin erişilebilirliği

Online mağazanızdaki metinlerin, görme bozukluğu olan veya yoğun metin bloklarını okumakta zorlanan müşteriler için okunabilir olması önemlidir.

Renk kontrastı

Online mağazanızın renklerini düzenlerken tüm metinlerinizin, renk körü olan veya başka bir görme bozukluğu bulunan 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 renk kontrastına ihtiyaç duyar. Mağazanızın farklı bölümlerinin kontrastını kontrol etmek için online bir kontrast oranı aracı kullanabilirsiniz.

Aşağıdaki örnekte metnin, arka planına göre kontrast oranı 2,4:1'dir ve bazı müşteriler için okunması zordur.

Düz beyaz arka plan üzerinde açık gri bir metin bloğu.

Sonraki örnekte metnin kontrast oranı 4,8:1'dir ve çoğu müşteri için okunması daha kolaydır.

Düz beyaz bir arka plan üzerinde koyu gri bir metin bloğu.

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

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

Metin başlıkları

Sayfanıza zengin metin düzenleyicisini kullanarak başlık eklerken bunları sıralı düzende (1-6) tutmanız önemlidir. Başlıklar, sayfa içeriğinin nasıl düzenlendiğini bildirmek için yardımcı teknolojiler tarafından kullanılır. Başlık düzeyi 2'den sonra başlık düzeyi 4'e geçmek gibi düzey atlamak, kullanıcıların kafasını karıştırabilir. Aşağıdaki yönergeyi izleyin:

  • Başlıklar sıralı düzende kullanılır ve düzeyler arasında atlama yapılmaz.

Metin boyutu ve hizalama

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

Ayrıca metinlerin kolay okunabilmesi için sözcükler ve harfler arasında tutarlı boşluklar olmalıdır. Aşağıdaki örnekte metin, iki yana yaslı olarak hizalanmıştır. Bu da sözcükler arasında tutarsız boşluklar yaratır.

İki yana yaslanmış bir metin bloğu. Metnin her satırı, alanı uçtan uca doldurur ve bu durum, metni sığdırmak için sözcükler arasında değişken boşluklar bırakılmasına neden olur.

Sonraki örnekte ise metin sola hizalanmıştır ve bu da sözcükler arasında tutarlı boşluklar oluşturur.

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

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

  • Gövde metni için minimum yazı tipi boyutu 16 piksele eş değerdir.
  • Metin hizalaması iki yana yaslı değildir. İki yana yaslı metinler, sözcükler arasında tutarsız boşluklar oluşturur.

Metin bağlantıları

Metin bağlantıları, normal metne kıyasla altı çizili veya görsel olarak farklı başka bir stilde olmalıdır. Bazı müşteriler renkleri görmede zorluk yaşadığından, bir bağlantıyı normal metinden ayırmak için yalnızca renk değişikliğine güvenemezsiniz.

Metin bağlantıları aynı sekmede açılmalıdır. Yeni bir sekmede veya pencerede açılan bağlantılar, özellikle de eski pencerenin görünür olmadığı mobil cihazlarda kafa karışıklığına neden olabilir ve özellikle ekran büyütme özelliği kullanan veya teknik bilgisi daha az olan müşteriler için kapsayıcı bir deneyim sunmaz.

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

  • Metin bağlantıları, müşterilerin bağlantıları normal metinden ayırt edebilmesi için altı çizilidir veya yalnızca renkten ibaret olmayan başka bir görsel ayırt ediciye sahiptir.
  • Tıklandığında metin bağlantıları aynı sekmede açılır.

Görseller için alternatif metin

Online mağazanıza görsel eklerken bunları, görme engelli veya az gören müşteriler için erişilebilir kılmanız önemlidir. Bunu, her görseli doğru bir şekilde açıklayan alternatif metinler ekleyerek yapabilirsiniz. Ekran okuyucu kullanan müşteriler, online mağazanızdaki görsellerin içeriğini anlamak için alternatif metinlerden 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ı birine anlatıyormuş gibi davranmak iyi bir yöntemdir. Zihinlerinde bir resim oluşturmalarına yardımcı olun. Bir görseli açıklama şekliniz, web sayfanızın bağlamına da bağlıdır. Örneğin, işletmeniz bir seyahat acentesiyse görseli farklı, bir outdoor ekipmanları mağazasıysa farklı şekilde açıklayabilirsiniz. Aşağıdaki görseli ele alalım:

Birbirlerine sarılmış, sırt çantalı iki arkadaş okyanusa bakıyor.

Bir seyahat acentesi için iki arkadaşın seyahat ettiği ülke ve bölgeden ve baktıkları okyanusun veya denizin adından bahsedebilirsiniz. Öte yandan, bir outdoor ekipman mağazası için iki arkadaşın sırt çantalarının markalarına ve özelliklerine odaklanabilirsiniz.

İşletmeniz bir seyahat acentesiyse kötü bir alternatif metin örneği, "Okyanusun önünde iki kişi" olabilir. Aynı acente için iyi bir alternatif metin örneği ise "Güneşli bir günde Portekiz'in Lagos kentinde seyahat eden, Praia do Camilo'nun kumlu koyuna bakan iki arkadaş" olabilir.

Slayt gösterisi ve video erişilebilirliği

Online mağazanıza videolar eklerken az gören müşterilerin, sağır veya işitme güçlüğü çeken müşterilerin ya da vestibüler bozukluklara yatkın olabilecek müşterilerin ihtiyaçlarını göz önünde bulundurduğunuzdan emin olun.

Bu müşterilerden bazıları, bir web sayfasının içeriğini yüksek sesle okuyan ekran okuyucuların metni sese dönüştürme özelliğinden yararlanır. Özellikle beklenmedik anlarda videolardan ve müziklerden gelen ek sesler bu deneyimi zorlaştırabilir. Sağır veya işitme güçlüğü çeken müşterilerin içeriğe erişebilmesi için videolarınıza gizli altyazı eklemek iyi bir fikirdir.

Vestibüler bozuklukları olan müşteriler, hareketli içerikler nedeniyle baş dönmesi yaşayabilir. Bu nedenle, slayt gösterilerinin ve videoların otomatik olarak oynatılmaması ve müşterinin, slayt gösterisini kontrol düğmeleriyle yönetebilmesi önemlidir.

Slayt gösterileri

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

  • Slayt gösterileri otomatik olarak oynatılmaz.
  • Slayt gösterileri otomatik olarak oynatılıyorsa müşterilerin bunları duraklatmak, ilerletmek veya durdurmak için kullanabileceği slayt gösterisi denetimleri içerir.

Videolar

Online mağazanıza bir video eklerken aşağıdaki yönergeleri izleyin:

  • Videolar otomatik olarak oynatılmaz.
  • Videolar otomatik olarak oynatılıyorsa sesleri kapalıdır.
  • Ses içeren videolarda, video tamamen görünürdür ve diğer sayfa öğeleri tarafından engellenmez. Bu, gizli altyazıların görünür kalmasını sağlar.
  • Diyalog içeren videolar için metin dökümleri mevcuttur. Bu dökümler, sayfada yer alır veya ayrı bir sayfaya yönlendiren bir bağlantıda sunulur.

Bu yönergeler, slayt gösterisindeki videolar için de geçerlidir.

Klavye desteği

Görme veya motor bozukluğu olan müşteriler, online gezinmek ve görevleri tamamlamak için klavye kullanabilir. Bu müşteriler, klavyelerinin odağının web sayfasında nerede olduğunu bildirmek için görsel bir göstergeye ihtiyaç duyar. Aşağıdaki örnekte, E-posta alanında görsel bir odak göstergesi bulunmaktadır:

Bir online mağazada E-posta ve Parola form alanlarını gösteren bir müşteri giriş ekranı. E-posta alanı mavi renkle vurgulanmıştır.

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

  • Tüm etkileşimli sayfa öğeleri, klavye odağındayken net bir görsel göstergeye sahiptir. Bu öğeler arasında bağlantılar, düğmeler ve form alanları bulunur.

Kaynaklar

Bu makalede ele alınan web erişilebilirliği konuları hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara başvurabilirsiniz.

Renk kontrastı kaynakları

Metin kaynakları

Alternatif metin kaynakları

Slayt gösterisi ve video kaynakları

Klavye desteği kaynakları

Bu bölümde