Sayfa İçi Bağlantılar: Ne Zaman İşe Yarar, Nerede Bozulur

Uzun bir sayfanın başına içindekiler listesi koymak kolay. Zor olan iki şey var: o listenin gerçekten hızlandırdığı bir okuma biçimi olup olmadığına karar vermek, ve tıklandığında doğru yere gidildiğinden emin olmak. İkincisi göründüğünden çok daha sık bozulur.

Önce koşulu kontrol edin

Sayfa içi bağlantı, okuyucu sayfayı baştan sona okumayacaksa kazandırır. Referans dokümanları, uzun rehberler, ürün özelliklerinin tek sayfada sıralandığı içerikler böyledir: ziyaretçi belli bir bölümü arar, gerisini atlar.

Koşul sağlanmıyorsa liste zarar verir. Dört başlığı olan ve üç ekran süren bir yazıda içindekiler tablosu, asıl metnin başlangıcını bir ekran aşağı iter ve karşılığında hiçbir şey vermez. Röportajlarda, hikâye akışıyla ilerleyen yazılarda, sırayla uygulanması gereken adım adım anlatımlarda da aynı şey geçerli; orada bölüm atlamak zaten yanlış davranış.

Bir de sık tekrarlanan bir gerekçe var: içindekiler tablosunun sayfayı arama motorları için "daha anlamlı" hale getirdiği. Anlamı üreten şey başlık hiyerarşisidir, başlıklara verilen bağlantı listesi değil. Başlıklarınız düzgünse liste olmadan da yapılıdır; başlıklarınız düzgün değilse listeyi eklemek onu düzeltmez.

Listeyi başlıkların kopyası olarak yazın

Bağlantı metni gittiği başlığın aynısı olsun. Kısaltıp güzelleştirdiğinizde kullanıcı tıklar, iner, karşısında farklı bir cümle görür ve doğru yere gelip gelmediğini bir saniye düşünür. O saniye, listenin kazandırdığı zamandan uzun.

Listeyi otomatik üretiyorsanız yalnızca h2 seviyesini alın. Alt başlıkların hepsini içeri katmak listeyi kendi başına bir metin bloğuna çevirir. Listenin üstüne de açık bir etiket koyun: "İçindekiler" ya da "Bu sayfada". Bunlar tıklandığında sayfadan çıkmayacak bağlantılar, kullanıcının bunu tıklamadan önce bilmesi gerekiyor.

Kaydırma doğru yere gitmiyorsa

Tarayıcı bir id hedefine giderken hedef elemanın üst kenarını görünür alanın üst kenarıyla hizalar. Sayfanızda sabit ya da yapışkan bir üst çubuk varsa, başlık tam o çubuğun altına girer ve kullanıcı bölümün ilk satırını göremez. Klasik belirti: bağlantı çalışıyor gibi görünür, ama insanlar indikten sonra bir miktar yukarı kaydırır.

Çözümü hedef elemana scroll-margin-top vermek. Değeri sabit çubuğun yüksekliği artı biraz boşluk olsun. Tek satır, ve JavaScript ile ofset hesaplayan çözümlerin tamamının yerini tutuyor.

Yumuşak kaydırmayı da JavaScript'e bağlamam. scroll-behavior: smooth aynı işi görüyor. Bunu prefers-reduced-motion sorgusunun içine alın; hareket azaltma tercihi olan kullanıcıda uzun bir sayfayı baştan sona kaydırarak geçmek rahatsız edici, anında sıçrama daha doğru davranış.

Klavye ve ekran okuyucu tarafı

Bağlantıya tıklandığında sayfa kayar, ama odağın hedefe taşınıp taşınmadığı ayrı bir konu. Hedef başlık odaklanabilir bir eleman değilse, klavyeyle gezen kullanıcı sekme tuşuna bastığında kaldığı yerden devam edebilir; ekran okuyucu da yeni bölümü okumaya başlamayabilir. Tarayıcılar bu konuda aynı davranmıyor.

Güvenli yol, hedef başlığa tabindex="-1" eklemek. Eleman sekme sırasına girmez, ama programatik olarak odaklanabilir hale gelir ve tarayıcı odağı oraya taşır. Bunu test etmek de kolay: fareyi bırakın, bağlantıya klavyeyle gidip Enter'a basın, sonra bir kez sekme tuşuna basın. İmleç hedef bölümün içindeki ilk bağlantıya gidiyorsa doğru çalışıyor.

Akordeon ve sekme ile karşılaştırma

	Sayfa içi bağlantı	Akordeon	Sekme
Sayfa uzunluğu	Artar	Azalır	Sabit kalır
İçeriğin tamamı açık	Evet	Hayır	Hayır
Ctrl+F ile bulunur	Evet	Genelde hayır	Genelde hayır
Bölüme bağlantı verilebilir	Evet	Ek geliştirme ister	Ek geliştirme ister
Mobilde	Orta	İyi	Zayıf

Tablodaki üçüncü satır çoğu tartışmada atlanıyor ve seçimi en çok belirleyen satır o. Akordeonda ya da sekmede kapalı duran içerik sayfada arandığında bulunmaz, çünkü ya DOM'da yoktur ya da gizlidir. Bir kullanım kılavuzunda bu, kullanıcının aradığı cümleyi bulamaması demek.

Buradan çıkan seçim şu: aranarak okunan referans içeriklerde sayfa içi bağlantı, arayüz içindeki az kullanılan ayar gruplarında akordeon, sekme ise yalnızca bölümler birbirinin gerçek alternatifi olduğunda. "Sayfa çok uzun göründü" gerekçesiyle akordeona geçmek içeriği kısaltmaz, sadece saklar.