Yaşlı Kullanıcılar İçin Kullanılabilirlik: Punto, Kontrast ve Hedef Boyutu

Bir arayüzü yaşlı kullanıcı için düzeltmek, kenara ayrı bir "erişilebilirlik modu" yazmak demek değil. İşin büyük kısmı puntoyu, kontrast oranını ve tıklanabilir alanın kaç piksel olduğunu tek tek ölçmekten ibaret. Bu ölçülerin bir bölümü de zaten tarayıcıda hazır duruyor, yapılması gereken onu bozmamak.

Yaş, kullanıcıyı tam olarak nerede yavaşlatır

Üç ayrı mekanizma var ve üçünün arayüzdeki karşılığı farklı.

Birincisi görme. Yaşla birlikte göz merceği sararıp sertleşir, geçirdiği ışık azalır. Bunun sonucu salt "küçük yazıyı okuyamamak" değil; kontrast duyarlılığı düşer. Yani açık gri zemindeki biraz daha koyu gri yazı, genç bir gözde okunurken yaşlı bir gözde gri bir lekeye dönüşür. Punto büyütmek bu durumu kısmen kurtarır, kontrastı düzeltmek tamamen kurtarır.

İkincisi motor kontrol. Parmağı 10 piksellik bir hedefin üstünde sabit tutmak, elin hiç titrememesini gerektirir. Titreme varsa imleç hedefin kenarına kayar, tıklama boşa gider ya da yanlış bağlantıya denk gelir.

Üçüncüsü ve en az konuşulanı, hatadan sonraki davranış. Genç kullanıcı hatalı bir ekran gördüğünde çoğunlukla siteyi suçlar ve denemeye devam eder. Yaşlı kullanıcı sıklıkla kendini suçlar: "ben yanlış bir şey yaptım". İkinci grup geri dönmez. Bu yüzden hata ekranı, erişilebilirlikte punto kadar belirleyicidir.

Punto: tarayıcıya güvenmek, düğme koymamak

Tarayıcılarda varsayılan gövde yazısı 16 pikseldir ve kullanıcı bunu ayarlardan büyütebilir. Metni rem ya da em ile tanımlarsanız, kullanıcının o ayarı bütün düzeni çarpar; px ile sabitlediğinizde ayar görmezden gelinir ve kullanıcı yalnızca zoom'a mahkum kalır.

Site içine konan A- / A+ düğmesini, rem tabanlı bir düzenden daha az güvenilir buluyorum. Nedeni basit: düğme yalnızca sizin sitenizde çalışır, tarayıcı ayarı kullanıcının gezdiği her yerde çalışır. Üstüne düğmenin bir bedeli de var. Seçimi saklamanız (çerez ya da localStorage), her bileşeni üç ayrı boyutta test etmeniz, taşan başlıkları ve kırılan ızgarayı tek tek düzeltmeniz gerekir. Aynı emeği esnek birim kullanmaya harcarsanız, zoom ve tarayıcı ayarı bedavaya gelir.

Pratik sınır: gövde metnini 16 pikselin altına indirmeyin, satır yüksekliğini 1.5 civarında tutun, satır uzunluğunu 70-80 karakterde kesin. Uzun satırda göz bir sonraki satırın başını bulmakta zorlanır, bu zorluk yaşla artar.

Kontrast bir tercih değil, bir sayı

Kontrast oranı hesaplanabilir bir değerdir ve iki rengin bağıl parlaklığından çıkar. WCAG normal metin için en az 4.5:1 ister. Büyük metinde (24 piksel, ya da kalınsa 18.66 piksel) 3:1'e iner. Buton kenarı, form çerçevesi, ikon gibi metin olmayan öğeler için de alt sınır 3:1'dir.

Tasarımda en sık rastlanan hata, ikincil metni beyaz zeminde #999 yapmaktır. O kombinasyon 2.85:1 verir, yani normal metin eşiğinin belirgin altında kalır. "Soluk görünsün" isteği anlaşılır ama soluk görünmesinin bedelini yaşlı kullanıcı öder. Beyaz zeminde #767676 tam 4.5:1 sınırındadır; ikincil metni oradan koyuya doğru seçin.

Bu hesabı gözle yapmayın. Tarayıcının geliştirici araçları bir rengin oranını doğrudan gösteriyor, ayrıca CI'a eklenebilecek denetim araçları var. Ölçmek beş saniye sürüyor, tartışmak yarım saat.

Tıklama hedefi ve menü mekaniği

WCAG 2.2, tıklama hedefi için AA seviyesinde 24×24 CSS pikseli alt sınır sayar; AAA seviyesinde bu 44×44'e çıkar. Titremesi olan bir kullanıcı için ikinci sayı gerçek hedeftir. İkonun kendisi 20 piksel kalabilir, önemli olan etrafındaki dolgu (padding) ile tıklanabilir alanın 44'e ulaşması ve komşu hedeflerle arasında boşluk bulunması.

Hover ile açılan açılır menüler bu yüzden sorun çıkarır. Böyle bir menüyü kullanmak, imleci menü başlığından alt öğeye giden dar bir koridor boyunca sabit tutmayı gerektirir. Koridordan bir piksel çıkınca menü kapanır ve kullanıcı en başa döner. Menüyü tıklamayla açılacak biçimde kurun, açıkken açık kalsın. Derin yapılarda ayrıca her şeyin tek sayfada listelendiği bir bölüm bulunsun; yolu kaybeden kullanıcı için en kısa çıkış orasıdır.

Hata yapan kullanıcıyı geri kazanmak

Form hatasında üç kural işe yarıyor:

• Hatayı alanın yanında, kendi cümlesiyle yazın. "Geçersiz giriş" bilgi vermez; "Telefonu 0 ile değil, alan koduyla başlatın" verir.
• Kullanıcının girdiği veriyi silmeyin. Bir hata yüzünden boşalan form, en çok yaşlı kullanıcıyı kaybettiren davranıştır.
• Rengi tek başına sinyal olarak kullanmayın. Kırmızı çerçevenin yanında metin ya da ikon da olsun.

Ziyaret edilmiş bağlantının rengi de buraya giriyor. Tarayıcı :visited ile bunu bedava veriyor, çoğu CSS sıfırlaması ise farkında olmadan siliyor. Nereye girdiğini hatırlamakta zorlanan kullanıcı için bu renk, aynı listede üçüncü kez dolaşmaktan kurtaran tek ipucu.

Bağlantıları yeni sekmede açmaktan da kaçının. target="_blank" geri tuşunu işlevsiz bırakır ve kullanıcı kendini nereden geldiğini bilmediği bir sayfada bulur.

Değişiklik ne zaman zarar verir

Kullanıcı bir işi adım adım ezberlemişse, tasarımı baştan kurmak o ezberi siler. Yaşlı kullanıcıda bunun sonucu "alışmak" değil, işi bırakmak olabiliyor. Görsel yenileme yapın, ama ödeme, giriş, randevu gibi kritik akışlarda adım sayısını ve adımların sırasını koruyun; zorunlu değişiklikleri de aynı ekranın içinde kısa bir açıklamayla duyurun.

Sıralamaya gelince: önce kontrast oranlarını ölçün, sonra hedef boyutlarını, en son punto sistemini esnek birime taşıyın. İlk ikisi birkaç saatlik iş ve en çok kullanıcıyı etkiler. Yeni bir "erişilebilirlik sayfası" açmak ise bu üçü yapılmadan hiçbir şeyi değiştirmez.