İçindekiler Tablosu: Ne Zaman İşe Yarar, Ne Zaman Yer Kaplar

İçindekiler tablosu uzun sayfalarda işini gören basit bir gezinme aracı. Yine de her yazının başına konması gereken bir bileşen değil, ve rehberlerin ona yüklediği erişilebilirlik ile SEO faydaları göründüğü kadar sağlam durmuyor. Asıl soru şu: bu tablo okuyucuya kaydırma tasarrufu mu sağlıyor, yoksa içeriği bir ekran aşağı mı itiyor?

Önce eşik sorusu

İçindekiler tablosu, sayfaya baştan sona okumak için değil belirli bir bölümü bulmak için gelen okuyucuya yarar. Toplam sekiz yüz kelimelik, dört başlıklı bir yazıda bu koşul oluşmaz. Okuyucu iki kaydırmada zaten tüm başlıkları görür, tablo ise ilk ekranı işgal eder ve giriş paragrafını kıvrımın altına atar.

Eşiği kelime sayısıyla değil, bölümlerin bağımsızlığıyla koymak daha doğru. Bir yazıdaki bölümler ancak sırayla okunduğunda anlamlıysa, o yazı bir referans sayfası değildir ve tabloya ihtiyacı yoktur. Anlatı akışıyla yazılmış bir metinde tablo görüyorsanız, çoğu zaman gördüğünüz şey bir gezinme aracı değil, dağılmış bir yapının üstünü örten bir yama.

Konum

Ana gövdeye, ilk başlığın hemen üstüne yerleştirilen tablo tek düzenle her ekranda çalışır. Sol ray masaüstünde ferah durur ama mobilde nasılsa gövdeye taşınır, yani iki ayrı düzen bakımı çıkar. Sağ ray ise en zayıf seçenek: sağ sütun kullanıcı gözünde reklam alanıdır, orada duran her kutu banner körlüğüne yakalanma riskini taşır.

Yapışkan tablonun bedeli

Sabitlenen tablo, ekranın bir bölümünü kalıcı olarak kiralar. Mobilde tarayıcı çubuğundan geriye kalan alan zaten dar, üstüne yedi maddelik yapışkan bir liste koyduğunuzda okuyucuya iki paragraf genişliğinde bir pencere bırakırsınız. Masaüstünde sol rayda sabitlemek makul, mobilde ise kapalı başlayan ve dokunarak açılan bir yapı daha iyi çalışıyor.

Aktif bölümü tabloda işaretlemek istiyorsanız bunu kaydırma olayına bağlamayın; IntersectionObserver ile yapın, tarayıcıyı her kaydırma karesinde yeniden konum hesabına sokmaz.

Erişilebilirlik iddiasına şerh

Bu tabloyu bir erişilebilirlik çözümü olarak saymam. Ekran okuyucu kullanan biri sayfadaki başlıkları zaten kendi araçlarıyla listeleyip aralarında atlayabiliyor; başlık hiyerarşiniz düzgünse tablo ikinci ve gereksiz bir yol açar, hiyerarşiniz bozuksa da tablo onu onarmaz. Başlık gibi görünsün diye biçimlendirilmiş bir div, içindekiler listesine girdiğinde de div olmaya devam eder.

Tablonun erişilebilirlik açısından asıl kritik noktası bağlantının nereye götürdüğü. Çıpaya atladıktan sonra odak hedefe geçmezse, klavye kullanıcısı görsel olarak bölüme iner ama sekme tuşuna bastığında sayfanın en başındaki bağlantılarda gezinmeye devam eder. Hedef başlığa tabindex="-1" verip odağı oraya taşımak bunu çözer. Tabloyu da nav içine alın ve ona bir etiket verin, sayfadaki diğer gezinme alanlarından ayrılsın.

Arama sonuçları ve doğru ölçüm

Arama motorlarının sonuçlarda gösterdiği bölüm bağlantıları, sayfadaki görsel tablodan değil başlıklara verdiğiniz id çıpalarından ve başlık yapısından üretilir. Yani tablonun kendisi bir SEO bileşeni değil, düzgün çıpalamanın görünen yüzü. Çıpalar varsa tabloyu kaldırdığınızda o bağlantılar kaybolmaz.

Ölçüm tarafında yaygın bir çelişki var: aynı yazılar hem "okuyucu aradığını saniyeler içinde bulur" der hem de "sayfada kalma süresini uzatır" der. İkisi aynı anda doğru olamaz. İyi çalışan bir tablo, okuyucuyu ihtiyacı olan bölüme daha hızlı ulaştırır, dolayısıyla sayfada geçen süreyi çoğu zaman kısaltır. Bu tabloyu süreyle ölçerseniz başarılı olduğu anda başarısız görünür. Bakılacak sayı, tablodaki bağlantıların tıklanma oranı ve tıklayanların hedef bölümde kalıp kalmadığı.