Back to Top Butonu: Nerede Gerekli, Nerede Fazlalık
Uzun sayfalarda yukarı çık butonu neredeyse refleks haline geldi. Oysa butonun kime ne kazandırdığı çoğu projede hiç sorulmadan geçiliyor, çünkü eklemesi kolay ve kaldırılmasını isteyen olmuyor. Butonun gerçekten iş gördüğü sayfalar var, ama sayıları sanıldığından az ve fark tasarımdan çok uygulama ayrıntısında.
Butonu kim kullanıyor
Yaygın gerekçe erişilebilirlik: kullanıcı sayfanın dibinde kalıyor, menüye dönmesi gerekiyor. Gerekçenin ilk yarısı doğru, ikinci yarısı eksik. Klavye kullanan ziyaretçinin elinde zaten Home tuşu var; ekran okuyucu kullanan ziyaretçi sayfanın başına landmark ve başlık listesiyle çok daha hızlı gidiyor. Geriye kalan asıl kitle, elinde böyle bir kısayolu olmayan dokunmatik ve fare kullanıcıları.
Bu, butonun gereksiz olduğu anlamına gelmiyor; erişilebilirlik iyileştirmesi olarak sunulmasının yanlış olduğu anlamına geliyor. Kaydırma kısayolu olmayan kullanıcıya kolaylık sağlayan bir konfor ögesi bu, ve konfor ögeleri de arayüzde yer kaplar, o yüzden yerini hak etmesi gerekir.
Atlanan kısım: odak nereye gidiyor
Butonun asıl kusuru görünümünde değil, tıklandıktan sonra ne olduğunda. Çoğu uygulamada görüntü yukarı kayıyor ama odak butonun üstünde kalıyor. Klavyeyle devam etmek isteyen kullanıcı Tab'a bastığında sayfanın en altındaki bağlantılara dönüyor, gözü ise sayfanın tepesinde. Ekran okuyucuda durum daha kötü, çünkü okuma imleci hiç oynamamıştır.
Çözüm karmaşık değil: hedefte bir landmark ya da başlık öğesine odağı taşı, gerekiyorsa tabindex="-1" verip focus() çağır. Buton bir div değil gerçek bir button olsun ki klavyeyle erişilebilsin. Bunlar birkaç satır, ama yukarı çık butonu anlatan yazıların çoğunda geçmiyor; anlatılan hep konum, renk ve ikon.
Animasyon için kütüphane gerekmez
Yumuşak geçiş tavsiyesi doğru, ani sıçrama kullanıcının sayfada nerede olduğunu kaybettiriyor. Ama bunun için ayrı bir kaydırma kütüphanesi kurmak gereksiz. CSS'te scroll-behavior: smooth tek satır, JavaScript tarafında window.scrollTo({top: 0, behavior: 'smooth'}) yine tek satır. Hareket hassasiyeti olan kullanıcılar için prefers-reduced-motion sorgusunu ekle, animasyonu orada kapat.
Sayfa gerçekten uzun mu
Dört ekran boyu eşiği makul bir başlangıç, ama tek ölçüt değil. Sabit üst menü varsa buton büyük ölçüde işlevsiz kalıyor, çünkü kullanıcının yukarı dönme sebebi genellikle menüye erişmek. Sonsuz kaydırmalı listelerde ise buton bambaşka bir soruna yama oluyor: asıl mesele kullanıcının 400 satır kaydırmış olması, ve doğru çözüm filtre ile arama.
Ben bunu erişilebilirlik başlığı altına yazmam, konfor başlığı altına yazarım, çünkü ölçüsü de oradan geliyor: butona basılma sayısını oturum başına say. Rakam kayda değer çıkmıyorsa buton arayüzde gereksiz yer tutuyordur, kaldır.
Kalacaksa nasıl kalsın
Tek buton, sağ alt köşe, sayfanın bir bölümü geçildikten sonra görünür. İkon tek başına yeterince açık değil, yanına kısa bir metin ya da en azından aria-label koy. Mobilde dokunma alanı yeterince büyük olsun ama içeriğin üstüne oturmasın; alt tarafta sabit bir eylem çubuğu varsa ikisi çakışır, bu durumda butondan vazgeçmek daha temiz.
Sayfanın altına iyi kurulmuş bir gezinme bölümü, çoğu durumda yukarı çık butonundan daha çok iş görüyor. Kullanıcı yukarı çıkmak istemiyor, bir yere gitmek istiyor.