Hyvä temalarında erişilebilirlik

Erişilebilirlik eskiden bir Magento proje planının en altında duran “olsa iyi olur” maddesiydi. Avrupa’da bu durum değişti. Avrupa Erişilebilirlik Yasası (European Accessibility Act) Haziran 2025’ten beri birçok online mağaza için geçerli ve pratik standart olarak WCAG yönergelerini esas alıyor.

Yasal zorunlulukların ötesinde erişilebilirlik, düpedüz iyi bir iş kararıdır. Klavyeyle, ekran okuyucuyla veya yakınlaştırılmış bir ekranla çalışan bir mağaza, küçük bir telefondaki herkes için de daha iyi çalışır.

Bu yazıda Hyvä'nın size neler sunduğuna, neleri sunmadığına ve bir Hyvä mağazası geliştirirken veya taşırken erişilebilirliği nasıl kontrol ettiğimize bakıyoruz.

Hyvä neden iyi bir başlangıç noktası

Luma’nın ön yüzü RequireJS, KnockoutJS ve jQuery widget’larına dayanır. Arayüzün birçok parçası tarayıcıda JavaScript ile oluşturulur; bu da onları incelemeyi ve düzeltmeyi zorlaştırır.

Hyvä bunun yerine sunucuda oluşturulan HTML, küçük etkileşimli parçalar için Alpine.js ve stil için Tailwind CSS kullanır. Bunun erişilebilirlik açısından birkaç doğrudan faydası vardır:

• HTML şablonun içinde. Şablonun .phtml dosyasında gördüğünüz, yardımcı teknolojilerin okuduğuna çok yakındır.
• Daha az JavaScript. Karşılaştırma testimizde Hyvä sayfaları yaklaşık 26 KB JavaScript yüklerken Luma'da bu rakam 463–524 KB idi. Daha az script, odağın kaybolması için daha az fırsat demektir.
• Tailwind yardımcıları. Örneğin sr-only, focus-visible: ve motion-reduce: gibi yardımcı sınıflar, iyi alışkanlıkları uygulamayı kolaylaştırır.
• Alpine.js durumu görünür. Açık veya kapalı gibi durumlar, kod içinde doğrudan ARIA özniteliklerine bağlanabilir.

Teknik arka planı merak ediyorsanız şunu okuyun: Alpine.js ve Tailwind, RequireJS ve Knockout'un yerini nasıl alıyor?.

Hyvä'nın sizin yerinize yapamadıkları

Tema yalnızca bir başlangıç noktasıdır. Magento mağazalarında bulduğumuz erişilebilirlik sorunlarının çoğu, temanın kontrol etmediği parçalardan kaynaklanır:

• Özel şablonlarda bir div öğesine tıklama işleyicisi verilmesi; oysa kullanılması gereken bir button.
• Kendi açılır pencereleri, slider'ları ve formları olan üçüncü taraf eklentiler.
• Kontrastı yetersiz marka renkleri.
• İşe yarar alt metni olmayan ürün görselleri.
• Başlıkları sıralarına göre değil, boyutlarına göre seçilmiş CMS içerikleri.
• Klavye odağını hapseden çerez bannerları ve sohbet widget'ları.

Taşıma sırasında her eklenti şablonu zaten yeniden yazılır veya değiştirilir. Bu sorunları yeni temaya taşımak yerine düzeltmenin doğru zamanı budur. Eklenti kontrol listemiz modülleri tek tek nasıl ele aldığımızı anlatıyor.

Erişilebilir Alpine.js bileşenleri

Mağazadaki birçok bileşen basit aç-kapa yapılarıdır: bir filtre grubu, mobil menü, bir SSS cevabı. Kalıp her zaman aynıdır. Gerçek bir buton bir alanı kontrol eder ve buton, yardımcı teknolojilere alanın açık olup olmadığını bildirir.

<div x-data="{ open: false }">
  <button type="button"
          @click="open = !open"
          :aria-expanded="open.toString()"
          aria-controls="filter-size">
    Boyut
  </button>
  <div id="filter-size" x-show="open">
    ...
  </div>
</div>

Modal pencereler ve kenardan açılan menüler daha fazla özen ister. Pencere açıldığında odak içine geçmeli, açık kaldığı sürece içeride kalmalı ve kapandığında onu açan öğeye dönmelidir. Escape tuşu pencereyi kapatmalıdır.

Her etkileşimli bileşeni, özellikle eklentilerden gelenleri, bu kurallara göre kontrol ediyoruz.

Renk, kontrast ve odak

Kontrast, en sık gördüğümüz sorundur ve çoğu zaman bir kod hatası değil, marka kararıdır. Beyaz üzerine açık gri metin şık görünür, ancak kontrast kontrollerinden geçemez ve dışarıda bir telefonda okunması zordur.

Odak durumları en sık görülen ikinci sorundur. Bazı tasarımlar odak çerçevesini “dağınık göründüğü” için kaldırır. Bu durumda klavye kullanıcıları sayfada nerede olduklarını göremez. Tailwind ile net bir focus-visible: stili, çerçeveyi her fare tıklamasında göstermeden klavye kullanıcılarına gösterir.

Ekibiniz renkleri yönetim panelinden değiştirebiliyorsa kontrast ekstra dikkat ister. Bunu nasıl ele aldığımızı şu yazıda anlatıyoruz: Hyvä tema renklerini yönetim panelinden değiştirmek.

Formlar ve ödeme sayfası

Erişilebilirlik ile dönüşümün buluştuğu yer ödeme sayfasıdır. Her form alanının yalnızca yer tutucu metni değil, görünür bir etiketi olmalıdır. Hata mesajları neyin yanlış gittiğini söylemeli ve ekran okuyuculara duyurulmalıdır.

Ödeme yöntemleri özel ilgi ister. Birçok ödeme sağlayıcısı kendi alanlarını bir iframe içinde yükler; bu yüzden erişilebilirlikleri kısmen sizin kontrolünüz dışındadır. Satış yaptığınız her pazarda bunları klavyeyle test edin.

Kendi 2 adımlı, 3 adımlı ve tek sayfa ödeme şablonlarımız Hyvä üzerine kuruludur ve aynı kurallar onlar için de geçerlidir. Daha fazlası için şu yazımıza göz atın: Hyvä Checkout buna değer mi?.

Nasıl test ediyoruz

1. Otomatik tarama. Lighthouse ve benzeri araçlar eksik etiketleri, eksik alt metinleri ve kontrast sorunlarını yakalar. Ancak sorunların yalnızca bir kısmını bulurlar.
2. Yalnızca klavye. Ana sayfadan sipariş onayına kadar Tab, Enter, Space ve Escape tuşlarıyla ilerliyoruz.
3. Ekran okuyucu. Başlıkları, sayfa bölgelerini (landmark), ürün seçeneklerini ve ödeme adımlarını masaüstünde ve telefonda bir ekran okuyucuyla kontrol ediyoruz.
4. Yakınlaştırma ve metin boyutu. Hiçbir şeyin üst üste binmediğini veya kaybolmadığını kontrol etmek için sayfayı yakınlaştırıp metin boyutunu büyütüyoruz.
5. Azaltılmış hareket. Kaydırıcılar (slider) ve animasyonlar, kullanıcının hareketi azaltma ayarına uymalıdır.

Otomatik araçlar iyi bir ilk filtredir. Müşterilerin satın almasını gerçekten engelleyen sorunları ise genellikle klavye testi bulur.

SSS

Hyvä mağazamı Avrupa Erişilebilirlik Yasası'na (European Accessibility Act) uyumlu hale getirir mi?

Hiçbir tema bunu tek başına yapamaz. Hyvä size Luma'dan daha temiz bir temel sunar, ancak uyumluluk şablonlarınıza, eklentilerinize, içeriğinize ve ödeme sayfanıza bağlıdır. Bazı çok küçük işletmeler muaf tutulur; kendi durumunuzu bir hukuk danışmanıyla kontrol edin.

Lighthouse'ta 100 erişilebilirlik puanı yeterli mi?

Hayır. 100 puan, otomatik kontrollerin geçildiği anlamına gelir. Bozuk bir odak sırası veya kafa karıştırıcı bir ödeme sayfası gibi birçok sorun yalnızca elle test edilerek bulunabilir.

Hyvä yayına alındıktan sonra erişilebilirlik iyileştirilebilir mi?

Evet. Düzeltmelerin çoğu şablon ve içerik değişiklikleridir. Yine de bunları taşıma sırasında baştan yapmak, sonradan düzeltmekten daha az maliyetlidir.

Erişilebilirliğin baştan dahil edildiği bir Hyvä mağazası veya taşıma mı planlıyorsunuz? Şuna göz atın: Hyvä tema geliştirme hizmetimiz, ya da bize ulaşın ve mağazanızı konuşalım.