Erişilebilir web tasarımı: renk kontrastı, klavye ile gezinme ve alternatif metin

Erişilebilirlik (accessibility, kısaca a11y), sitenin görme, işitme, hareket ya da bilişsel engeli olan kişiler dahil herkes tarafından kullanılabilmesidir. Sadece etik bir konu değildir: Erişilebilir siteler genellikle herkes için daha kullanışlıdır ve arama motorları tarafından daha iyi anlaşılır.

1. Renk kontrastı

Metin ile arka plan arasında yeterli kontrast olmalıdır. WCAG yönergelerine göre normal metin için en az 4.5:1, büyük metin için 3:1 oran önerilir. Açık gri zemin üzerine açık gri yazı en sık görülen hatadır.

Kontrol için tarayıcının geliştirici araçları (renk seçicide kontrast oranı görünür) ya da WebAIM Contrast Checker kullanılabilir. Bilgiyi yalnızca renkle verme: Hatalı form alanını sadece kırmızı çerçeveyle değil, bir hata mesajıyla da belirt.

2. Klavye ile gezinme

Fare kullanamayan pek çok kişi siteyi Tab, Shift+Tab, Enter ve ok tuşlarıyla gezer. Kendi siteni sadece klavyeyle dolaşmayı dene:

• Tüm bağlantılar, butonlar ve form alanlarına ulaşılabiliyor mu?
• Odaklanan öğe görünüyor mu? CSS'te outline: none yazıp yerine bir şey koymamak çok yaygın bir hatadır. :focus-visible ile şık bir odak çerçevesi tasarlayabilirsin.
• Açılan pencere (modal) kapandığında odak mantıklı bir yere dönüyor mu?

3. Doğru HTML öğesini kullan

Tıklanabilir bir şey yapmak için <div onclick> yerine <button> kullan. Buton klavyeyle odaklanabilir, Enter ve Space ile çalışır ve ekran okuyucuya "buton" olarak bildirilir; bunları div'e sonradan eklemek hem zor hem hataya açıktır.

Başlıkları (h1–h6) görünüşe göre değil, belge yapısına göre sırala. Ekran okuyucu kullananlar sayfayı çoğu zaman başlıklar arasında atlayarak tarar.

4. Görsellerde alternatif metin

<img src="grafik.png" alt="2026 yılı aylara göre satış grafiği, en yüksek değer Mart'ta">

• Bilgi taşıyan görsellerde içeriği anlatan kısa bir açıklama yaz.
• Süs amaçlı görsellerde alt="" kullan; ekran okuyucu bunları atlar.
• "resim", "görsel" gibi kelimelerle başlamaya gerek yok.

5. Formlar

Her alanın görünür bir <label> etiketi olmalı ve for özelliğiyle alana bağlanmalı. Yalnızca placeholder ile etiket vermek, yazmaya başlayınca kaybolduğu için yetersizdir.

Test araçları

Tarayıcıdaki Lighthouse "Erişilebilirlik" puanı ve axe DevTools eklentisi sık hataları otomatik bulur. Ancak otomatik araçlar sorunların yalnızca bir kısmını yakalar; klavyeyle ve bir ekran okuyucuyla (Windows'ta NVDA, macOS'ta VoiceOver) kısa bir deneme yapmak çok şey öğretir.

Tasarımın erişilebilirliği hakkında görüş almak istersen ekran görüntüsü ya da bağlantıyla bu konunun altına yazabilirsin.