Tooltip Kullanımı: Destekleyici Bilgi Nerede Biter
Tooltip tavsiyeleri neredeyse her yerde aynı iki cümleyle başlar: kritik bilgiyi tooltipe koyma, kısa yaz. Sonra aynı listede etiketsiz ikonlar için tooltip önerilir. İkonun başka etiketi yoksa tooltip zaten kritik bilginin kendisidir, yani kural kendi örneğiyle çelişiyor. Bu çelişkinin nerede çözüldüğüne bakmak, tooltip'i ne zaman kullanacağını da belirliyor.
Etiketsiz ikon meselesi
Bir çöp kutusu ikonunun ne yaptığı çoğu kullanıcı için tahmin edilebilir. Üç noktalı menü ya da içeriğe özel bir sembol için aynı şey geçerli değil. Orada tooltip bir ek açıklama değil, düğmenin tek adı oluyor.
İkonu ismiyle tanımak zorunluysa etiketi görünür tut ya da ikonun yanına metin koy. Yer yoksa tooltip kalabilir ama artık ona destekleyici içerik muamelesi yapamazsın: gecikmesi kısa olmalı, dokunmatikte de çalışmalı, ekran okuyucuya bağlı olmalı. Ben ikon butonlarını genelde görünür etiketle çözerim; toolbar gibi gerçekten yer olmayan yerlerde ise aria-label ile isimlendirip tooltip metnini aynı dizeden beslerim, böylece görsel ve sesli isim ayrışmıyor.
title etiketiyle çözmenin sınırı
"Tooltip klavyeyle de açılmalı" tavsiyesi doğru ama uygulamada çoğu kişi bunu title özniteliğiyle yapmaya çalışıyor. Tarayıcıların büyük bölümünde title sadece fare imleci beklerken görünür, tab ile odaklandığında görünmez. Yani klavye erişilebilirliği için verilen tavsiye, en yaygın uygulama biçimiyle sağlanmıyor.
Gerçekten klavyeyle açılan bir tooltip istiyorsan focus ve blur olaylarını da dinleyen bir bileşen gerekiyor, içeriği de aria-describedby ile tetikleyici öğeye bağlanmalı. Bunu üçüncü parti bir kütüphane olmadan yazabilirsin; iş yükünün büyük kısmı konumlandırmada, davranış tarafı otuz satırı geçmez.
WCAG 1.4.13 üç şey istiyor
Hover ya da odakla açılan içerik için erişilebilirlik ölçütü net: içerik ESC ile kapatılabilmeli, imleç tooltip'in üzerine gidebilmeli (kaybolmadan), ve kullanıcı öğeden ayrılmadıkça ekranda kalmalı. Üçüncü madde en çok atlanan yer. Zaman aşımıyla iki saniye sonra kaybolan tooltip, yavaş okuyan ya da ekranı büyütüp metni takip eden kullanıcı için okunmamış sayılır.
Dokunmatikte hover yok
Mobil tarafta hover diye bir durum olmadığı için tooltip'in karşılığı tıklamayla açılıp yine tıklamayla kapanan küçük bir katman oluyor. Buradaki hata, aynı bileşeni her iki ortamda da hover mantığıyla bırakmak: iOS'ta ilk dokunuş tooltip'i açıyor, kullanıcı ise butonun kendi işlevini bekliyor. Kritik bir aksiyon düğmesinde bu, yanlışlıkla tetiklenen ya da hiç tetiklenmeyen bir tıklama demek.
Tooltip'e anahtar kelime koyma tavsiyesi
Bazı rehberler tooltip metnine hedef anahtar kelimeyi yerleştirmeyi öneriyor. Bu tavsiye iki nedenle kötü. Tooltip içeriği sayfanın anlamlı gövde metni değil, arama tarafında getirisi belirsiz; buna karşılık kullanıcı, ihtiyacı olan tek cümlenin yerine pazarlama diliyle karşılaşıyor. Tooltip'in tek işi, üzerine gelinen öğenin ne yaptığını söylemek. O cümleyi kısaltmak için harcanan çaba, uzatmak için harcanandan daha çok işe yarıyor.
Yakın duran ikonlarda ok kullanımı
Birbirine yakın ikon gruplarında tooltip'in hangi öğeye ait olduğu okla belirtilir. Bu doğru ama asıl sorunu gizliyor: sekiz ikonu yan yana dizip her birini tooltip'e bağlamışsan arayüz zaten kullanıcıya iş yüklüyor. Ok, o yükü azaltmıyor, sadece görünür kılıyor. Sık kullanılan iki üç eylemi metinli düğmeye çıkarmak, kalanını menüye almak çoğu durumda daha iyi sonuç veriyor.