İşletme Web Siteleri için Web Erişilebilirliği (WCAG): Pratik Bir Geliştirici Kontrol Listesi

 class="btn" onclick="submitForm()">Gönder

 type="submit">Gönder

2. ARIA — Az Kullanım

ARIA (Erişilebilir Zengin İnternet Uygulamaları) öznitelikleri, anlamsal HTML’in yeterli olmadığı durumlarda boşlukları doldurmak içindir — yerini almak için değildir. ARIA’nın ilk kuralı: bir yerel HTML öğesi işi yapabiliyorsa ARIA kullanmayın.

Bununla birlikte, dinamik UI bileşenleri (modal, sekmeler ve açılır menüler gibi) ARIA’ya ihtiyaç duyar:

  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  
 id="modal-title">Silinmeyi Onayla
  
 id="modal-description">Bu işlem geri alınamaz.
   autofocus>İptal
  Sil

Bir role="dialog" etkin olduğunda, autofocus odak noktasını modal içinde hareket ettirmelidir. Kapatıldığında odak geri tetikleyici öğeye dönmelidir. Bunu unutmak, SPAs’de en yaygın klavye kapanma hatalarından biridir.

3. Renk Kontrastı — Kontrolü Otomatikleştirin

WCAG 2.1 AA şunları gerektirir:

• 4.5:1 normal metin için kontrast oranı.
• 3:1 büyük metin (18px+ normal veya 14px+ kalın) için.
• 3:1 UI bileşenleri ve grafik nesneler için.

Bunu göz kararıyla değerlendirmeyin. Test setinize axe-core‘u ekleyin:

npm install --save-dev @axe-core/playwright

Bu, kontrast hatalarını, eksik alt metinleri, etiketlenmemiş form alanlarını ve daha birçok sorunu otomatik olarak her CI çalıştırmasında tespit eder.

4. Klavye Navigasyonu ve Odak Yönetimi

Her etkileşimli öğe yalnızca klavye ile erişilebilir ve çalışabilir olmalıdır. Kendi başınıza test edin: farenizi çıkarın ve sitenizde Tab, Shift+Tab, Enter ve ok tuşları ile gezinmeyi deneyin.

Bunu asla yapmayın:

/* ❌ Herkes için klavye navigasyonunu bozar */
*:focus {
  outline: none;
}

Bunun yerine, odak göstergelerini tasarım sisteminize uygun şekilde stil verin:

/* ✅ Görünür, marka odak halkası */
*:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
  border-radius: 4px;
}

:focus-visible pseudo-sınıfı burada anahtar rolü oynar – bu, tasarımın karmaşasını ortadan kaldırırken yalnızca klavye navigasyonu için kenar çizgisini gösterir.

5. Formlar — En Yaygın Hata Noktası

Formlar, erişilebilirliğin sıkça bozulduğu alanlardır. Her input’un programatik olarak ilişkilendirilmiş bir etikete sahip olması gerekir — placeholder bir alternatif değildir.

Satır içi doğrulama hataları için hata mesajını alanla ilişkilendirin ve doğrulama hatası durumunda input’ta aria-invalid="true" ayarını yapın.

6. Görseller ve Alt Metin — Bağlam Önemlidir

Kural basittir ama sıklıkla yanlış uygulanır:

• Bilgisel görseller → açıklayıcı alt metin.
• Süslemeli görseller → alt="" (boş dize, atlanmaz).
• Fonksiyonel görseller (örn. ana sayfaya bağlantı veren logo) → işlevi tanımlayın: alt="HanzWeb ana sayfası"

 src="/divider.svg" alt="">


src="/q3-revenue-chart.png"
alt="Q3 gelirinin yıllık %23 artışını gösteren çubuk grafiği"
>

Otomatik Araçların Ötesinde Test Etme

Otomatik tarayıcılar (axe-core gibi) yaklaşık %30–40 erişilebilirlik sorununu yakalar. Geri kalanı manuel test gerektirir:

1. Ekran okuyucu testleri — Kritik kullanıcı yolculuklarınızı gezmek için NVDA (Windows, ücretsiz) veya VoiceOver (macOS/iOS, yerleşik) kullanın.
2. Zoom testleri — Tarayıcı yakınlaştırmasını %200’e ayarlayın ve içeriğin kırılmadığını veya üst üste binmediğini doğrulayın (WCAG 1.4.4).
3. Hareket azaltma — vestibüler bozuklukları olan kullanıcılar için prefers-reduced-motion değerine saygı gösterin.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Erişilebilirlik Laravel / TALL Yığını Bağlamında

Livewire ile çalışıyorsanız, dinamik içerik güncellemelerine ekstra dikkat edin. Livewire bir bileşeni yeniden render ettiğinde, odak sessizce belge gövdesine sıfırlanabilir ki bu da klavye ve ekran okuyucu kullanıcıları için zorlayıcı olabilir.

Etkileşimli modüllerin yeniden render edilmemesi gereken öğelere wire:ignore ekleyin ve gerektiğinde odak yönetimi olaylarını tetikleyin. HanzWeb ekibi, Livewire bileşen geliştirme iş akışına doğrudan erişilebilirlik denetimlerini entegre ederek, bu odak kapanma sorunlarını build aşamasında gündeme getiriyor.

Alpine.js bileşenleri için, Alpine Erişilebilirlik eklentisi, modal ve açılır menü kalıplarını kutudan çıkmadan doğru bir şekilde işleyen tuzak ve odak yardımcıları sağlar.

Sonuç

Erişilebilirlik, niche bir sorun veya yasal bir kutucuk işareti değildir — aslında bir şeyin ne kadar iyi inşa edildiğini ölçme şeklidir. Yukarıdaki kalıplar — anlamsal HTML, doğru ARIA kullanımı, CI’de renk kontrastı kontrolleri, klavye ile gezilebilen odak yönetimi ve doğru etiketlenmiş formlar — %80 gerçek dünya WCAG hatalarını çözen %20’lik bir çabanın temsilcisidir.

Bu hafta test hattınıza axe-core eklemeye başlayın. Onu en çok ziyaret edilen üç sayfanıza karşı çalıştırın. Ortaya çıkan sorunları düzeltin. Ardından, ana dönüş akışınızda yalnızca klavye ile bir tur atın. Ne kadar çok şey bulduğunuza ve çoğunun nasıl kolayca düzeltilebileceğine şaşıracaksınız.