Altın Konu Web Geliştirme : Front-End'de Tasarım ve Erişilebilirlik (Accessibility) Rehberi

Reaxiyon · 11 Eki 2025

Merhaba TurkMMO Ailesi

Bir Front-End Developer olarak kod yazmak kadar, yazdığın kodun son kullanıcıya sunduğu deneyimin kalitesi de önemlidir. Uygulamalarının sadece çalışması değil, aynı zamanda kullanımı kolay ve herkes için erişilebilir olması gerekir.

1. UX/UI Temellerini Kavramak

Kullanıcı Deneyimi (UX) ve Kullanıcı Arayüzü (UI) arasındaki farkı bilmek, projelerine yaklaşımını değiştirecektir.

Kullanıcı Deneyimi (UX): Kullanıcının uygulamanı kullanırken hissettiklerine, kolaylığına ve akışına odaklanır. Butonların mantıklı yerlerde olması, form doldurmanın zahmetsiz olması gibi konular UX'in alanıdır.
Kullanıcı Arayüzü (UI): Uygulamanın görsel öğelerine, renk şemasına, tipografisine ve genel estetiğine odaklanır. Uygulamanın güzel ve markaya uygun görünmesini sağlar.
Tasarım Araçlarıyla Tanışma: Figma veya Sketch gibi tasarım araçlarından gelen dosyaları okumayı ve bu tasarımları piksel mükemmelliğiyle (pixel-perfect) koda dönüştürmeyi öğrenmen, profesyonel iş akışının bir parçasıdır.

2. Erişilebilirlik (Accessibility - A11y) Standartları

Modern web'de iyi bir geliştirici olmanın ön koşulu, uygulamalarını engelli kullanıcılar da dahil olmak üzere herkesin kullanabilmesini sağlamaktır.

Neden Önemli? Erişilebilirlik (kısaca A11y), sadece yasal bir zorunluluk değil, etik bir sorumluluktur. Milyonlarca potansiyel kullanıcının sitene erişimini sağlamış olursun.
Semantic HTML Kullanımı: Erişilebilirliğin temeli, doğru Semantic HTML kullanmaktır. <button> yerine <div> kullanmaktan kaçın. Ekran okuyucularının (screen readers) sayfayı doğru anlaması için etiketlerin doğru olması şarttır.
ARIA Özellikleri: ARIA (Accessible Rich Internet Applications) özellikleri, HTML'in doğal olarak sağlamadığı dinamik içerikleri ve karmaşık bileşenleri (örneğin, özel açılır menüler veya sekmeler) ekran okuyucularına daha iyi açıklamak için kullanılır. aria-label ve role gibi temel ARIA özelliklerini öğrenmen çok faydalı olur.
Klavye Navigasyonu: Fare kullanamayan kullanıcılar için, sitendeki tüm interaktif öğelerin Tab tuşu ile sırayla erişilebilir ve kullanılabilir olduğundan emin olmalısın.

3. Tarayıcılar Arası Uyumluluk (Cross-Browser Compatibility)

Yazdığın kodun Chrome, Firefox, Safari ve Edge gibi farklı tarayıcılarda aynı şekilde çalıştığından emin olmak, bir Front-End Developer'ın günlük görevidir.

Can I Use: Yeni bir CSS özelliği veya JavaScript API'ı kullanmadan önce, Can I Use gibi kaynaklardan hangi tarayıcıların bunu desteklediğini kontrol etmelisin.
Fallbacks (Geri Dönüş Mekanizmaları): Eğer modern bir özellik kullanıyorsan, eski tarayıcılar için işlevselliği bozmayacak basit Fallback (geri dönüş) mekanizmaları sağlamak profesyonel bir yaklaşımdır.

Bu prensipleri kodlama pratiğine dahil etmek, seni sadece teknik olarak yetenekli değil, aynı zamanda kullanıcı odaklı düşünen değerli bir geliştirici yapacaktır.

İyi Forumlar TurkMMo Ailesi