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

← UI Sözlüğü

Sekmeler tabs

bilinen diğer adları tabs · sekme çubuğu · tab bar

Böyle diyorsan: "aynı yerde içerik değiştiren başlıklar" · "şu klasör sekmeleri gibi olan" → bunun adı sekmeler.

Aynı alanda farklı içerikler arasında geçiş yaptıran yatay başlıklar.

Sekmeler, aynı alanda birbirinin alternatifi olan içerikler arasında geçiş yaptırır. Doğru kullanıldıkları yer şudur: içerikler EŞ DÜZEYDEDİR ve kullanıcının aynı anda yalnız birini görmesi yeterlidir. En sık yapılan hata, sekmeleri bir sayfayı bölmek için kullanmaktır — oysa aralarında sıra ya da bağımlılık varsa (önce şunu doldur, sonra bunu) doğru parça sekme değil adım göstergesidir. İkinci mesele adreslenebilirliktir: sekme değişimi URL'ye yansımıyorsa kullanıcı gördüğü ekranı paylaşamaz, yenileyince başa döner ve tarayıcının geri tuşu beklenmedik davranır.

Kapsam: Bu madde eş düzeyli içerikler arasında geçişi kapsar. Sıralı adımlar Adım Göstergesi, aynı anda birden çoğu açılabilen katlanır bölümler ise Akordeon maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
BilgilerSiparişlerAyarlar
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Profil sayfasına 3 sekmeli tabs kur: Bilgiler / Siparişler / Ayarlar. Aktif sekme altı çizgili + aria-selected; içerik tek panelde değişsin; sekme durumu URL query'sine yazılsın (yenileyince ve link paylaşınca korunur); klavye ok tuşlarıyla sekmeler arasında gezilsin; içerik yükseklik farkları yerleşimi zıplatmasın.
DEBUG PROMPTU — HUYSUZLANIRSA

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

Tabs'ım huysuz; klasikleri sırayla ele: (1) sekme durumu URL'de değil — yenileyince ilk sekmeye dönüyor, link paylaşılamıyor; (2) paneller arası yükseklik farkı sayfayı zıplatıyor; (3) klavye okları çalışmıyor (roving tabindex yok), TAB tüm sekmeleri tek tek dolaşıyor; (4) sekme sayısı artınca şerit taşıyor (yatay kaydırma tanımsız); (5) aslında ayrı SAYFA olması gereken içerikler sekmeye tıkılmış (derin linkleme/SEO kaybı). Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Sekme başlıklarırole="tablist" + "tab"

    Yatay başlık şeridi; klavye ok tuşlarıyla gezilebilmeli (roving tabindex).

  • 2Aktif göstergealt çizgi / dolu zemin

    Hangi sekmenin açık olduğunun görsel dili; aria-selected ile birlikte gider.

  • 3İçerik panelirole="tabpanel"

    TEK paylaşılan alan: sekme değişince içerik değişir, sayfa değişmez — tabs'ı navigasyondan ayıran budur.

  • 4Tek-panel ilkesiURL senkronu

    Sekme durumu URL'e yazılırsa (?tab=...) yenileme ve paylaşım çalışır; yazılmazsa her yenileme ilk sekmeye döner.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ASeçiliaria-selected="true"

    Aktif sekme. Görsel vurgunun yanında aria-selected de olmalı; renk tek başına ekran okuyucuya bir şey söylemez.

  • BSeçili değilaria-selected="false"

    Diğer sekmeler. Tıklanabilir oldukları görünmeli — pasif başlık gibi duran sekmeye kimse tıklamaz.

  • COdak gezinmeroving tabindex

    Tab tuşu sekme çubuğuna BİR kez uğrar, sekmeler arasında ok tuşlarıyla gezilir. Her sekmeyi ayrı Tab durağı yapmak klavye kullanıcısını yorar.

  • DTaşmakaydırma / +N

    Sekme sayısı artınca satır patlar. Yatay kaydırma ya da 'daha fazla' menüsü kur; gizlenen sekmelerin var olduğu belli olsun.

  • EDevre dışıaria-disabled

    Erişilemeyen sekme. Sebebi söylenmezse kullanıcı arayüzü bozuk sanır; çoğu zaman doğru çözüm sekmeyi hiç göstermemektir.

KODDAKİ ADLARI
ARIAtablist / tab / tabpanel + aria-selectederişilebilir desen
shadcn/uiTabshazır parça
URL?tab=... senkronuyenileme + paylaşım
ERİŞİLEBİLİRLİK & SIK HATA
  • APG'nin tablist/tab/tabpanel kalıbını uygula: ok tuşlarıyla gezinme, aria-selected ve panelin sekmeye aria-labelledby ile bağlanması bu kalıbın parçasıdır.
  • Sekme çubuğu tek Tab durağı olsun (roving tabindex); sekmeler arasında ok tuşlarıyla gezilir.
  • Aktif sekmeyi yalnız renkle gösterme (WCAG 1.4.1): altı çizgi, kalınlık ya da ikon gibi ikinci bir işaret ekle.
  • Sekme durumunu URL'ye yansıt. Bu yalnız kolaylık değil erişilebilirlik meselesidir: kullanıcı yenilediğinde ya da paylaştığında aynı ekranı görmelidir.
  • Sekme içeriği değişince odağı panele ZORLA taşıma; kullanıcı klavyeyle geziniyorsa bu onu yerinden eder. Panelin odaklanabilir olması yeterlidir.
SIK KARIŞTIRILANLAR

Adım göstergesinden farkı. Sekmeler EŞ DÜZEYDEDİR ve istediğin sırada gezilebilir; adım göstergesi SIRALIDIR ve önceki adım tamamlanmadan sonrakine geçilmez. Ayrımı belirleyen soru: kullanıcı bunları istediği sırada gezebilir mi? Gezemiyorsa sekme kullanmak, ona olmayan bir özgürlük vaat eder ve tıkladığında engellenir.

Adım göstergesi sayfasına git →

Akordeondan farkı. Sekmelerde aynı anda YALNIZ BİRİ görünür; akordeonda birden çoğu aynı anda açık olabilir. Karşılaştırma gerekiyorsa akordeon daha iyidir çünkü kullanıcı iki bölümü yan yana görebilir. Mobilde de sekmeler yatay yer ister, akordeon dikeyde rahat çalışır — bu yüzden aynı içerik masaüstünde sekme, mobilde akordeon olarak sunulabilir.

Akordeon sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Adım göstergesi stepper / stepsAkordeon accordionAçılır menü dropdownÜst çubuk navbar / header

AYNI AİLEDE · GEZINME