Erişilebilirlik turu: WCAG AA hedefimiz
Erişilebilirlik turu: WCAG AA hedefimiz
MezarMC sitesi son iki haftada büyük bir erişilebilirlik (a11y) turu geçirdi. Hedefimiz: WCAG 2.1 AA standardını her sayfada karşılamak. Bu sayfalar; her klavye-only kullanıcının, ekran okuyucu kullanıcısının ve düşük görüş kullanıcısının siteyi rahatlıkla kullanabilmesi için tasarlandı.
Hangi düzeltmeleri yaptık?
Skip-to-content link
Her sayfanın en üstünde "İçeriğe atla" linki var. Tab tuşuna basınca görünür hale gelir, içeriğe direkt atlamak için Enter'a basabilirsin. Klavye-only kullanıcılar artık her sayfada navbar'ı geçmek için 10+ tab basmak zorunda değil.
Klavye navigasyonu
Tüm interaktif öğeler klavye ile erişilebilir:
- Modallar Escape ile kapanır (önce: kapanmıyordu)
- Focus trap — modal içindeyken Tab modal dışına çıkmaz
- Filter chip'leri ok tuşları ile gezilebilir
- Cookie banner Tab ile geçilebilir
Renk kontrastı
Site ana yazı renklerini WCAG'nin 4.5:1 minimum oranını karşılayacak şekilde ayarladık:
mezar-fg(ana metin): 17.9:1 ✓mezar-fg-dim(yardımcı): 7.6:1 ✓mezar-fg-dimmer(mono etiket): 5.04:1 ✓ (önceden 4.0:1, AA-fail idi)mezar-accent(gold): 9.8:1 ✓
Form etiketleri
Tüm form girdilerinde <label> etiketi var. Şifre göster/gizle gibi ikon-only butonlarda aria-label mevcut.
Görsel alt metni
Her resim için anlamlı alt metin:
- Skin görüntüsü:
"{username} oyuncu skinı" - Dekoratif SVG'ler:
aria-hidden="true" - Tüm cover image'lar: anlamlı açıklama
Ekran okuyucu test
NVDA + JAWS ile test edildi. Ana sayfaların navigasyon akışı:
- Skip link → ana içerik
- Hero h1 → tagline
- Üç bölüm h2 → CTA
- Footer landmarklar
Her sayfada tek h1 var, başlık hiyerarşisi düzgün (h1 → h2 → h3 atlamadan).
Reduced-motion
prefers-reduced-motion: reduce ayarına saygı:
- Hero Three.js partikül scenesi tamamen kapanır
- 3D skin viewer dönüş kapanır
- CSS animation duration 0.01ms'ye iner
- Hareket-hassas kullanıcılar tüm siteyi rahat kullanabilir
Lighthouse skorları
Audit öncesi → sonrası ortalama (mobile):
| Kategori | Önce | Sonra |
|---|---|---|
| Accessibility | ~82 | 96 |
| Best Practices | ~92 | 95 |
| SEO | ~92 | 98 |
Performance ayrı bir tur kaldı (font preload, image dimensions, lazy loading) — onun da raporu yakında.
Sıradaki adım
Service Worker (offline shell + PWA caching) ve daha fazla bileşenin a11y review'u kaldı. Hedefimiz Lighthouse Accessibility'de 97-98 sabit kalmak.
Erişilebilirlik isteğe bağlı bir ekstra değil — temel kalite. Birinin siteyi kullanamaması demek, zihinsel olarak ya da motor olarak farklı yöntemler kullanan birini dışlamak demek. MezarMC herkesi içeride istiyor.
Test eden kullanıcılarımıza teşekkür ediyoruz. Geri bildiriminiz bekliyoruz: /destek formu.