Web Tasarım Hataları: Listenin Hangi Maddesi Hâlâ Geçerli?
Klasik web tasarım hataları listesi yıllardır aynı maddelerle dolaşıyor: küçük yazı, kötü bağlantı, Flash, sabit genişlik. Maddelerin bir kısmı bugün ölçülebilir bir eşiğe karşılık geliyor, bir kısmı ise 2010'ların kalıntısı. Ayırt etmenin yolu her maddeyi tek bir soruya indirmek: kaç piksel, kaç kontrast oranı, hangi ekran genişliği?
Okunabilirlik: 16 piksel keyfi bir sayı değil
Minimum yazı boyutu olarak sürekli 16 piksel önerilir ama gerekçesi çoğu zaman söylenmez. Gövde metni için bu bir konfor tercihi; form alanlarında ise teknik bir zorunluluk. iOS Safari, yazı boyutu 16 pikselin altında kalan bir input alanına odaklanıldığında sayfayı otomatik olarak yakınlaştırır, kullanıcı da tam form doldururken düzenin kaydığını görür. Kontrast tarafında da tahmine gerek yok: WCAG normal metin için 4.5:1, büyük metin (kabaca 24 piksel ya da 19 piksel kalın üstü) için 3:1 oranını ister ve tarayıcının geliştirici araçları seçtiğiniz renk çifti için bu oranı doğrudan yazar.
Bağlantı, bağlantı gibi görünmediğinde bağlantı değildir
Altı çizili ve farklı renkteki metin, kullanıcının tarayıcıyı öğrendiği ilk günden beri bildiği tek tıklanabilirlik işareti. Bunu kaldırıp yerine ince bir renk tonu koymak, tıklanabilir alanı keşfe bırakmak demek. Bağlantı metni de kendi başına anlamlı olmalı; ekran okuyucu kullanıcıları sayfadaki bağlantıları liste hâlinde gezebildiği için art arda sıralanan dört tane "tıklayın" hiçbir şey anlatmaz. Ziyaret edilmiş bağlantıyı ayırma tavsiyesinin ise pek anlatılmayan bir sınırı var: tarayıcılar gizlilik gerekçesiyle :visited durumunda yalnızca renk türü özellikleri uygular ve JavaScript'ten sorulduğunda ziyaret edilmemiş hâli döndürür. Bu ayrımı ikona, yazı kalınlığına ya da script'e bağlamak boşa emek; çalışan tek yol renk.
Flash gitti, animasyon sorunu kaldı
Adobe, Flash Player'ı 31 Aralık 2020'de emekliye ayırdı; 12 Ocak 2021'den sonra tarayıcılar mevcut içeriği de çalıştırmayı bıraktı. Maddenin listede durmaya devam etmesi, listenin kendi yaşını ele veriyor. Yerini alan sorun ise aynı: sayfa girişinde çalışan dekoratif animasyonları projelerime koymam, çünkü ilk ekranın boyanmasını geciktiren her şey ölçümde doğrudan gecikme olarak görünür. Kalan animasyonlar için de tek satırlık bir sorumluluk var: işletim sisteminde hareketi azaltmayı açmış kullanıcıya prefers-reduced-motion medya sorgusuyla sade sürümü göstermek.
Formda asıl mesele alan sayısı değil
Uzun formların terk edildiği doğru, ama "alanları azaltın" tavsiyesi tek başına yarım kalıyor. Otomatik doldurmanın çalışması için alanın ne istediğini tarayıcıya söylemek gerekir: autocomplete="email", autocomplete="postal-code" gibi standart değerler. WCAG 2.1'in 1.3.5 kriteri bunu zaten şart koşuyor ve maliyeti sıfır. Listenin bir maddesi ise bugün ters çalışıyor: "klavye odağını ilk alana yerleştirin". Masaüstünde makul, mobilde değil. Sayfa açılır açılmaz klavye yükselir, ekranın yarısı kapanır ve kullanıcı formun başlığını hiç görmeden yazmaya başlar.
Site içi arama: yazmadan önce log'a bakın
Arama bir özellik değil, teşhis aracı. Sıfır sonuç dönen sorguların listesi, sitenin hangi içeriği eksik bıraktığını çoğu içerik planından daha isabetli söyler. Ama sıralamayı ters kurmamak lazım: kullanıcı aramaya, gezinme onu istediği yere götürmediğinde başvurur. Yirmi sayfalık bir sitede filtreli arama motoru kurmak, bozuk menüyü onarmanın pahalı bir kaçamağıdır.
Sabit genişlik tartışması 320 pikselde biter
Akışkan düzenin sabit genişliğe üstünlüğü tartışmalı bir zevk meselesi gibi sunulur, oysa net bir ölçütü var. WCAG 1.4.10, içeriğin 320 CSS piksel genişliğinde iki yönlü kaydırma gerektirmeden akmasını ister; pratikte 1280 piksellik bir ekranda yüzde 400 yakınlaştırma ile aynı testtir. Tarayıcı penceresini bu genişliğe daraltıp yatay kaydırma çubuğu beliriyor mu diye bakmak on saniye sürer ve sabit genişlikten doğan hataların çoğunu yakalar. Aynı testi bir de yazı boyutunu iki katına çıkararak yapın; taşma çoğunlukla orada ortaya çıkar.
Kalan maddeler ne kadar yer tutmalı
Tarayıcı uyumu bugün üç motor demek: Blink, WebKit, Gecko. iOS'ta uzun süre bütün tarayıcılar WebKit üzerinde çalıştığı için "Chrome'da denedim" cümlesi iPhone'u kapsamaz, gerçek fark da genellikle orada çıkar. Açık iletişim bilgisi ve fiziksel adres bir tasarım maddesi değil, güven maddesi; eksikliği kullanıcıyı arayüzün neresinde durduğundan bağımsız olarak geri çeker. Görsel büyütme ise artık ayrı bir büyütme ekranı kurmak değil, doğru boyutta dosya sunmak meselesi: srcset ile ekran yoğunluğuna göre farklı dosya vermek, tek bir 3000 piksellik görseli tarayıcıya küçülttürmekten hem hızlı hem net.
Hangi maddeyi önce kontrol etmeli
Bu maddeler eşit maliyetli değil. Kontrast oranı, 320 piksel testi ve form alanlarının autocomplete değerleri birkaç dakikada bakılır, tek oturumda düzeltilir ve sonucu ölçülebilir. Arama altyapısı kurmak, animasyon sistemini elden geçirmek ya da görsel boru hattını yenilemek ise gün alır ve karşılığı ancak analitikte gerçek talep görünüyorsa gelir. Ucuz ve ölçülebilir olanı önce bitirin; geri kalanın sırasını sitenin kendi verisi söyler.