Adım göstergesi stepper / steps

bilinen diğer adları stepper · steps · wizard · adım adım akış

Böyle diyorsan: "1-2-3 diye giden adımlar" · "ödeme sayfasındaki aşama çubuğu" → bunun adı adım göstergesi.

Çok adımlı akışta nerede olduğunu gösteren 1→2→3 haritası.

Adım göstergesi, çok adımlı bir sürecin neresinde olunduğunu gösterir: sepet → adres → ödeme → onay. Var olma sebebi belirsizliği azaltmaktır — kullanıcı kaç adım kaldığını bildiğinde formu terk etme ihtimali düşer. Sekmelerden ayrıldığı yer sıradır: adımlar birbirine BAĞLIDIR, önceki tamamlanmadan sonrakine geçilmez ve bu kısıt görünür olmalıdır. En sık yapılan hata, adımları sekme gibi çizip hepsini tıklanabilir göstermektir; kullanıcı ileriye tıklar, engellenir ve arayüzün bozuk olduğunu düşünür. Geriye gitmek ise genelde serbesttir ve serbest olmalıdır — ama geri dönüldüğünde girilen verinin korunması şarttır, aksi hâlde kullanıcı ilerlemekten korkar.

Kapsam: Bu madde sıralı süreç göstergesini kapsar. Eş düzeyli içerikler arası geçiş Sekmeler, aynı seviyedeki listede ilerleme Sayfalama, hiyerarşideki konum Kırıntı Yolu maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı

Sepet

Adres

Ödeme

▸ kendiliğinden ilerliyor — İleri/Geri ile devral

Aşama aşama gezmek için okları ya da numaraları kullan.

YAPIM PROMPTU — AJANINA YAPIŞTIR

Ödeme akışına 3 adımlı stepper ekle: Sepet / Adres / Ödeme. Tamamlanan adımlar yeşil tikli ve tıklanıp geri dönülebilir, aktif adım dolu renkli + kalın etiketli, gelecektekiler soluk ve tıklanamaz. Adımlar arasında bağlantı çizgisi; tamamlanan kısmı renklensin. Adım durumu URL/veriyle senkron olsun ki sayfa yenilenince kaybolmasın.

DEBUG PROMPTU — HUYSUZLANIRSA

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

Stepper'ım bozuk; şu klasikleri sırayla ele: (1) adım durumu URL/veriyle senkron değil, yenileyince 1. adıma dönüyor; (2) bağlantı çizgisi son adımdan sonra da devam ediyor; (3) aktif/tamamlandı hesabında bir-kayması var (2. adımdayken 1. hâlâ 'aktif' görünüyor); (4) geri dönünce sonraki adımların girilmiş verisi siliniyor; (5) mobilde adım etiketleri taşıyor/kırılıyor. Belirti şu:

ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)

1Adım dairesinumara / ikon
Her aşamanın yuvarlağı; gelecekteki adımlar soluk renkte bekler.
2Bağlantı çizgisiconnector
Adımları birleştiren çizgi; tamamlanan kısmı renklenir, son adımdan sonra çizgi OLMAZ.
3Tamamlanan adım✓
Numarası tik'e dönüşür ve tıklanıp geri dönülebilir olur.
4Aktif adımvurgu
Şu anki aşama: dolu renk + kalın etiket; ileriye atlanamaz.

DURUMLAR — HANGİ HÂLDE NE OLUR

ATamamlanmış✓ + tıklanabilir
Geçilmiş adım. Genelde geri dönülebilir olmalı ve bu görünmeli; geri dönüş verinin korunmasıyla birlikte anlam kazanır.
BBulunulanaria-current="step"
Aktif adım. Yalnız renkle vurgulamak yetmez; aria-current olmadan ekran okuyucu kaçıncı adımda olunduğunu söyleyemez.
CBekleyenpasif görünüm
Henüz gelinmemiş adım. Tıklanabilir GÖRÜNMEMELİ — ileriye tıklayıp engellenen kullanıcı arayüzü bozuk sanır.
DHatalı adımkırmızı işaret
Geride eksik ya da hatalı bir alan kaldı. Hangi adımda olduğu göstergede işaretlenmeli, yoksa kullanıcı adımları tek tek gezerek arar.
EDar ekrankısaltılmış gösterim
Dört adım yan yana sığmaz. Yaygın çözüm 'Adım 2/4 · Adres' biçimidir; adım adlarını tamamen silmek belirsizliği geri getirir.

KODDAKİ ADLARI

HTML/CSS	<ol> + flex	numaralı adım yapısı
MUI	Stepper / Step / StepLabel	hazır parça adları
ARIA	aria-current="step"	bulunulan adım işareti

ERİŞİLEBİLİRLİK & SIK HATA

Sıralı liste kullan (<ol>) ve bulunulan adımı aria-current="step" ile işaretle; sıra bilgi taşır ve ekran okuyucu bunu okuyabilmeli.
Adım sayısını yazıyla da ver ('Adım 2/4'); yalnız görsel halkalar, ekranı görmeyen kullanıcıya ilerleme hissi vermez.
Bekleyen adımları tıklanabilir gösterme (WCAG 3.2.4 ruhu: tutarlı tanıma). Tıklanabilir görünüp çalışmayan öğe en can sıkıcı hatalardan biridir.
Adım geçişinde odağı yeni adımın başlığına taşı ve adı duyur; aksi hâlde klavye kullanıcısı hâlâ eski adımın sonundadır.
Geri dönüşte veriyi koru. Bu bir kolaylık değil güven meselesidir; veri kaybeden bir akışta kullanıcı ilerlemekten çekinir.

SIK KARIŞTIRILANLAR

Sekmelerden farkı. Adımlar SIRALIDIR ve birbirine bağlıdır; sekmeler EŞ DÜZEYDEDİR ve istediğin sırada gezilir. Görsel olarak benzemeleri en pahalı karışıklıklardan biridir: adımları sekme gibi çizip hepsini tıklanabilir göstermek, kullanıcıya olmayan bir özgürlük vaat eder ve tıkladığında engeller.

Sekmeler sayfasına git →

İlerleme çubuğundan farkı. Adım göstergesi AYRIK aşamaları sayar (dört adımdan ikincisi) ve her aşamanın bir adı vardır; ilerleme çubuğu SÜREKLİ bir oranı gösterir (%73) ve aşama adı yoktur. Kullanıcının 'şimdi ne yapacağım' sorusu varsa adım göstergesi, 'daha ne kadar bekleyeceğim' sorusu varsa ilerleme çubuğu doğrudur.

İlerleme çubuğu sayfasına git →

KAYNAKLAR

standartMDN — aria-current ↗
step değeriyle bulunulan adımın işaretlenmesi.
birincilW3C — ARIA APG, kalıp listesi ↗
Adım göstergesi için resmi bir kalıp yoktur; yapıyı liste ve aria-current ile kurarsın.
standartW3C — WCAG 2.2, Info and Relationships (1.3.1) ↗
Sıra ve durum bilgisinin koda yazılması şartı.

İLGİLİ PARÇALAR

Sekmeler tabs İlerleme çubuğu progress bar Kırıntı yolu breadcrumb Form alanı form field

AYNI AİLEDE · İÇERIK VE YERLEŞIM