E-Ticarette Erişilebilirlik: WCAG 2.2 ile Herkese Satış Rehberi

Bir müşteri düşünün: Sepete eklemek istiyor ama fareyi kullanamıyor, sadece klavyeyle geziyor. "Satın Al" butonuna Tab tuşuyla ulaşamıyor, çünkü buton aslında bir <div> ve odaklanılamıyor. Bu müşteri kızmıyor, şikâyet de yazmıyor — sessizce sekmeyi kapatıp rakibinize gidiyor. Türkiye'de yaklaşık 1,4 milyon görme engelli birey var; buna yaşa bağlı görme kaybı, renk körlüğü (erkeklerin ~%8'i), motor kısıtlar ve geçici engelleri (kırık kol, güneş altında parlayan ekran) eklediğinizde, potansiyel müşterinizin azımsanmayacak bir kısmı sitenizi "kullanılabilir" bulmuyor.

Erişilebilirlik bir hayır işi değil; ölçülebilir bir ciro ve risk kalemidir. Üstelik artık ihracat yapanlar için hukuki bir zorunluluk.

Neden şimdi? İşin ticari ve yasal iki yüzü

Ticari taraf: Erişilebilir bir site, herkes için daha nettir. Yüksek kontrast, mantıklı başlık hiyerarşisi ve düzgün form etiketleri sadece ekran okuyucu kullanıcısına değil, mobilde acele eden herkese yarar. Erişilebilirlik iyileştirmeleri çoğu zaman genel dönüşüm oranını da yukarı çeker; çünkü aynı iyileştirmeler formu daha anlaşılır, butonu daha görünür yapar.

Yasal taraf: Haziran 2025'te yürürlüğe giren European Accessibility Act (EAA), AB pazarına ürün ve hizmet satan e-ticaret sitelerini de kapsıyor. Yani Avrupa'ya mikro ihracat yapan (ETGB ile satış gönderen) bir Türk mağazası pratikte bu kapsama girebiliyor. Referans standart EN 301 549, o da doğrudan WCAG 2.2 AA seviyesini işaret ediyor. Türkiye içinde de kamu ve giderek özel sektör için erişilebilirlik beklentisi artıyor. Kısacası: bugün gönüllü olan, yarın denetlenen bir konu.

WCAG'i dört kelimeyle anlamak: POUR

WCAG standardı karmaşık görünse de mantığı dört ilkeye dayanır:

Algılanabilir (Perceivable): İçerik görülebilir/duyulabilir olmalı — görsele alt metin, videoya altyazı.
Kullanılabilir (Operable): Her şey klavyeyle de yapılabilmeli.
Anlaşılabilir (Understandable): Formlar, hatalar ve akış öngörülebilir olmalı.
Sağlam (Robust): Yardımcı teknolojilerle (ekran okuyucu) uyumlu, temiz HTML.

Hedefiniz AA seviyesi olmalı; sektör standardı budur, AAA çoğu ticari site için gereğinden fazladır.

En çok kâr getiren 7 somut düzeltme

Mükemmeliyetçiliğe kapılmayın. Aşağıdaki yedi kalem, çabanın %20'siyle sonucun %80'ini verir.

1. Renk kontrastını düzeltin

WCAG AA, normal metin için en az 4.5:1 kontrast oranı ister. Açık gri üzerine açık gri fiyat etiketleri, soluk "kampanya bitiyor" yazıları burada çöker. Chrome DevTools veya WebAIM Contrast Checker ile 5 dakikada test edilir. Özellikle indirim fiyatı ve "Sepete Ekle" butonu bu testi geçmeli.

2. Sadece renge güvenmeyin

"Yeşil olan stokta, kırmızı olan tükendi" tasarımı, renk körü müşteri için okunamaz. Renge her zaman bir metin veya ikon ekleyin: "Stokta" / "Tükendi". Form hatalarında da kırmızı çerçeveye "Bu alan zorunludur" metnini mutlaka iliştirin.

3. Görsellere alt metin (alt text) yazın

Her ürün görselinin alt özelliği, ürünü anlatan gerçek bir cümle olmalı: alt="Lacivert deri kadın omuz çantası, altın tokalı". Bu hem ekran okuyucu için şart hem de Google Görseller ve genel SEO için doğrudan trafik getirir. Dekoratif görselleri ise alt="" ile boş bırakın ki okuyucu gereksiz gürültü yapmasın.

4. Her şey klavyeyle çalışsın

Fareyi bırakın, sadece Tab, Enter ve ok tuşlarıyla ana sayfadan ödeme adımına kadar gidebiliyor musunuz? Menüler, filtreler, "Sepete Ekle" ve checkout adımları klavyeyle erişilebilir olmalı. En sık hata: buton yerine tıklanabilir <div> kullanmak. Gerçek <button> ve <a> etiketleri kullanın; odak (focus) çerçevesini outline: none ile silmeyin.

5. Form etiketlerini bağlayın

Her input'un görünür bir <label>'ı olmalı ve for/id ile alana bağlanmalı. "Placeholder yeterli" değildir — kullanıcı yazmaya başlayınca kaybolur. Checkout formu erişilebilirliğin en kritik yeridir; burada takılan müşteri doğrudan kaybedilen satıştır.

6. Başlık hiyerarşisini düzenleyin

Sayfada tek bir <h1> olsun (ürün adı), alt başlıklar <h2>, <h3> ile mantıklı sırayla insin. Ekran okuyucu kullanıcıları sayfada başlıklara atlayarak gezer; dağınık hiyerarşi onları kör eder. Bu düzen aynı zamanda SEO'ya da yarar.

7. Video ve otomatik hareketi kontrol edin

Ürün videolarına altyazı ekleyin. Otomatik oynayan, duramayan slider ve animasyonlar hem dikkat dağınıklığı olan kullanıcıyı hem vestibüler rahatsızlığı olanları zorlar. Kullanıcıya durdurma imkânı verin.

30 dakikada kendi sitenizi test edin

Danışman tutmadan önce şu ücretsiz araçlarla bir taban ölçüm alın:

Araç	Ne işe yarar	Maliyet
Lighthouse (Chrome)	Otomatik erişilebilirlik skoru	Ücretsiz
axe DevTools (eklenti)	Detaylı, düşük yanlış-pozitifli tarama	Ücretsiz
WAVE (webaim.org)	Görsel hata haritası	Ücretsiz
NVDA (Windows)	Gerçek ekran okuyucu deneyimi	Ücretsiz

Unutmayın: otomatik araçlar sorunların ancak %30-40'ını yakalar. Kalanı için gerçek test şart. Ekranı kapatıp NVDA ile ana sayfadan bir ürünü sepete ekleyip ödeme adımına gelmeyi deneyin. Bu 15 dakikalık deneyim, size hiçbir skorun anlatamayacağını gösterir.

Nereden başlamalı: 3 haftalık plan

1. Hafta: Lighthouse + axe ile en çok trafik alan 3 sayfayı (ana sayfa, en çok satan ürün, checkout) tarayın. Bulguları önem sırasına dizin.
2. Hafta: Kontrast, alt metin ve form etiketleri gibi "hızlı kazanımları" uygulayın. Bunlar genelde tema/CSS düzeyinde çözülür.
3. Hafta: Klavye navigasyonu ve checkout akışını elle test edip düzeltin. Ardından temel bir erişilebilirlik beyanı sayfası yayınlayın; bu hem şeffaflık hem yasal koruma sağlar.

Erişilebilirliği tek seferlik proje değil, yeni ürün ve kampanya yayınlarken kontrol ettiğiniz bir alışkanlık haline getirin.

Herkese açık bir mağaza, daha fazla müşteri demektir

Erişilebilirlik, görmezden gelinen bir müşteri kitlesine kapıyı açmak, aynı zamanda Avrupa'ya satarken yasal riski kapatmaktır — ve bunu yaparken sitenizi herkes için daha net, daha dönüştüren bir yere çevirir. En güzel tarafı: yukarıdaki adımların çoğu için bütçe değil, farkındalık gerekir.

Shopizayn ile mağazanızı kurarken erişilebilir temalar, otomatik alt metin önerileri ve WCAG uyumlu checkout altyapısı hazır gelir; kontrast ve form etiketleri gibi ayarlar kutudan çıktığı gibi doğrudur. Kod bilmeden, ekstra ücret ödemeden herkese açık bir mağaza açmak için Shopizayn'da ücretsiz hesabınızı oluşturun ve ilk ürününüzü bugün yayına alın.