Erişilebilirlik uzun süre etik ve dönüşüm üzerinden tartışıldı. AB'ye satış yapan için artık bir uyum sorusu da: Avrupa Erişilebilirlik Yasası e-ticaret hizmetlerini kapsama alıyor ve işaret ettiği standart tanıdık olan — WCAG AA seviyesi.
Bir Shopify mağazası için bu kulağa geldiğinden daha az dramatik. Açığın çoğu az sayıda tekrar eden hatada ve bunların çoğu tema düzeyinde; yani tek düzeltme tüm kataloğu kapsıyor.
Shopify mağazaları nerede kalıyor?
Renk kontrastı. Hem en yaygın hata hem yanlışlıkla en kolay üretileni — tasarımcının kalibre ekranında seçilmiş bir marka paleti, beyaz zemine küçük gri metin olarak uygulanıyor. En çok fiyat, ürün başlığı ve form etiketlerinde acıtıyor.
Anlamlı alternatif metni olmayan görseller. Ürün fotoğrafının alt metni ürünü anlatmalı; dosya adını veya stok kodunu değil. Üç bin ürünü olup alt niteliği boş bir mağaza ölçekli biçimde kalıyor ve görsel arama trafiğini de kaybediyor.
Etiketsiz form alanları. Bülten kayıtları, arama kutuları ve checkout çevresindeki formlar sık sık placeholder metnini etiket yerine kullanıyor. Placeholder odaklanınca kayboluyor ve güvenilir biçimde okunmuyor.
Katmanlardaki klavye tuzakları. Fareyle açılıp klavyeyle kapatılamayan ya da odağın arkasına kaçmasına izin veren sepet çekmeceleri, filtre panelleri ve modallar. Sepet çekmecesi olan her mağaza bunu test etmeli ve çoğu hiç denememiş.
Durdurulamayan karuseller ve otomatik hareket. Kendi kendine hareket eden bir şeyin kontrolü olmalı ve ziyaretçinin hareket azaltma tercihine uymalı.
Uygulama sorunu
Bir mağaza kendi kodunda denetimi geçip yüklediği uygulamalar yüzünden kalabiliyor. Yorum bileşenleri, açılır pencereler, sohbet başlatıcıları ve çerez bantları olağan kaynaklar; hepsi temanın dışında olduğu için tema düzeyindeki düzeltmeden kaçıyorlar.
Testi uygulamalar çalışırken yapın, temiz temada değil. Hata bir uygulamadaysa ve sağlayıcı düzeltmiyorsa bu bir geliştirme değil tedarik kararına dönüşüyor.
Baştan yazmadan nasıl yaklaşılır
Mekanik hataları bulmak için otomatik bir taramayla başlayın — kontrast, eksik etiket, eksik alt metin, başlık yapısı. Otomatik araçlar gerçek sorunların belki üçte birini buluyor ama o üçte bir hem en ucuz hem en sistematik olanı.
Sonra önemli yolları yalnızca klavyeyle geçin: ürün bul, sepete ekle, checkout'a var. Fare olmadan ilerleyemediğiniz her nokta, otomatik araçların raporlamadığı bir hata.
Mümkün olan her yerde tema düzeyinde düzeltin. Bir kez düzeltilen kontrast token'ı her sayfaya uygulanıyor; sayfa başına düzeltme bakım yükü.
Uyumla ilgili olmayan kısım
Erişilebilirlik çalışması neredeyse tamamen her ziyaretçiye yarayan şeylerle örtüşüyor. Düzgün etiketler otomatik doldurmaya yarıyor. Alt metin görsel aramasına yarıyor. Güvenilir klavye davranışı, kendi JavaScript'iyle boğuşmayan bir mağazanın işareti.
Arama motorları da yardımcı teknolojinin okuduğu yapıyı okuyor. Tutarlı başlık hiyerarşisi, gerçek etiketler ve açıklayıcı alt metni olan bir mağaza hem tarayıcı hem yanıt motoru için daha kolay.