Yazı Boyutu Butonu Eklemeden Önce Sitenizin Birim Sorununu Çözün

Yazı boyutu tartışması genellikle yanlış yerden başlar: siteye bir A+ / A- düğmesi koymak. Tarayıcı bu işi yıllardır kendisi yapıyor, üstelik tercihi alan adı başına hatırlayarak. Sorun çoğu zaman kullanıcının büyütememesi değil, sitenin büyütmeyi engellemesi.

Tarayıcı ne yapıyor?

Internet Explorer 4'ün araç çubuğundaki büyüteç düğmeleri kalktı, çünkü işlev tarayıcının kendisine taşındı. Ctrl / Cmd ile artı, tuşu bırakır bırakmaz sayfayı ölçekler ve Chrome da Firefox da bu oranı alan adı başına saklar. Kullanıcı sitenize ikinci kez girdiğinde metin yine büyük gelir; ayarı hatırlayan bir altyapı yazmanız gerekmez.

Bunun yanında ikinci ve daha az bilinen bir mekanizma var: tarayıcının varsayılan yazı tipi boyutu. Chrome'da Ayarlar > Görünüm altında, Firefox'ta Genel > Dil ve Görünüm altında duruyor. Zoom'dan farkı şu: zoom her şeyi büyütür, varsayılan boyut yalnızca metni büyütür. Görme güçlüğü çeken kullanıcıların bir kısmı görselleri devasa hale getirmemek için ikincisini tercih eder.

px yazan metin bu ayarı duymaz

Kritik ayrım burada. Tarayıcının varsayılan yazı tipi boyutu, kök öğenin medium değerini değiştirir. font-size: 16px yazdığınız her yer bu değişimin dışında kalır. Kullanıcı yazı tipi boyutunu "Çok büyük"a çekmiştir, sizin gövde metniniz hâlâ 16 piksel görünür ve bu kişi ne olduğunu anlamadan sayfadan çıkar.

Bu yüzden kök seçicideki piksel değerini silin, gövde ölçülerini rem'e çevirin: tek satırlık bir değişiklik, sitenize koyacağınız butonun yapabildiğinden fazlasını yapar ve kullanıcının diğer sitelerde de geçerli olan tercihine bağlanır. Buton yalnızca sizin sayfanızda çalışır, üstelik tercihi saklamak için ayrıca çerez veya localStorage yazmanız gerekir.

em'i öneren tavsiyenin atladığı yer

"Sabit birim yerine em veya yüzde kullanın" tavsiyesi doğru ama eksik. em kendi kutusunun font boyutuna göre hesaplanır, dolayısıyla iç içe geçtiğinde çarpılarak birikir. Kart bileşenine 0.9em verdiniz, içindeki meta alanına yine 0.9em, onun içindeki etikete bir kez daha: elinizde 0.729em, yani 16 piksel tabanda 11,7 piksellik bir metin var. Kimse bunu bilerek yazmadı, ağaç derinleştikçe kendiliğinden oluştu.

rem her zaman kök boyutu referans aldığı için bu birikme yaşanmaz. em'i bileşen içindeki boşluklarda, metnin kendisiyle birlikte ölçeklenmesini istediğiniz yerlerde kullanın; gövde metninin boyutunda değil.

Zoom'u kilitleyen satır

Mobil şablonlarda dolaşan şu satır, yukarıda anlatılan her şeyi tek başına iptal eder:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

iOS Safari bir süredir user-scalable=no ifadesini erişilebilirlik gerekçesiyle yok sayıyor, Android tarafında sonuç tarayıcıya ve kullanıcının "yakınlaştırmaya zorla" ayarına göre değişiyor. Yani satır bazı cihazlarda çalışıyor, bazılarında çalışmıyor; öngörülemez olduğu için de test edilmeden kalıyor. WCAG'ın 1.4.4 ölçütü metnin yüzde 200'e kadar büyütülebilmesini ve bu sırada içerik ya da işlev kaybı olmamasını ister. maximum-scale ve user-scalable parçalarını atın; zaten sizi bir sorundan korumuyorlar.

Asıl test yüzde 200'de yapılır

Birimleri düzelttikten sonra sayfayı yüzde 200 zoomda açın. Kırılan yerler hep aynıdır: sabit yükseklik verilmiş kartlar, overflow: hidden ile kırpılan başlıklar, taşan buton etiketleri ve iki satıra düşünce üst üste binen navigasyon. Metin büyüdüğünde kutunun büyümesi gerekir; yükseklik yerine min-height düşünün.

Kaynak metinlerin sık tekrarladığı iki öneri hâlâ geçerli: gövde metninde 16 pikselin altına inmeyin (yaşlı kullanıcıya hitap eden bir sitede 18 daha güvenli bir taban) ve metni görsele gömmeyin, çünkü görseldeki yazı ne büyütülebilir ne de ekran okuyucu tarafından okunabilir. Kontrast da aynı hikâyenin parçası: açık gri üzerine biraz daha koyu gri yazılmış bir metin, punto ne olursa olsun okunmaz.

Erişilebilirlik ölçütlerinin resmi metni için W3C'nin Resize Text belgesi iyi bir başlangıç.