Bağlantılarda title Attribute: Ne Zaman Yazılır, Ne Zaman Yazılmaz

Bir bağlantının nereye gittiğini merak eden kullanıcı imleci üzerine götürüp bekler. Çıkan küçük kutu title attribute'un işidir ve gerçekten yardımcı olur, ama yalnızca fare kullanan bir azınlığa. Bu ayrım, attribute'u nerede kullanacağınızı da belirliyor.

Tooltip ne yapar

Bir bağlantıya title yazdığınızda tarayıcı, imleç üzerinde bir saniye kadar sabit kaldığında küçük bir kutu açar. Kutunun içeriği bağlantı metninin yerine geçmez, yanına eklenir. Doğru kurulduğunda kullanıcı tıklamadan önce nereye gideceğini kestirir. Bilgi kokusu dediğimiz şey budur: bağlantının hedefi hakkında verdiği ipucu.

Kutunun açılması için hover gerekir. Yazının geri kalanı bu varsayıma dayanır ve varsayım çoğu ziyaretçide tutmaz.

Kim görüyor, kim görmüyor

Dokunmatik ekranda hover diye bir durum yok. Parmak ya ekrana değer ya değmez; arada bir "üzerinde duruyor" hali bulunmadığı için tooltip hiç açılmaz. Uzun basma da genelde bağlam menüsünü getirir.

Klavyeyle gezinen kullanıcı Tab ile bağlantıya odaklandığında da kutu açılmaz. Tarayıcılar title tooltip'ini odakla değil yalnızca imleçle tetikler, yani klavye kullanıcısı attribute'un varlığından habersiz kalır.

Ekran okuyucularda durum ayara bağlı. Daha önemlisi, erişilebilir ad hesaplanırken bağlantının görünür metni title'ın önüne geçer; attribute ada ancak metin yoksa girer. Yani düzgün yazılmış bir bağlantıda title, ekran okuyucu için çoğu zaman hiç var olmaz.

Geriye kalan kitle, fare kullanan masaüstü ziyaretçilerin bir alt kümesi. Kendi ölçümünüzdeki mobil oranına bakın, tooltip'in üst sınırını doğrudan o sayı çiziyor. Buradan tek bir kural çıkıyor: kullanıcının karar vermek için ihtiyaç duyduğu hiçbir bilgi title içinde kalmamalı.

Önce görünür metin

"Devamı", "Buraya tıklayın", "Detaylar" gibi bağlantılar tek başına hiçbir şey anlatmaz. Bunları title ile yamamak sorunu çözmez, yalnızca fareli kullanıcılar için erteler. Ben bu ihtiyacı genelde bağlantı metnini yeniden yazarak çözerim, çoğu durumda iki kelimelik bir değişiklik yetiyor: "Detaylar" yerine "Fatura kesme adımları".

Görünür metinle erişilebilir adın uyuşması ayrıca bir erişilebilirlik şartı. Sesli komutla gezinen kullanıcı ekranda gördüğü kelimeyi söyler; bağlantının adı başka bir şeyse komut boşa gider. WCAG'ın Label in Name ölçütü tam olarak bunu kapsıyor. title ile görünür metni birbirinden uzaklaştırmak, yardım etmeye çalışırken bir kullanıcı grubunu tamamen dışarıda bırakabilir.

Attribute'un gerçekten yerinde durduğu yerler

• <iframe> üzerinde title süs değil, gereklilik. Ekran okuyucu gömülü çerçeveyi bu adla duyurur; boş bırakılırsa kullanıcı sadece "çerçeve" duyar ve içeride ne olduğunu bilmez.
• Kısaltmalarda <abbr title="..."> açılımı taşır. Yine de kısaltmanın ilk geçtiği yerde açılımı metnin içine yazmak daha sağlam bir çözüm.
• Metinsiz ikon bağlantılarda bir ada ihtiyaç var, ama oradaki doğru araç aria-label. title yalnızca fareli kullanıcıya görünen bir ek olarak kalır.

Yazacaksanız kısa yazın. Altmış karakter iyi bir üst sınır, daha uzunu zaten hover süresi içinde okunmuyor. Bağlantı metnini kelimesi kelimesine tekrarlayan title ise hiçbir şey eklemez, sadece imlecin altını kalabalıklaştırır.

Uygulama sırası

1. Bağlantı metnini, çevresindeki cümle olmadan da anlaşılacak şekilde yaz.
2. Hedef beklenmedikse (yeni sekmede açılıyorsa, PDF indiriyorsa, üyelik istiyorsa) bunu görünür şekilde belirt; ikon ya da parantez içi kısa not işe yarar.
3. İkisinden sonra hâlâ eklenecek bir ayrıntı kaldıysa, işte o title'a girer.

Üçüncü adıma sıra gelmiyorsa endişelenmeyin. İlk iki adım düzgün yapıldığında tooltip'e ihtiyaç kalmaması normal, hatta iyi bir işaret.