Pagination

Rol ve anlam

• Kök bir <nav> öğesidir ve aria-label ile adlandırılır (varsayılan “Sayfalama”). Birden çok Pagination varsa her birine farklı ad verin (label).
• Kontroller bir listededir (ul / li); ekran okuyucu öğe sayısını duyurur.
• Geçerli sayfada aria-current="page" vardır; rengi yalnızca seçili yüzey değil, güçlü bir kenarlıktır.
• Sayfa düğmeleri “Sayfa 3” gibi adlandırılır; numaranın yanında “sayfa” kelimesi okunur. Önceki ve sonraki “Önceki” ve “Sonraki” adını taşır; dar ekranda yalnızca ok görünür ama ad aria-label ile kalır.
• Üç nokta aria-hidden ve okunmaz.
• Uçlardaki ve disabled durumundaki kontroller aria-disabled="true" taşır ve odaklanabilir kalır; böylece odak kaybolmaz.
• getPageHref verilirse sayfa ve ok kontrolleri bağlantı (<a href>) olur ve role="link" taşır. Adresi olmayan etkisiz bağlantı rolsüz kalır.
• Özet metni aria-live="polite" bölgededir; aralık değişince okunur.

Klavye

Tuş	Davranış
Tab	Sırayla: sayfa boyutu seçimi, önceki, sayfalar, sonraki. Etkisiz uçlar da odak alır.
Enter, Boşluk	Odaktaki düğmeyi çalıştırır; bağlantıda Enter yönlendirir.
Aşağı ok, Enter	Sayfa boyutu seçimi açıkken seçenekler arasında gezer (Select davranışı).

Odak

Odak halkası 2 px kalınlıkta ve 2 px uzaklıktadır. Sayfa değişince odak tıklanan kontrolde kalır. Tıklanan sayfa düğmesi kalkarsa (örneğin sayfa sayısı azalırsa) odak geçerli sayfaya taşınır; odak sayfanın başına düşmez.

Ekran okuyucu

Örnek	Okunan
Bölge	“Sayfalama, gezinti”
Geçerli sayfa	“Sayfa 3, düğme, geçerli sayfa”
Başka sayfa	“Sayfa 4, düğme”
İlk sayfada önceki	“Önceki, düğme, kullanılamıyor”
Özet	“21-40 / 345”
Sayfa boyutu	“Sayfa başına, birleşik kutu, 20”

Kontrast

Metin her markada ve modda en az 4.5:1’dir; değerler bigbang ve fixture token çıktısından hesaplandı.

Çift	Açık mod	Koyu mod
color-text-default / color-surface-default	16.16:1	17.18:1
color-text-default / color-surface-selected (geçerli sayfa)	15.04:1	13.98:1
color-text-default / color-action-subtle-hovered	14.40:1	13.49:1
color-text-subtle / color-surface-default (özet)	8.77:1	10.27:1
color-border-strong / color-surface-default (geçerli sayfa kenarlığı)	4.63:1	7.14:1
color-focus-ring / color-surface-default	5.97:1	8.09:1

Seçili yüzeyin sayfaya oranı düşüktür; bu yüzden geçerli sayfa ayrıca 3:1’in üstünde bir kenarlık ve aria-current taşır.

WCAG 2.2

Ölçüt	Pagination nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	nav, liste ve aria-current.	Birden çok Pagination’a farklı label verin.
1.4.1 Renk kullanımı	Geçerli sayfa yüzey, kenarlık ve aria-current ile ayrılır.	Sayfa durumunu başka renkle vermeyin.
1.4.11 Metin dışı kontrast	Geçerli sayfa kenarlığı ve odak halkası en az 4.63:1.	Özel renk vermeyin.
2.1.1 Klavye	Bütün kontroller Tab ve Enter ile çalışır.	Kontrolleri tabIndex ile değiştirmeyin.
2.4.3 Odak sırası	Sıra görsel sıradır; odak sayfa değişince kaybolmaz.	Yeni sayfayı yüklerken disabled kullanın, kontrolleri kaldırmayın.
2.4.7 Odak görünür	2 px halka.	outline’ı kaldırmayın.
2.5.8 Hedef boyutu	Öğeler en az 32 × 32 px.	Küçültmeyin.
4.1.2 Ad, rol, değer	Her kontrolün adı, durumu ve rolü var.	Sayfa adlarını yerelleştirirken numarayı koruyun.