Bir sayfanın hem ultra hızlı açılması hem de farklı cihaz ve engel gruplarındaki kullanıcılar tarafından engelsizce kullanılabilmesi birbirini destekleyen hedeflerdir. Bu portfolyoyu hazırlarken özellikle içerik hiyerarşisini, klavye dolaşımını ve harici bağımlılıkları sıfırlamayı gözettim.
1. İçerik Önce Doğru HTML ile Başlar
Başlıklar başlık, bağlantılar bağlantı, etkileşimler düğme olmalı. <main>, <nav>, <header> ve <article> gibi anlamsal etiketler sayfanın iskeletini hem tarayıcılara hem de ekran okuyuculara doğrudan anlatır.
Bir menü açıldığında ekran okuyucunun haberdar olması için aria-expanded durumu, odak kaybını engellemek için ise :focus-visible halkaları görünür bırakılmalıdır.
2. Hareket ve Efektler Bir Seçenek Olmalıdır
Gereksiz açılış animasyonları (loader) veya sürekli dönen arka planlar özellikle kurumsal ağlarda, düşük işlemcili cihazlarda ve dikkat dağınıklığı yaşayan kullanıcılarda deneyimi bozar. CSS'teki prefers-reduced-motion kuralıyla kullanıcının sistem ayarlarına saygı gösterilmelidir.
Bu Sitedeki Yaklaşım: Ana içerik JavaScript veya dış CDN beklemeden saf HTML olarak anında ekrana gelir. Tarayıcıda JS kapalı olsa bile tüm yazılar, makaleler ve iletişim kanalları eksiksiz çalışır.
3. Sayfa Ağırlığını ve Dış CDN'leri Sorgulayın
Ağır font paketleri ve onlarca megabaytlık görseller yerine modern SVG grafikler ve yerel sistem yazı tipleri (system font stack) tercih edildiğinde sayfa boyutu kilobaytlar seviyesinde kalır. Bu durum özellikle bant genişliği kısıtlı kamu veya kurumsal ağlarda sayfanın sıfır bekleme süresiyle açılmasını sağlar.
4. Yayına Çıkmadan Önce Kontrol Listesi
- Yalnızca Klavye ile Test: Fare kullanmadan Tab ve Shift+Tab tuşlarıyla tüm site gezilebiliyor mu?
- Yatay Kayma Kontrolü: Mobil ekranlarda (320px - 375px) yatay taşma var mı?
- Ağ / Çevrimdışı Dayanıklılık: Harici CDN'ler yanıt vermediğinde sayfa kilitlenmeden okunabiliyor mu?
- Semantik Hiyerarşi: Her sayfada tek bir
<h1>ve mantıklı başlık seviyeleri var mı?