M.AIM.AISoloLabsUI Sözlüğü · Gezinme

← UI Sözlüğü

Sayfalama pagination

bilinen diğer adları pagination · sayfa numaraları · sayfa gezinmesi

Böyle diyorsan: "alttaki 1 2 3 sayfa numaraları" · "önceki-sonraki okları" → bunun adı sayfalama.

Uzun listeyi sayfalara bölen numara/ok kontrolü.

Sayfalama, uzun bir listeyi parçalara bölüp aralarında gezinmeyi sağlar. Sonsuz kaydırmaya göre üstünlüğü kontroldür: kullanıcı kaçıncı sayfada olduğunu bilir, o sayfayı paylaşabilir, geri dönebilir ve listenin bir sonu olduğunu görür. Sonsuz kaydırmanın gizli bedeli ise alt bilgidir — kullanıcı sayfanın altına asla ulaşamaz, çünkü alt sürekli uzar. Sayfalamanın kendi zorluğu numaraların dizilişindedir: yüz sayfalık bir listede bütün numaraları göstermek mümkün değildir, o yüzden ilk, son, bulunulan ve komşuları gösterilip arası katlanır.

Kapsam: Bu madde sayfalar arasında gezinmeyi kapsar. Hiyerarşide yukarı çıkma Kırıntı Yolu, sıralı bir sürecin adımları Adım Göstergesi maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
‹123›
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Tabloya sayfalama ekle: sayfa başına 20 kayıt; ‹ › oklar + numaralar (7+ sayfada 1 ... N kısaltması); aktif sayfa dolu + aria-current; ilk/son sayfada ilgili ok pasif; sayfa durumu URL'e yazılsın (?page=3) ve sayfa değişince liste en üste kaydırılsın; 'toplam 137 kayıt, 3/7 sayfa' bilgisi görünsün.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Sayfalamam huysuz; klasikleri sırayla ele: (1) toplam sayfa hesabında bir-kayması — son sayfa ya boş ya eksik (Math.ceil unutulmuş); (2) son sayfada 'sonraki' hâlâ aktif, tıklayınca boş liste; (3) sayfa durumu URL'de değil — yenileyince 1. sayfaya dönüyor; (4) sayfa değişince scroll listenin ortasında kalıyor; (5) 40 sayfanın 40 numarası da basılmış (kısaltma yok); (6) filtre değişince sayfa sıfırlanmıyor, boş sonuç görünüyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Sayfa numaraları<nav aria-label="pagination">

    Doğrudan atlama noktaları; çok sayfada 1 ... 7 8 9 ... 42 biçiminde kısaltılır.

  • 2Önceki / sonraki‹ ›

    Adım adım gezinme; İLK sayfada 'önceki', SON sayfada 'sonraki' pasifleşir.

  • 3Aktif sayfaaria-current="page"

    Dolu renkli tekil numara; tıklanmaz çünkü zaten oradasın.

  • 4Liste bağı?page=N

    Sayfa durumu URL'de yaşar; sayfa değişince liste başa kaydırılır ve toplam kayıt bilgisi görünür kalır.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • Aİlk sayfaönceki devre dışı

    Geri gidilecek yer yok. 'Önceki' butonu gizlenmek yerine devre dışı bırakılır ki yerleşim zıplamasın.

  • BOrtada… ile katlanmış

    Numaralar çok. İlk, son, bulunulan ve komşuları gösterilir; arası '…' ile katlanır — atlanan aralık belli olsun.

  • CBulunulan sayfaaria-current="page"

    Aktif numara. Link değil metin olması doğaldır (zaten oradasın) ve aria-current ile işaretlenir.

  • DSon sayfasonraki devre dışı

    Liste bitti. Toplam sayfa sayısını göstermek kullanıcıya listenin büyüklüğünü söyler; sonsuz kaydırmanın veremediği bilgi budur.

  • ETek sayfasayfalama gizlenir

    Bölünecek bir şey yok. Tek sayfalık listede sayfalama göstermek gereksiz gürültüdür.

KODDAKİ ADLARI
HTML<nav aria-label="pagination">landmark
ARIAaria-current="page"aktif sayfa
URL?page=N + rel=prev/nextdurum + SEO
ERİŞİLEBİLİRLİK & SIK HATA
  • <nav> içine al ve ad ver (aria-label="Sayfalama"); adsız gezinme bölgesi ekran okuyucuda diğerlerinden ayırt edilemez.
  • Bulunulan sayfayı aria-current="page" ile işaretle; sadece kalın yazmak görsel bir ipucudur.
  • Sayfa numaralarının dokunma hedefi 24px'i karşılasın (WCAG 2.5.8); numaralar küçük yazılır ama tıklama alanı büyütülür.
  • Sayfa değişimini duyur: içerik değişti ama sayfa yeniden yüklenmediyse ekran okuyucu kullanıcısı bunu fark etmez — role="status" ile 'Sayfa 3, 240 sonuçtan 41-60' gibi bir özet ver.
  • Sayfa durumunu URL'ye yaz. Yenileme, paylaşma ve geri tuşu bunun üzerine kuruludur; yalnız bellekte tutulan sayfa numarası kullanıcının işini bozar.
SIK KARIŞTIRILANLAR

Kırıntı yolundan farkı. Sayfalama YATAY gezinmedir — aynı seviyedeki uzun bir listede ilerlersin; kırıntı yolu DİKEY gezinmedir — hiyerarşide yukarı çıkarsın. İkisi aynı sayfada birlikte bulunabilir ve bu çakışma değildir: biri 'listenin kaçıncı sayfasındayım', diğeri 'sitenin neresindeyim' sorusuna cevap verir.

Kırıntı yolu sayfasına git →

Adım göstergesinden farkı. Sayfalamada sıra SERBESTTİR: doğrudan 7. sayfaya atlayabilirsin ve bir şey kaybetmezsin. Adım göstergesinde sıra ZORUNLUDUR ve atlamak çoğu zaman engellenir çünkü her adım bir öncekinin verisine dayanır. Görsel olarak benzer numaralı halkalar kullanmak, kullanıcıya yanlış bir özgürlük vaat eder.

Adım göstergesi sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Kırıntı yolu breadcrumbAdım göstergesi stepper / stepsTablo tableBoş durum empty state

AYNI AİLEDE · GEZINME