Rozet badge

bilinen diğer adları badge · sayaç rozeti · bildirim noktası

Böyle diyorsan: "zildeki kırmızı sayı" · "okunmamış işareti" → bunun adı rozet.

Bir öğenin köşesindeki sayı/durum göstergesi.

Rozet, bir öğenin köşesine iliştirilen küçük sayı ya da durum işaretidir: zildeki okunmamış adedi, sepetteki ürün sayısı, sekmedeki yeni-içerik noktası. Teknik olarak karşılığı YOKTUR — ne HTML'de bir rozet elementi ne de ARIA kalıp listesinde bir rozet deseni bulunur. Bu yüzden rozet her zaman İKİ parçadır: taşıyıcı öğe ve o öğenin erişilebilir adı. Sayıyı yalnız göze göstermek, ekran okuyucu kullanan biri için rozetin hiç olmaması demektir. İkinci kural da güvenle ilgili: okunduğunda düşmeyen rozet, kullanıcının bir daha rozete bakmamasına yol açar.

Kapsam: Bu madde sayı ya da durum taşıyan köşe rozetini kapsar. Kategori ve filtre için kullanılan hap biçimli öğe Etiket maddesindedir — ikisi görsel olarak benzer ama işleri tamamen farklıdır.

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

🔔1✉️2🛒

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

YAPIM PROMPTU — AJANINA YAPIŞTIR

Zil ikonuna okunmamış rozeti ekle: kırmızı daire sağ üst köşede, gerçek zamanlı sayı, 9'dan sonra '9+'; bildirimler okununca anında düşsün, sıfırda rozet tamamen kaybolsun; ikonun erişilebilir adı sayıyı içersin ('Bildirimler, 3 okunmamış'); yeni bildirim gelince küçük bir pop animasyonu dikkat çeksin.

DEBUG PROMPTU — HUYSUZLANIRSA

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

Rozetim huysuz; klasikleri sırayla ele: (1) sayı 0'da bile kırmızı '0' rozeti duruyor; (2) bildirimler okununca sayı düşmüyor (cache/senkron sorunu) — kullanıcı rozete güvenmeyi bırakıyor; (3) 3 haneli sayı rozeti yumurta gibi şişirmiş (9+ kısaltması yok); (4) ekran okuyucu yalnız 'zil' diyor — sayıdan habersiz; (5) rozet ikonun üstüne değil yanına konmuş, neye ait belirsiz. Belirti şu:

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

1Taşıyıcı ikonzil/zarf/sepet
Rozetin üstünde durduğu öğe; rozet ikonun sağ üst köşesine çıpalanır.
2Sayıokunmamış adedi
Gerçek zamanlı sayı; okununca DÜŞMELİ — düşmeyen rozet güveni bitirir.
3Taşma kuralı9+ / 99+
Sayı büyüyünce genişleyip ikonu ezmez; eşikten sonra kısaltılır.
4Sıfır durumurozet YOK
Sıfırda rozet tamamen kaybolur — '0' rozetli zil, hiç rozetsiz zilden kötüdür.

DURUMLAR — HANGİ HÂLDE NE OLUR

ASıfırrozet YOK
Sayı sıfırsa rozet tamamen kaybolur. '0' yazan bir rozet, hiç rozetsiz hâlden daha kötüdür: göze yeni bir şey varmış gibi görünür.
BSayılı1–9
Normal hâl. Sayı gerçek zamanlıdır ve okundukça düşer; düşmeyen sayı rozetin güvenini bitirir.
CTaşma9+ / 99+
Eşik aşılınca sayı kısaltılır. Amaç rozetin genişleyip taşıyıcı ikonu ezmemesi; üç haneli rozet yumurtaya döner.
DNoktalısayısız işaret
Sayı önemli değilse yalnız bir nokta konur: 'yeni bir şey var' der, kaç tane olduğunu söylemez. Sekmelerde sık kullanılır.
ECanlı güncellemerole="status"
Sayı arka planda değişiyorsa duyurulmalı. Ama her saniye değişen bir sayacı duyurmak kullanıcıyı boğar — eşik koy.

KODDAKİ ADLARI

CSS	position:absolute sağ-üst çıpa	standart konum
ARIA	aria-label='Bildirimler, 3 okunmamış'	bileşik ad
ARIA	role="status"	canlı değişen sayıyı duyurur
UX	sıfırda gizle + 9+ kısalt	güven + taşma

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

Sayıyı taşıyıcının erişilebilir adına KAT: 'Bildirimler, 3 okunmamış'. Rozeti ayrı bir görsel olarak bırakırsan ekran okuyucu yalnızca 'Bildirimler' der ve rozet hiç var olmamış olur.
Durumu yalnız renkle anlatma (WCAG 1.4.1). Kırmızı bir rozetin 'hata' mı 'okunmamış' mı olduğu renkten anlamayan biri için belirsizdir; sayı ya da metin ekle.
Rozet bir dokunma hedefi DEĞİLDİR; tıklanabilir olan taşıyıcı öğedir. Rozeti kendisi tıklanabilir yaparsan en az 24px hedef kuralını karşılamak zorundasın.
Canlı duyuruyu ölçülü kullan: role="status" kibar (sırasını bekler), role="alert" araya girer. Okunmamış sayacı için kibar olan doğrudur.

SIK KARIŞTIRILANLAR

Etiketten (chip) farkı. Rozet BİLDİRİR, etiket SINIFLANDIRIR. Rozet bir öğenin köşesine iliştirilir ve o öğe hakkında değişken bir bilgi taşır (kaç tane, yeni var mı); etiket ise içeriğin kendisine ait sabit bir niteliktir (kategori, filtre). Pratik test: tıklanınca ne olacağını soruyorsan etiket, hiç tıklanmıyorsa ve sayı gösteriyorsa rozet.

Etiket sayfasına git →

Kısa bildirimden farkı. Rozet KALICI bir durumdur, kısa bildirim GEÇİCİ bir olaydır. 'Üç okunmamış mesajın var' rozettir çünkü sen okuyana kadar doğru kalır; 'Mesaj gönderildi' kısa bildirimdir çünkü olay bitmiştir. Kalıcı durumu toast ile anlatırsan kullanıcı kaçırdığında bir daha göremez.

Kısa bildirim sayfasına git →

KAYNAKLAR

birincilW3C — ARIA Authoring Practices, kalıp listesi ↗
Listede rozet kalıbı YOKTUR — aramak ve bulamamak da bir bilgidir: davranışı standart vermez, sen kurarsın.
standartMDN — role="status" ↗
Canlı değişen sayının kibar duyurulma yolu.
standartMDN — aria-label ↗
Sayıyı taşıyıcının adına katmanın yolu.
standartW3C — WCAG 2.2, Use of Color (1.4.1) ↗
Rozetin anlamını yalnız renge yükleme yasağı.

İLGİLİ PARÇALAR

Etiket chip / tag Kısa bildirim toast / snackbar Uyarı şeridi alert / banner

AYNI AİLEDE · GERI BILDIRIM