Bileşenler

Anchor

Uzun bir sayfanın bölümlerine bağlantı veren ve okunan bölümü işaretleyen sayfa içi gezinme.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Anchor bir nav yer işaretidir; görünür başlıkla aria-labelledby, hideLabel ile aria-label üzerinden adlandırılır. Bağlantılar iç içe listelerdedir; okunan bölümün bağlantısı aria-current="location" taşır.

Klavye

Tuş	Davranış
Tab	Bağlantılar arasında gezer.
Enter	Bölüme gider.

Odak

Bağlantı kendi içine çizilen 2 px odak çizgisi gösterir. Bölüme gidince tarayıcı sayfayı kaydırır; hedef bölüme tabIndex={-1} vermek odağı da taşır.

Ekran okuyucu

Örnek	Okunan
Gezinme	“Bu sayfada, gezinme”
Geçerli bağlantı	“Komisyon, geçerli konum, bağlantı”

Kontrast

Bağlantı metni color-text-subtle ile 4.5:1, geçerli kenarlık 3:1 kontrastlıdır.

WCAG 2.2

Ölçüt	Anchor nasıl karşılar	Ürün ekibi ne yapar
2.4.1 Blokları atlama	Bölümlere doğrudan bağlantı verir.	Bölümlere `id` verin.
2.4.8 Konum	Okunan bölüm `aria-current` ile bildirilir.	-
2.4.11 Odak gizlenmemeli	-	Sabit üst çubuk için `scroll-margin-top` verin.