Web Geliştirmede Erişilebilirlik, Performans ve Sık Yapılan Hatalar

Ders 11/11 · yaklaşık 3 dk okuma

Bu derste neye bakacağız?

Çalışan bir sayfa yapmak ilk adımdı. Şimdi sorumuz şu: sayfa gerçekten iyi mi? Klavyeyle gezen, ekran okuyucu kullanan, yavaş bağlantıdaki ya da küçük ekranlı telefondaki ziyaretçi için de çalışıyor mu? Bu ders sık yapılan hataları, yanlış bilinenleri ve kontrol yöntemlerini toplar.

Sık yapılan hatalar ve düzeltmeleri

Hata	Neden sorun?	Düzeltme
Her yerde <div> kullanmak	Ekran okuyucu bölümün ne olduğunu anlayamaz	<header>, <nav>, <main>, <footer>, tıklanacak yerde <button>
Başlık sırasını atlamak	Sayfanın anahtar yapısı bozulur, başlık gezintisi işe yaramaz	h1, h2, h3 sırasını koru; boyutu CSS ile ayarla
Görsele alt metin yazmamak	Görseli göremeyen kişi bilgiyi kaçırır	Bilgi taşıyan görsele kısa açıklama, süs görsele boş alt
Düşük renk kontrastı	Güneşte ve düşük görüşte yazı okunmaz	Kontrast denetleyicisiyle bak, koyu/açık farkını artır
Sabit piksel genişlik	Mobilde yatay kaydırma çıkar	max-width, yüzde değerleri, görselde max-width: 100%
Olay dinleyicisini yanlış yerde bağlamak	Eleman henüz yokken seçilir ya da döngüde tekrar tekrar eklenir	Script'i gövde sonuna koy ya da defer kullan; dinleyiciyi bir kez bağla
Aynı kodu kopyalayıp yapıştırmak	Değişiklik her kopyada ayrı yapılır, biri unutulur	Ortak CSS sınıfı ya da tek fonksiyon

Yanlış bilinenler ve istisnalar

'Güzel görünüyorsa doğrudur.' Görünüş yalnızca fareyle bakan kişi için doğrudur. Klavyeyle gezen biri için sayfa kırık olabilir.
'Tarayıcıda çalışıyorsa her yerde çalışır.' Başka tarayıcıda, başka ekran genişliğinde ve yavaş bağlantıda da dene.
'Her görsele alt metin yazılır.' Tam doğru değil: yalnızca süs amaçlı görselde alt boş bırakılır, böylece ekran okuyucu onu atlar.
'Skor yüksekse site iyidir.' Denetim araçlarının skoru yol göstericidir. Uyarının nedenini anlamak skordan önemlidir.

Başarı göstergeleri

Klavye testi: Fareyi bırak, Tab ile tüm sayfayı gez. Odak her zaman görünür mü, sıra mantıklı mı, butonlar Enter ile çalışıyor mu?
Yüklenme hissi: Geliştirici araçlarında bağlantıyı yavaşlat. İçerik ne zaman görünüyor, sayfa yüklenirken kayıyor mu?
Görsel boyutları: Ekranda küçük görünen ama dosya olarak büyük görsel var mı? Boyutlandır ve sıkıştır.
Hazır denetim: Tarayıcının Lighthouse raporunu çalıştır, uyarıları sırayla oku ve düzelt.

Adım adım: kendi sitenizde denetim şablonu

1. Sayfayı yenile, geliştirici araçlarını aç (F12).
2. Cihaz görünümüne geç, telefon genişliğinde yatay kaydırma var mı bak.
3. Fareyi bırak, yalnızca Tab ile sayfayı gez; takıldığın yeri not et.
4. Başlıkları sırayla say: h1 tek mi, h2'ler h3'ten önce mi geliyor?
5. Her görselin alt metnini kontrol et; süs olanı boş bırak.
6. Lighthouse raporunu çalıştır, en önemli üç uyarıyı seç.
7. Üç sorunu düzelt, raporu yeniden çalıştırıp farkı gör.

Bir üst seviyeye taşıyan ipuçları

Küçük adımlarla yeniden düzenle: Bir seferde tek şeyi değiştir, tarayıcıda dene, sonra devam et.
Kodu okunur tut: Anlamlı sınıf adları, tutarlı girinti, gereken yerde kısa yorum.
Geliştirici araçlarını düzenli kullan: Elements, Console ve Network sekmeleri günlük alışkanlık olsun.

Sonraki öğrenme yolu

CSS Grid ve duyarlı tasarım
Erişilebilir formlar ve klavye odağı yönetimi
Git ile sürüm yönetimi
JavaScript'te modüller ve ağ istekleri (fetch)
Sonrasında bir JavaScript çerçevesi

Ödeviniz: Kendi sitenizde yukarıdaki denetim şablonunu uygulayın, bulduğunuz üç sorunu düzeltin ve önce/sonra farkını not edin.

Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol

İpucu: ← ve → tuşlarıyla dersler arasında geçebilirsin.