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

← UI Sözlüğü

Kırıntı yolu breadcrumb

bilinen diğer adları breadcrumb · ekmek kırıntısı · yol izi

Böyle diyorsan: "üstteki şu Ana sayfa > Ürünler yazısı" · "nerede olduğumu gösteren yol" → bunun adı kırıntı yolu.

Sayfa hiyerarşisinde nerede olduğunu gösteren tıklanabilir iz.

Kırıntı yolu, kullanıcının site hiyerarşisinde nerede olduğunu ve bir üst seviyeye nasıl çıkacağını gösterir. Adı Hansel ve Gretel'in bıraktığı kırıntılardan gelir ama işlevi biraz farklıdır: geldiğin yolu değil, bulunduğun yerin YAPIDAKİ konumunu gösterir. Bu ayrım önemlidir — kullanıcı bir ürüne aramadan geldiyse kırıntı yolu ona 'Ana sayfa › Elektronik › Kulaklık' der, oysa gerçekten izlediği yol o değildir. Doğru olan da budur: kırıntı yolu bir geçmiş değil bir haritadır. Yalnız iki seviyeli sitelerde gereksizdir; derinleştikçe değeri artar.

Kapsam: Bu madde hiyerarşideki konumu gösteren izi kapsar. Sıralı bir sürecin neresinde olunduğunu gösteren şey Adım Göstergesi, sayfalar arası ileri-geri gezinme ise Sayfalama maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Ana sayfa / Ürünler / Ayakkabı
Spor Ayakkabı X200 · ₺1.890
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Ürün sayfasına breadcrumb ekle: Ana sayfa / Kategori / Ürün sırasıyla; ilk iki seviye tıklanabilir link, son öğe kalın + aria-current="page" (link değil); ayraç işaretleri aria-hidden; mobilde sığmazsa ara seviyeler ... altında toplansın; arama motoru zengin sonucu için BreadcrumbList yapısal verisi eklensin.
DEBUG PROMPTU — HUYSUZLANIRSA

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

Breadcrumb'ım huysuz; klasikleri sırayla ele: (1) son öğe de link — kullanıcı bulunduğu sayfaya tıklayıp durabiliyor (aria-current yok); (2) uzun ürün adı taşıyor, kısaltma tanımsız; (3) mobilde tüm seviyeler sığmıyor (ara seviyeleri ...'ya toplama yok); (4) BreadcrumbList yapısal verisi yok — Google zengin sonucu kaçıyor; (5) ayraç karakterleri ekran okuyucuda 'eğik çizgi' diye okunuyor (aria-hidden değil). Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Kırıntı izi<nav aria-label="breadcrumb"> + <ol>

    Hiyerarşinin sıralı listesi: genelden özele. Görsel süs değil, gerçek linklerden oluşur.

  • 2Ayraçlararia-hidden

    Seviyeler arasındaki / veya › işaretleri; yalnız görseldir, ekran okuyucudan gizlenir.

  • 3Bulunduğun sayfaaria-current="page"

    Son öğe: kalın ve LİNK DEĞİL — kullanıcının bulunduğu yere tıklaması anlamsızdır.

  • 4Sayfa bağıbaşlık eşleşmesi

    Kırıntının son öğesi sayfa başlığıyla aynı dili konuşmalı; farklıysa kullanıcı kaybolur.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ANormal<nav> + <ol>

    Sıralı liste olarak işaretlenir; sıra bilgi taşıdığı için <ul> değil <ol> doğru olandır.

  • BBulunulan sayfaaria-current="page"

    Son öğe. Genelde link DEĞİLDİR (zaten oradasın) ve aria-current ile işaretlenir.

  • CUzun yolorta kısım katlanır

    Derin hiyerarşide ortadaki öğeler '…' ile katlanır; ilk ve son mutlaka görünür kalır.

  • DMobilyalnız üst seviye

    Dar ekranda tüm yol sığmaz. Yaygın çözüm yalnız bir üst seviyeyi göstermektir ('‹ Elektronik').

KODDAKİ ADLARI
HTML<nav> + <ol> + <li>anlamsal iskelet
ARIAaria-current="page"son öğe işareti
SEOschema.org BreadcrumbListarama zengin sonucu
ERİŞİLEBİLİRLİK & SIK HATA
  • <nav> içine al ve ona bir ad ver (aria-label="Kırıntı yolu"); sayfada birden çok gezinme bölgesi varsa hangisi olduğu ayırt edilebilmeli.
  • Sıralı liste kullan (<ol>): sıra anlam taşır ve ekran okuyucu kaçıncı seviyede olduğunu söyleyebilir.
  • Son öğeyi aria-current="page" ile işaretle; link yapılacaksa bile bulunulan sayfa olduğu bildirilmeli.
  • Ayıraçları (› /) CSS ile üret ya da aria-hidden yap; ekran okuyucunun her öğe arasında 'büyüktür' demesi gereksiz gürültüdür.
  • Dokunma hedeflerini kontrol et: kırıntılar küçük yazılır, ama tıklama alanları 24px'i karşılamalı (WCAG 2.5.8).
SIK KARIŞTIRILANLAR

Adım göstergesinden farkı. Kırıntı yolu YAPIDAKİ yeri gösterir ve her öğesi tıklanabilir bir yerdir; adım göstergesi bir SÜREÇTEKİ yeri gösterir ve ileri gitmek çoğu zaman şarta bağlıdır. Biri 'buradasın, yukarı çıkabilirsin' der, diğeri 'üç adımdan ikincisindesin' der. Karıştırılınca kullanıcı süreçte geriye tıklayıp verisini kaybedebilir.

Adım göstergesi sayfasına git →

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

Sayfalama sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Adım göstergesi stepper / stepsSayfalama paginationÜst çubuk navbar / headerSekmeler tabs

AYNI AİLEDE · GEZINME