Sayfa İçi Bağlantılar: Nerede İşe Yarar, Nerede Yolu Uzatır

Uzun bir sayfada aradığı başlığa tek tıkla inmek okuyucunun işini gerçekten kolaylaştırır. Ama anchor link kurmak içindekiler listesi eklemekten ibaret değil: sabit başlık, klavye odağı ve tarayıcı geçmişi ayrı ayrı bozulur, üstelik hiçbiri sayfaya gözle bakınca fark edilmez. Kısa sayfalarda ise bu bağlantılar çözdüklerinden fazla yer kaplar.

Önce uzunluk eşiği

Anchor link, kaydırma maliyeti gerçekten hissedilir olduğunda kazandırır. Kaba bir ölçü: mobilde ekran yüksekliğinin beş altı katını aşan ve en az dört başlığı olan sayfalar. Bunun altındaki her şeyde içindekiler listesi, okuyucuyla metin arasına giren fazladan bir blok olur.

Alfabetik indeksler, uzun kurulum rehberleri ve çok uzun sayfalardaki başa dönüş bağlantısı bu eşiği rahat geçer. Kısa bir yazının başına dört maddelik liste koymak ise yalnızca ilk ekranı doldurur.

SEO iddiası yanlış kurulmuş

"Sayfada geçirilen süreyi artırır, SEO'ya yarar" cümlesi kendi içinde çelişiyor. Okuyucuyu aradığı bölüme saniyeler içinde götüren bir tasarım sayfada geçirilen süreyi düşürür; işe yarıyorsa düşürmesi gerekir. Arama tarafındaki gerçek getiri başka yerde: Google, başlıklara verilmiş id'leri kullanarak sonuç listesinde doğrudan ilgili bölüme giden bağlantılar gösterebiliyor. Bunun için tutarlı bir başlık hiyerarşisi ve kalıcı id'ler gerekiyor, süre metriği değil.

Sabit başlık hedefin üstünü örter

Tarayıcı, hedef elemanı görüntü alanının en üstüne yaslar. Üstte sabit bir başlık çubuğu varsa tıklanan başlık tam onun altında kalır ve okuyucu metne ikinci paragraftan girer. Bir dokümantasyon sitesinde bunu tam olarak böyle gördüm: bağlantıların hepsi doğru çalışıyordu, sadece gidilen başlık görünmüyordu.

Çözüm tek satır, JavaScript'e gerek yok:

html { scroll-padding-top: 96px; }

Değer, sabit başlığın yüksekliğinden biraz fazla olmalı. scroll-padding-top'u kaydırma kabına vermek, her hedefe tek tek scroll-margin-top yazmaktan daha az bakım ister: başlık yüksekliği değiştiğinde düzeltilecek tek bir yer kalır.

scroll-behavior: smooth okuyucunun nereye gittiğini izlemesini kolaylaştırır, ama hareket duyarlılığı olan kullanıcılar için prefers-reduced-motion sorgusunun içine alınması gerekir.

Kaydırmak, odaklamak değildir

Bağlantıya tıklandığında sayfa doğru yere kayar, ama klavye odağı her tarayıcıda hedefe taşınmaz. Odak bağlantıda kalırsa kullanıcı Tab'a bastığında indiği bölüme değil, içindekiler listesinin bir sonraki maddesine gider. Ekran okuyucu da aynı sebeple eski konumundan okumaya devam eder.

Hedef başlığa tabindex="-1" vermek bunu çözer. Eleman normal odak sırasına girmez, yalnızca programatik olarak odaklanabilir hale gelir:

<h2 id="erisilebilirlik" tabindex="-1">Erişilebilirlik</h2>

Bağlantı metni gittiği başlıkla birebir aynı olsun. Farklı yazıldığında kullanıcı doğru yere indiğinden emin olamaz, yukarı dönüp listeyi yeniden okur.

Geri butonu zaten çalışıyor

Adres çubuğundaki hash değiştiği için sayfa içi bağlantı tarayıcı geçmişine kayıt düşer ve geri tuşu kullanıcıyı önceki konuma döndürür. Bu davranış varsayılan olarak gelir. Bozulmasının tek yaygın sebebi, bağlantının varsayılan davranışını iptal edip kaydırmayı elle yapmak: preventDefault() çağırıp scrollIntoView() kullanan bir kod, geçmişe kayıt düşmediği sürece geri tuşunu işlevsiz bırakır. Bu iş için kod yazmayın, tarayıcı doğrusunu yapıyor.

Sabit menü ve konum göstergesi

Yana ya da üste sabitlenmiş bir içindekiler menüsünde aktif başlığın vurgulanması okuyucuya nerede olduğunu söyler. Bunu IntersectionObserver ile kurmak, kaydırma olayını dinleyip her karede konum hesaplamaktan hem daha ucuz hem daha az titrek. Menünün kendisi ekranın küçük bir kısmını kaplamalı; mobilde içeriğin üstüne yapışan çok satırlı bir liste, çözdüğü sorundan büyüğünü yaratır.

Akordeon ne zaman daha iyi

İçerik baştan sona okunacaksa anchor link doğru seçim: metnin tamamı görünür kalır, bağlantılar yalnızca atlamak isteyene hizmet eder. Okuyucu onlarca kısa başlıktan yalnızca birini arıyorsa akordeon daha iyi çalışır, çünkü ilgilenmediği bölümler ekranı hiç doldurmaz.

Seçerken sayfa içi aramayı hesaba katın. Kapalı içeriği DOM'dan kaldıran ya da display: none ile gizleyen kendi yazdığınız bir akordeonda Ctrl+F hiçbir şey bulamaz. Yerleşik <details> elemanı güncel tarayıcıların bir kısmında kapalıyken de aranabiliyor ve eşleşen bölümü kendiliğinden açıyor. Kendi bileşeninizi yazmadan önce bunu deneyin.

Sık yapılan hatalar

• Başlık metni değişince id'nin de değişmesi. Dışarıdan verilmiş bağlantılar sessizce kırılır; id'ler başlıktan bağımsız ve kalıcı olmalı.
• Üç dört başlıklı kısa yazıya içindekiler listesi koymak.
• Sabit başlık yüksekliğini CSS'te tek bir sayı olarak yazıp mobilde başlığın iki satıra taşmasını hesaba katmamak.

Üçü de sayfaya bakarak anlaşılmaz. Yayına almadan önce sayfayı klavyeyle dolaşın ve mobilde birkaç başlığa tıklayın; sorun varsa ilk yarım dakikada çıkar.