Bileşenler

Breadcrumbs

Geçerli sayfanın hiyerarşideki yerini gösteren, uzun yolları katlayan konum izi.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Breadcrumbs, APG konum izi kalıbını uygular. Kök <nav aria-label> bir gezinme bölgesidir; içinde sıralı bir liste (<ol>) vardır. Geçerli sayfa bağlantı olmayan bir metindir ve aria-current="page" taşır. Ayırıcı simgeler aria-hidden içindedir. Bölge adı label ile verilir; verilmezse “Konum” kullanılır.

Klavye

Tuş	Davranış
Tab	Sıradaki bağlantıya ya da “…” düğmesine geçer.
Enter	Bağlantıyı izler ya da “…” düğmesini etkinleştirir.
Space	“…” düğmesini etkinleştirir.

“…” düğmesi etkinleşince yol yerinde açılır, düğme kaybolur ve odak ilk açılan bağlantıya geçer.

Odak

Bağlantıda ve katlama düğmesinde 2 px color-focus-ring halkası 2 px aralıkla çizilir. Halka yalnızca klavye odağında görünür (focus-visible) ve geçişsiz, anında belirir.

Ekran okuyucu

Örnek	Okunan
Bölge	“Konum, gezinme”
Bağlantı	“Birinci düzey, bağlantı”
Geçerli sayfa	“Geçerli sayfa, geçerli sayfa”
Katlama düğmesi	“Gizlenen konumları göster, düğme”

Ayırıcılar okunmaz. Okuyucuların çıktısı farklılık gösterebilir.

Kontrast

Bağlantı metni (color-fg-subtle), geçerli sayfa metni (color-fg-default) ve ayırıcı simgesi (color-icon-subtle) zeminlerinde gerekli kontrastı taşır: metinler için en az 4,5:1, simge için 3:1. Geçerli sayfa yalnız renkle değil, bağlantısız olmasıyla ve aria-current ile de ayrılır.

WCAG 2.2

Ölçüt	Breadcrumbs nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	`nav` bölgesi, sıralı liste ve `aria-current="page"`.	Öğeleri üst düzeyden geçerli sayfaya sıralayın.
1.4.1 Renk kullanımı	Yol akan metin değil, bir gezinme bölgesidir: geçerli sayfa dışındaki her öğe bağlantıdır; geçerli sayfa `aria-current` taşıyan düz metindir. Bağlantılar üzerine gelince varsayılan metin rengine döner.	Breadcrumbs’ı akan metnin içine koymayın; bağlantıları `className` ile yeniden biçimlendirmeyin.
2.1.1 Klavye	Tüm bağlantılar ve “…” düğmesi klavyeyle çalışır.	Öğelere kendi tuş işleyicinizi eklemeyin.
2.4.3 Odak sırası	Odak açılan bağlantıya taşınır; sıra görsel sırayla aynıdır.	Yolu yeniden sıralamayın.
2.4.7 Görünür odak	Bağlantı ve düğmede `focus-visible` halkası.	Halkayı kaldırmayın.
2.5.8 Hedef boyutu (asgari)	Katlama düğmesi 32 px’tir.	Düğme boyutunu küçültmeyin.
4.1.2 Ad, rol, değer	Bölge `label` ile, düğme “Gizlenen konumları göster” ile adlandırılır.	Sayfada birden çok konum izi varsa her birine farklı `label` verin.