M.AIM.AISoloLabsUI Sözlüğü · İçerik ve yerleşim

← UI Sözlüğü

Etiket chip / tag

bilinen diğer adları chip · tag · pill · filtre hapı

Böyle diyorsan: "küçük hap şeklindeki kategoriler" · "filtre baloncukları" → bunun adı etiket.

Hap biçimli küçük kategori/filtre etiketi; seçilebilir ya da silinebilir olabilir.

Etiket, hap biçimli küçük bir kimlik parçasıdır: kategori, filtre ya da seçilmiş bir değer. Asıl mesele şudur — aynı görünüşü paylaşan ÜÇ ayrı iş vardır: salt bilgi veren etiket (tıklanmaz), filtre çipi (seçilir), kaldırılabilir çip (✕ taşır). Üçü aynı göründüğü için kullanıcı hangisinin tıklanabilir olduğunu deneyerek öğrenir; bu maddenin en pahalı hatası da budur. Rozet gibi, etiketin de HTML'de bir karşılığı ve ARIA'da bir kalıbı yoktur — davranışını sen seçmek zorundasın, o yüzden en azından görünüşü işine göre ayırmak zorundasın.

Kapsam: Bu madde kategori, filtre ve kaldırılabilir değer etiketlerini kapsar. Bir öğenin köşesindeki sayı ya da durum işareti Rozet maddesindedir; görünüşleri benzer, işleri farklıdır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Etikete göre filtrele
TümüTarifTatlı ✕
24 sonuç gösteriliyor
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Blog etiketleri kur: tıklanabilir chip'ler (seçili olan dolu + aria-pressed), seçim değişince sonuç sayısı güncellensin; kaldırılabilir chip'lerde ✕ AYRI ve yeterince büyük bir buton olsun (chip'e tıklamak seç, ✕'e tıklamak kaldır — çakışmasın); 8+ chip'te '+N' özetiyle katlansın; klavyeyle Backspace son chip'i kaldırabilsin (girdi bağlamında).
DEBUG PROMPTU — HUYSUZLANIRSA

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

Chip'lerim huysuz; klasikleri sırayla ele: (1) ✕'in tıklama alanı 8px — kimse tutturamıyor, chip seçiliyor; (2) ✕ chip butonunun İÇİNE buton olarak gömülmüş (geçersiz HTML, odak davranışı bozuk); (3) 20 chip yan yana satırı patlatmış (+N özeti yok); (4) seçilebilir chip ile salt-bilgi etiketi aynı görünüyor — kullanıcı ölüleri tıklıyor; (5) seçili durumu yalnız renk anlatıyor (aria-pressed yok); (6) klavyeyle kaldırma imkânsız. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Hap gövdesiyuvarlak kenarlı etiket

    Kategori/filtre kimliği; tıklanabilirse buton, değilse salt metin — ikisi AYNI görünmemeli.

  • 2Seçili durumdolu zemin + aria-pressed

    Aktif filtrenin dolu renkle ayrışması; sonuç sayısı da onunla güncellenir.

  • 3Kaldırma ✕AYRI buton

    Chip'in içindeki ✕ ayrı bir butondur (iç içe buton YASAK — yan yana iki buton kurulur) ve tıklama alanı yeterli olmalı.

  • 4Taşma davranışı+N özeti

    Chip sayısı artınca satır patlamaz: ilk 5 + '+3' özeti ya da yatay kaydırma.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ASalt bilgitıklanamaz

    Yalnız etiketleme yapar (ör. yazının kategorisi). Tıklanabilir çiplerden GÖRSEL olarak ayrışmalı, yoksa kullanıcı ölü öğeleri tıklar.

  • BSeçilebilirbutton + aria-pressed="false"

    Filtre olarak çalışır. Buton olmalı ki klavyeyle erişilebilsin; basılabilirliği görünüşünden anlaşılsın.

  • CSeçiliaria-pressed="true"

    Aktif filtre. Dolu zeminle ayrışır ama durumu yalnız renge bırakma; aria-pressed olmadan ekran okuyucu seçili olduğunu bilmez.

  • DKaldırılabilirAYRI ✕ butonu

    Çipin içindeki ✕ ayrı bir butondur — iç içe buton geçersiz HTML'dir. Yan yana iki buton kurulur: gövde seçer, ✕ kaldırır.

  • ETaşma+N özeti

    Çip sayısı artınca satır patlamaz: ilk birkaçı gösterilir, gerisi '+3' özetine katlanır ya da yatay kaydırmaya alınır.

KODDAKİ ADLARI
HTMLyan yana iki buton (iç içe DEĞİL)geçerli yapı
ARIAaria-pressedseçili durumu
CSSmin-width/height: 24px (✕)WCAG 2.5.8 hedef boyutu
UX+N katlamataşma kontrolü
ERİŞİLEBİLİRLİK & SIK HATA
  • Tıklanabilir çip ile salt-bilgi etiketini AYNI gösterme. Görünüş işlevi anlatmıyorsa kullanıcı deneyerek öğrenmek zorunda kalır; bu, arayüzü bir tahmin oyununa çevirir.
  • ✕ ayrı bir butondur. Buton içine buton koymak geçersiz HTML'dir ve odak davranışını bozar; gövde ile ✕ yan yana iki buton olmalıdır.
  • ✕'in dokunma hedefi en az 24px olmalı (WCAG 2.5.8). Görsel olarak küçük kalabilir ama tıklama alanı büyütülür — yoksa kullanıcı kaldırmak isterken çipi seçer.
  • Seçili durumu yalnız renkle anlatma: aria-pressed ekle, böylece ekran okuyucu 'basılı' der. Renk körlüğünde dolu-boş ayrımı kaybolabilir.
  • Klavyeyle kaldırma mümkün olsun. Girdi bağlamında son çipi Backspace ile silmek yerleşik bir beklentidir; yalnız fareyle silinen çip klavye kullanıcısını kilitler.
SIK KARIŞTIRILANLAR

Rozetten farkı. Etiket SINIFLANDIRIR, rozet BİLDİRİR. Etiket içeriğin kendisine ait sabit bir niteliktir (kategori, filtre, seçilmiş değer) ve genelde tıklanabilir; rozet ise bir öğenin köşesine iliştirilen değişken bir bilgidir (kaç okunmamış) ve tıklanmaz. Aynı hap biçimini paylaşmaları ikisini aynı şey yapmaz.

Rozet sayfasına git →

Onay kutusundan farkı. İkisi de çoklu seçim yapar; ayrım GÖRÜNÜRLÜKTE. Onay kutusu SEÇENEKLERİ listeler — hepsi ekranda durur, işaretlenmemiş olanlar da görünür. Filtre çipi ise çoğu zaman SEÇİLENLERİ listeler; seçenekler bir menüde saklıdır. Az sayıda seçenek varsa onay kutusu daha dürüsttür, çünkü kullanıcı nelerin mümkün olduğunu görür.

Onay kutusu sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Rozet badgeOnay kutusu checkboxArama çubuğu search barSeçim kutusu select

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