Frontend Development’ta Erişilebilirlik: Herkes İçin Web
(2 dakikalık okuma)
Frontend Development’ta Erişilebilirlik: Herkes İçin Web
Web geliştirme yalnızca estetik tasarımlar, modern framework’ler ya da hız optimizasyonu ile sınırlı değil. Bir frontend developer olarak en önemli sorumluluklarımızdan biri de erişilebilir web deneyimleri sunmak. Çünkü internet, yalnızca görebilen, duyabilen ya da hızlıca mouse kullanabilen insanlar için değil; herkes için var.
Neden Erişilebilirlik Önemli?
Dünya Sağlık Örgütü’ne göre dünya nüfusunun yaklaşık %15’i bir tür engellilik yaşıyor. Bu; görme engeli, işitme kaybı, motor beceri zorlukları veya bilişsel farklılıklar olabilir. Eğer geliştirdiğimiz web siteleri bu kişileri dışarıda bırakıyorsa, aslında internetin en temel amacına — evrensel erişim — aykırı davranıyoruz. Ayrıca erişilebilirlik sadece engelli bireyler için değil, yaşlı kullanıcılar, mobil cihaz kullananlar veya yavaş internet bağlantısına sahip kullanıcılar için de büyük bir avantaj sağlıyor.
💡 Burada kendi deneyimimden bahsetmek isterim: Jotform’da UI Developer olarak staj yaparken mentorum Giray Karasinir ile birlikte bir projeyi kodlarken erişilebilirlik konusuna özellikle dikkat etmem gerektiğini öğrendim. Mentorum bana, her insan için ulaşılabilirliğin kolay olmasının bir frontend geliştiricinin temel görevlerinden biri olduğunu aktardı. O günden sonra yazdığım her satır kodda her proje fikrini oluştururken “bu özellik herkes için erişilebilir mi?” diye düşünmeye başladım.
HTML ve ARIA ile Erişilebilirlik
Frontend development yaparken erişilebilirliği artırmak için birkaç basit ama kritik attribute kullanmak gerekiyor:
- alt → Görseller için alternatif metin. Görme engelliler ekran okuyucu ile görselin içeriğini öğrenebilir.
- aria-label → Bir elementin amacını açıklayan yardımcı etiket. Örneğin sadece ikon içeren bir butonda.
- role → Bir elementin ne iş yaptığını belirtir (örneğin role="navigation").
- tabindex → Klavye ile gezinmeyi mümkün kılar.
- lang → Sayfanın dilini tanımlar (<html lang="tr">).
<button aria-label="Sepete Ekle">
🛒
</button>
Bu şekilde butonun ne işe yaradığını ekran okuyucu kullanıcıları da anlayabilir.
Erişilebilirlik İçin Dikkat Edilmesi Gerekenler
- Form alanlarında mutlaka label kullanın. Placeholder tek başına yeterli değildir.
- Renk kontrastına dikkat edin. Siyah üzerine koyu gri gibi düşük kontrastlı yazılar okunamaz. WCAG minimum kontrast oranını 4.5:1 olarak belirler.
- Başlık yapısını (h1–h6) mantıklı kurun. Ekran okuyucular bu hiyerarşi ile içeriği tarar.
- Klavyeyle gezinilebilirlik test edin. Sadece tab tuşuyla sitenizde dolaşmayı deneyin.
Erişilebilirlik Test Araçları
Kendi kodunuzun erişilebilirliğini test etmek için kullanabileceğiniz bazı ücretsiz araçlar:
WAVE → WebAIM tarafından sağlanan erişilebilirlik kontrol aracı.
W3C Validator → HTML doğrulama ve erişilebilirlik hataları için.
axe DevTools (Chrome/Firefox eklentisi).
Lighthouse (Chrome DevTools) → Google’ın erişilebilirlik skorunu gösteren aracı.
Sonuç: Herkes İçin Daha İyi Web
Erişilebilir frontend geliştirme, yalnızca etik bir sorumluluk değil, aynı zamanda SEO ve kullanıcı deneyimi açısından da avantajlıdır. Erişilebilir siteler arama motorlarında daha iyi sıralanır, kullanıcı bağlılığı artar ve marka değeri güçlenir.
Unutmayın: İyi bir Frontend developer, yalnızca güzel görünen değil; herkes için erişilebilir bir web inşa eder.
Yorumlar (0)