Erişilebilirlik ve performans

Tenora herkes tarafından kullanılabilecek ve telefonlarda hızlı yüklenecek şekilde geliştirilmiştir. Bu sayfada temanın sizin için neler yaptığı ve mağazanızı erişilebilir ve hızlı tutmak için neler yapabileceğiniz açıklanır.

Temanın erişilebilirlik için yaptıkları

Tenora, her şablonda otomatik kontroller ve klavye testleriyle Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.2, AA seviyesine göre test edilmiştir.

Klavye kullanımı

• Tüm bağlantılar, düğmeler, menüler, çekmeceler ve formlar yalnızca klavyeyle kullanılabilir.
• Çekmeceler (menü, sepet, filtreler, teslim alma konumları, ülke ve dil) açıkken klavye odağını içeride tutar. Esc tuşu çekmeceleri kapatır ve odak önceki yerine döner.
• Odadan alışveriş noktaları, "Sığar mı?" formu, görsel yakınlaştırma ve cm/in geçişi klavyeyle çalışır.
• Müşteri sepetten bir ürünü kaldırdığında odak sonraki ürüne veya sepet başlığına geçer.

Görünür odak

Müşteri sayfada Tab tuşuyla ilerlediğinde odaktaki öğenin belirgin bir dış çizgisi olur. Odak sırası sayfanın sırasını izler.

Atlama bağlantısı

Müşteri Tab tuşuna ilk kez bastığında bir İçeriğe atla bağlantısı görünür. Bu bağlantı üstbilgiyi atlayarak sayfanın ana içeriğine geçer.

Azaltılmış hareket

Bazı kişiler cihazlarında "hareketi azalt" ayarını açar. Tema bu müşteriler için:

• bölümlerin belirerek görünmesi gibi animasyonları ve geçişleri kapatır
• duyuru çubuğunun otomatik dönüşünü durdurur
• yumuşak kaydırmayı kapatır

Renk kontrastı

• Tenora, Terrace ve Lantern ön ayarlarındaki tüm metin ve arka plan renkleri en az 4.5:1 kontrast oranını karşılar (WCAG AA). Kenarlıklar ve simgeler en az 3:1 oranını karşılar.
• Hata ve başarı mesajları, renk şemasının metin rengini renkli bir simgeyle birlikte kullanır. Her renk şemasında okunabilir kalır.
• Renkleri değiştirirseniz metin ile arka plan arasında en az 4.5:1 kontrast oranını koruyun. Bir renk çiftini herhangi bir çevrim içi kontrast denetleyicisiyle kontrol edebilirsiniz.

Ekran okuyucular

• Sayfalar; üstbilgi, ana içerik ve altbilgi gibi doğru başlıklar ve yer işaretleri kullanır.
• Fiyatlar, birim fiyatlar, indirimli fiyatlar ve stok durumları ekran okuyucular için net etiketlere sahiptir.
• "Sığar mı?" sonuçları ve ülke aramasında bulunan ülke sayısı sesli olarak bildirilir.
• Düğmelerin ve form alanlarının, çevrilmiş 30 dil dahil, etiketleri vardır.
• Dokunma hedefleri en az 24 x 24 pikseldir.

Metin yönü ve dil

Sayfa dili ve metin yönü vitrin dilinden gelir. Sağdan sola yazılan diller otomatik olarak yansıtılır. Küresel satış sayfasına bakın.

Sizin yapabilecekleriniz: alternatif metin

Alternatif metin (alt metin), bir görseli göremeyen kişiler için o görseli tanımlar. Ekran okuyucular onu sesli okur, arama motorları da onu kullanır.

Alternatif metin nereye eklenir?

• Ürün görselleri: Shopify yöneticisinde bir ürün açın, bir görsel seçin ve Alternatif metin ekle (Add alt text) seçeneğini seçin.
• Bölümlerdeki ve dosyalardaki görseller: İçerik (Content) → Dosyalar (Files) bölümüne gidin, görseli seçin ve alternatif metnini düzenleyin.
• Koleksiyon görselleri: koleksiyonu Shopify yöneticisinde açın ve görseli düzenleyin.

İyi bir alternatif metin nasıl yazılır?

• Görselin neyi gösterdiğini ve neden önemli olduğunu anlatın. Örneğin: "Aydınlık bir odada altı keten sandalyeli meşe yemek masası".
• Kısa tutun, genellikle tek cümle yeterlidir.
• "Görseli" veya "Fotoğrafı" gibi ifadelerle başlamayın.
• Renk, malzeme veya boyut gibi müşterilerin seçim yapmasına yardımcı olan ayrıntıları ekleyin.
• Görsel yeni bir şey eklemiyorsa ürün başlığını tekrarlamayın. Bunun yerine görünümü anlatın, örneğin "İnce meşe ayakları gösteren yandan görünüm".

Temanın otomatik olarak yaptıkları

• Alternatif metni olmayan ürün görselleri, ürün galerisinde ürün başlığını kullanır.
• Malzeme ve bakım kartlarındaki malzeme görselleri ve başlığının yanındaki numune görseli gibi bazı görseller dekoratiftir. Yanlarındaki metin onları zaten adlandırdığı için tema bunları ekran okuyuculardan gizler.
• Logo görselinin alternatif metni yoksa logo, mağaza adını kullanır.

Temanın hız için yaptıkları

• Sayfalar sunucuda oluşturulur. Tema az miktarda JavaScript kullanır ve her bölüm kendi komut dosyasını yalnızca sayfada o bölüm varsa yükler. Örneğin "Sığar mı?" komut dosyası yalnızca ölçüleri olan ürünlerde yüklenir.
• Ürün sayfası ve filtre stilleri gibi sayfaya özel stiller yalnızca bunları kullanan sayfalarda yüklenir.
• Görseller birkaç boyutta yüklenir. Böylece her cihaz ihtiyaç duyduğu boyutu indirir. İlk ekranın altındaki görseller yalnızca müşteri onlara yaklaştığında yüklenir.
• Sayfadaki ilk büyük görsel (örneğin görsel banner) önce yüklenir. Böylece sayfa daha erken hazır görünür.
• YouTube ve Vimeo videoları yalnızca müşteri onları oynattığında yüklenir.
• İlgili ürünler, müşteri onlara yaklaştığında yüklenir.
• Yazı tipleri Shopify yazı tipi kitaplığından gelir ve yazı tipi yüklenirken metin hemen gösterilir.

Sizin yapabilecekleriniz: mağazanızı hızlı tutun

Doğru görsel boyutlarını kullanın

Shopify görselleri her cihaz için yeniden boyutlandırır, ancak iyi bir orijinal görsel fark yaratır. Şu boyutları kullanın:

Yer	Önerilen boyut
Görsel banner	2400 x 1350px .jpg
Görsel banner, mobil görsel (isteğe bağlı)	1080 x 1350px .jpg
Metinli görsel	1500 x 1875px .jpg
Odadan alışveriş	3:2 oran, örneğin 2400 x 1600px .jpg
Mega menü tanıtımı	4:3 oran
Video kapak görseli	16:9 oran
Ürün görselleri	En uzun kenarda en az 2000px, tümü aynı oranda
Logo listesi	Şeffaf .png veya .svg
Favicon	32 x 32px .png

İpuçları

• Fotoğraflar için .jpg, logolar için .png veya .svg kullanın.
• Fotoğrafları yüklemeden önce sıkıştırın. Fotoğraf başına 500 KB'ın altını hedefleyin.
• Önemli görsellerde bir odak noktası belirleyin. Tema düzenleyicide görseli seçin ve odak noktasını belirleyin. Tenora görseli kırparken bunu kullanır.

Daha az uygulama yükleyin

Birçok uygulama, siz görmeseniz bile her sayfaya kendi komut dosyalarını ve stillerini ekler. Bu, mağazanızı yavaşlatabilir.

• Tenora ölçüleri, "Sığar mı?" özelliğini, malzemeleri, numuneleri, teslimat bilgilerini ve Odadan alışveriş bölümünü zaten içerir. Bu özellikler için bir uygulamaya ihtiyacınız yoktur.
• Kullanmadığınız uygulamaları kaldırın. Bir uygulamayı kaldırdıktan sonra temanızda kod bırakıp bırakmadığını kontrol edin. Bıraktıysa uygulama geliştiricisiyle iletişime geçin.
• Bir uygulama yüklemeden önce mağazanızın hızını kontrol edin. Yükledikten sonra yeniden kontrol edin.

Videoları dikkatli kullanın

• Video bölümüne bir Kapak görseli ekleyin. Kapak görseli, müşteri videoyu oynatana kadar gösterilir ve oynatıcı ancak o zaman yüklenir.
• Shopify'da barındırılan videoları kısa tutun ve makul bir dosya boyutu kullanın.
• Bir görsel aynı işi görebiliyorsa ana sayfadaki ilk öğe olarak video kullanmayın. Görseller daha hızlı yüklenir.

Ana sayfayı odaklı tutun

Her bölüm, indirilecek içerik ekler. Müşterilere en çok yardımcı olan bölümleri kullanın ve ihtiyacınız olmayanları kaldırın.

Hızınızı kontrol edin

Shopify yöneticinizde Online Mağaza (Online Store) → Temalar (Themes) bölümüne gidin ve mağazanızın hız raporuna bakın. Yeni uygulamalar veya yeni ana sayfa bölümleri gibi büyük değişikliklerden sonra hızı kontrol edin.