Rozet ve Etiketler

Boş ve hata durumları bir ekranın tamamını kaplayan bildirimlerdi. Aynı bilgi çoğu zaman çok daha küçük bir yüzeyde taşınır: satırın yanındaki tek sözcüklük bir işaret, düğmenin köşesindeki bir sayı, kaydın türünü bildiren bir etiket.

Küçük yüzey iki tuzağı birlikte barındırır. Birincisi, bilginin yalnız renkte kalması; ikincisi, erişilebilir adın yalnız sayıdan ibaret olması. Bu ders ikisini de ölçülebilir bir denetime bağlar.

Ne Çözer, Ne Zaman Kullanılmaz

Rozet (badge), başka bir ögeye iliştirilen küçük durum ya da sayı işaretidir. İki türü vardır: durum rozeti kaydın hâlini bildirir (“Gecikti”), sayı rozeti bir miktarı bildirir (bildirim sayısı).

Etiket (tag), bir kaydın sınıflandırmasını gösteren, çoğu zaman kaldırılabilen işarettir. Süzgeç panelinde uygulanmış ölçütleri gösteren etiketler bu türdendir.

Ayrım işlevseldir: rozet iliştirildiği ögeyi niteler ve kendi başına etkileşimli değildir; etiket kendi başına bir nesnedir ve kaldırılabilir.

Kullanılmayacak durumlar:

• Rozet, kritik bilginin tek taşıyıcısı olamaz. “Gecikti” bilgisi yalnız rozette duruyorsa, rozeti göremeyen kullanıcı için o bilgi yoktur; aynı bilgi kaydın ayrıntı görünümünde de bulunmalıdır.
• Rozet tıklanabilir yapılmaz. Tıklanabilir bir işaret düğmedir ve düğme sözleşmesine uymak zorundadır; rozet görünümünde bir düğme, hedef boyutu eşiğini de kaçırır.
• Etiket, kaldırma denetimi olmadan kaldırılabilir gösterilmez. Üzerinde çarpı işareti bulunan bir etiket klavyeyle kaldırılamıyorsa yanıltıcıdır.

Yerel Öge Önce, ARIA Sonra

Rozetin işaretlemede ayrılmış bir karşılığı yoktur; kurulum ada ve metne dayanır.

Parça	Kaynak
Durum rozeti	Metin taşıyan bir öge; anlam metnin kendisindedir, ek rol gerekmez
Sayı rozeti	Sayı, iliştirildiği denetimin adının içine yazılır
Sayının değişmesi	Denetimin yanındaki kibar bölge bildirir, rozet bildirmez
Kaldırılabilir etiket	Metin bir öge, kaldırma düğmesi ayrı bir düğme
Kaldırma düğmesinin adı	“X etiketini kaldır” — etiket metnini içerir

Sayı rozetinin kurulumu en çok yanlış yapılan yerdir. “3” yazan bir rozet, düğmenin yanına ayrı bir düğüm olarak konduğunda erişilebilir ağaçta bağlamsız bir sayı olarak durur. Doğru kurulum, sayıyı düğmenin adına katmaktır: “Bildirimler, 3 okunmamış”. Görsel rozet ayrıca ağaçtan gizlenir, çünkü bilgisi zaten adın içindedir.

Kısaltılmış sayılar ayrı bir kural ister. Ekranda “99+” yazan bir rozetin adında gerçek sayı bulunmalıdır; görsel kısaltma bir yer kısıtıdır, bilgi kısıtı değil.

Klavye Sözleşmesi

Rozet odak almaz ve sekme sırasında yer tutmaz. Etiketin kaldırma düğmesi ise tam bir düğmedir:

Tuş	Davranış
Sekme	Kaldırma düğmesine sırayla ulaşılır
Giriş / boşluk	Etiketi kaldırır
Kaldırma sonrası odak	Bir sonraki etikete; son etiket kaldırıldıysa etiket listesinin kabına

Son maddede Kip Pencereler dersindeki dönüş noktası kuralının bir başka biçimi görünür: odaklı öge kaldırıldığında odağın nereye gideceği belirtimin parçasıdır. Belirlenmediğinde odak belgenin başına düşer ve kullanıcı süzgeç panelindeki yerini kaybeder.

Etiket kaldırıldığında sonuç sayısı değişir; bu değişim kibar bölgeden bildirilir.

Renk Yeterli Bir Kanal Değildir

Durum rozetlerinin rengi bir kısayoldur ve kısayolun sınırı hesaplanabilir. İki ölçüm gerekir: rozetin kendi kontrastı, ve rozetlerin birbirine karşı ayırt edilebilirliği. İkincisi renk bilgisi kullanılamadığında geriye ne kaldığını gösterir.

// rozet.mjs — rozet renklerinin kontrasti, parlaklik cakismasi ve ikinci kanal denetimi

const ayir = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
const dogrusal = (k) => (k <= 0.04045 ? k / 12.92 : ((k + 0.055) / 1.055) ** 2.4);
const parlaklik = (hex) => {
  const [r, g, b] = ayir(hex).map(dogrusal);
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
};
const oran = (a, b) => {
  const [x, y] = [parlaklik(a), parlaklik(b)].sort((p, q) => q - p);
  return (x + 0.05) / (y + 0.05);
};

const YUZEY = "#F4F4F5";   // kayit kartinin yuzeyi
const ROZET = [
  { ad: "odunc alinabilir", zemin: "#2E7D32", metin: "#FFFFFF", etiket: "Mevcut",  simge: true  },
  { ad: "rezerve",          zemin: "#B26A00", metin: "#FFFFFF", etiket: "Rezerve", simge: true  },
  { ad: "iade gecikti",     zemin: "#C62828", metin: "#FFFFFF", etiket: "Gecikti", simge: true  },
  { ad: "kayip",            zemin: "#616161", metin: "#FFFFFF", etiket: "Kayıp",   simge: false },
  { ad: "yeni kayit",       zemin: "#1565C0", metin: "#FFFFFF", etiket: null,      simge: false },
];

console.log("rozet             zemin    bagil parlaklik  metin/zemin  zemin/yuzey  1.4.3  1.4.11");
for (const r of ROZET) {
  const mz = oran(r.metin, r.zemin), zy = oran(r.zemin, YUZEY);
  console.log(
    `${r.ad.padEnd(17)} ${r.zemin}  ${parlaklik(r.zemin).toFixed(4).padStart(15)} ` +
      `${(mz.toFixed(2) + ":1").padStart(12)} ${(zy.toFixed(2) + ":1").padStart(12)} ` +
      `${(mz >= 4.5 ? "gecer" : "KALIR").padStart(6)} ${(zy >= 3 ? "gecer" : "KALIR").padStart(7)}`,
  );
}

// --- Parlaklik cakismasi: renk bilgisi kullanilamadiginda rozetler ayirt edilebilir mi?
// Iki rozetin birbirine karsi kontrast orani 1'e yakinsa, renksiz kanalda ozdeslesirler.
console.log("\nrozetler arasi kontrast orani (renk bilgisi olmadan ayirt edilebilirlik)");
console.log("                  " + ROZET.map((r) => r.ad.slice(0, 8).padStart(9)).join(""));
const cakisan = [];
for (const a of ROZET) {
  let satir = a.ad.padEnd(18);
  for (const b of ROZET) {
    const o = oran(a.zemin, b.zemin);
    satir += o.toFixed(2).padStart(9);
    if (a !== b && o < 1.5 && ROZET.indexOf(a) < ROZET.indexOf(b)) cakisan.push([a.ad, b.ad, o]);
  }
  console.log(satir);
}
console.log("\nrenksiz kanalda ayirt edilemeyen cift (esik 1.5:1):");
for (const [a, b, o] of cakisan) console.log(`  ${a} / ${b}: ${o.toFixed(2)}:1`);
if (!cakisan.length) console.log("  yok");

// --- Ikinci kanal denetimi ---------------------------------------------------
// Durum, renk disinda en az bir kanalda daha tasinmali: metin ya da bicim.
console.log("\nrozet             metin  simge  ikinci kanal");
for (const r of ROZET) {
  const kanal = [r.etiket ? "metin" : null, r.simge ? "simge" : null].filter(Boolean);
  console.log(`${r.ad.padEnd(17)} ${(r.etiket ? "var" : "—").padStart(5)} ${(r.simge ? "var" : "—").padStart(6)}  ` +
    `${kanal.length ? kanal.join(" + ") : "YOK — durum yalniz renkte"}`);
}

// --- Sayi rozetinin erisilebilir adi ----------------------------------------
const AD_ORNEK = [
  { gorunen: "3", ad: "3" },
  { gorunen: "3", ad: "Bildirimler" },
  { gorunen: "3", ad: "Bildirimler, 3 okunmamış" },
  { gorunen: "99+", ad: "Bildirimler, 128 okunmamış" },
];
console.log("\ngorunen  erisilebilir ad                 sayi var  baglam var  yeterli");
for (const a of AD_ORNEK) {
  const sayiVar = /\d/.test(a.ad);
  const baglamVar = /[A-Za-zÇĞİÖŞÜçğıöşü]{3,}/.test(a.ad);
  console.log(`${a.gorunen.padEnd(8)} ${a.ad.padEnd(30)} ${(sayiVar ? "evet" : "hayir").padStart(8)} ` +
    `${(baglamVar ? "evet" : "hayir").padStart(11)}  ${sayiVar && baglamVar ? "evet" : "HAYIR"}`);
}

rozet             zemin    bagil parlaklik  metin/zemin  zemin/yuzey  1.4.3  1.4.11
odunc alinabilir  #2E7D32           0.1548       5.13:1       4.66:1  gecer   gecer
rezerve           #B26A00           0.1977       4.24:1       3.86:1  KALIR   gecer
iade gecikti      #C62828           0.1368       5.62:1       5.11:1  gecer   gecer
kayip             #616161           0.1195       6.19:1       5.63:1  gecer   gecer
yeni kayit        #1565C0           0.1327       5.75:1       5.23:1  gecer   gecer

rozetler arasi kontrast orani (renk bilgisi olmadan ayirt edilebilirlik)
                   odunc al  rezerve iade gec    kayip yeni kay
odunc alinabilir       1.00     1.21     1.10     1.21     1.12
rezerve                1.21     1.00     1.33     1.46     1.36
iade gecikti           1.10     1.33     1.00     1.10     1.02
kayip                  1.21     1.46     1.10     1.00     1.08
yeni kayit             1.12     1.36     1.02     1.08     1.00

renksiz kanalda ayirt edilemeyen cift (esik 1.5:1):
  odunc alinabilir / rezerve: 1.21:1
  odunc alinabilir / iade gecikti: 1.10:1
  odunc alinabilir / kayip: 1.21:1
  odunc alinabilir / yeni kayit: 1.12:1
  rezerve / iade gecikti: 1.33:1
  rezerve / kayip: 1.46:1
  rezerve / yeni kayit: 1.36:1
  iade gecikti / kayip: 1.10:1
  iade gecikti / yeni kayit: 1.02:1
  kayip / yeni kayit: 1.08:1

rozet             metin  simge  ikinci kanal
odunc alinabilir    var    var  metin + simge
rezerve             var    var  metin + simge
iade gecikti        var    var  metin + simge
kayip               var      —  metin
yeni kayit            —      —  YOK — durum yalniz renkte

gorunen  erisilebilir ad                 sayi var  baglam var  yeterli
3        3                                  evet       hayir  HAYIR
3        Bildirimler                       hayir        evet  HAYIR
3        Bildirimler, 3 okunmamış           evet        evet  evet
99+      Bildirimler, 128 okunmamış         evet        evet  evet

Birinci tablo beklenen denetimi yapıyor ve bir kusur buluyor: turuncu rozetin beyaz metne karşı oranı 4.24:1, yani metin eşiğinin altında. Aynı renk metin dışı eşiği (3:1) karşılıyor. Bu, renk sisteminde sık görülen bir tuzaktır — turuncu, kırmızıyla yeşilin arasında bir parlaklığa oturur ve beyaz metni taşımaya yetmez. Çözüm rengi koyulaştırmak ya da metni koyu yazmaktır.

İkinci tablo dersin asıl bulgusudur. Beş rozet renginin onu çiftinin tamamı, renk bilgisi olmadan birbirinden ayırt edilemez. En kötü çift 1.02:1 ile “iade gecikti” ve “yeni kayıt”; kırmızı ile mavi, bağıl parlaklıkları neredeyse eşit olduğu için renksiz kanalda aynı gri tona düşer. En iyi çift bile 1.46:1’de kalır ve seçilen 1.5:1 eşiğini geçmez.

Bu sonuç bir tasarım hatası değildir. Renk paleti, İşlevsel Renkler dersindeki gibi rollere göre seçilmiştir ve her biri kendi zemininde eşikleri karşılar. Kanıtlanan şey daha temeldir: durum renkleri birbirinden ayırt edilecek biçimde seçilemez. Beş rolün beşini birden yeterli parlaklık aralığıyla ayırmak, renkleri kullanılamayacak kadar açık ve koyu uçlara itmek demektir. Bu yüzden 1.4.1 ölçütü rengi bilgi taşıyıcı olarak kullanmayı yasaklamaz; tek taşıyıcı olarak kullanmayı yasaklar.

Üçüncü tablo ikinci kanalın denetimidir. Beş rozetin üçü hem metin hem simge taşıyor, biri yalnız metin, biri hiçbiri. “Yeni kayıt” rozeti yalnız renkli bir noktadır ve bilgisi renkten başka hiçbir kanalda bulunmaz — denetim bunu doğrudan yakalıyor. Yalnız metin taşıyan “kayıp” rozeti yeterlidir; simge zorunlu değildir, ikinci kanalın bir tanesi yeter.

Son tablo sayı rozetinin adını sınıyor. “3” adı sayıyı taşır ama neyin üçü olduğunu söylemez; “Bildirimler” adı bağlamı taşır ama sayıyı düşürür. İkisini birleştiren ad her iki denetimi de geçer. Dördüncü satır kısaltma kuralını gösteriyor: ekranda “99+” yazarken adda gerçek sayı durur.

Ölçülebilir Kısıtlar

1.4.1 Rengin Kullanımı. Renk, bilgiyi ileten tek görsel araç olamaz. Denetimin karşılığı yukarıdaki ikinci kanal tablosudur.

1.4.3 Kontrast (En Az). Rozet metni zeminine karşı 4.5:1; büyük metin sayılan boyutlarda 3:1. Rozet metni küçük olduğu için pratikte hep 4.5:1 aranır.

1.4.11 Metin Dışı Kontrast. Rozetin zemini, üzerine oturduğu yüzeye karşı 3:1 karşılamalıdır; rozetin sınırı belirsizse rozetin kendisi görülemez.

2.5.8 Hedef Boyutu (En Az). Etiketin kaldırma düğmesi 24 x 24 piksellik alana genişletilir. Etiketler yan yana dizildiğinde iki kaldırma düğmesi arasındaki uzaklık da bu eşiği bozmamalıdır.

1.4.4 Metnin Yeniden Boyutlandırılması. Rozet metni iki katına çıktığında rozet büyümeli, metni kırpmamalıdır. Sabit genişlikli daire biçiminde bir sayı rozeti bu eşikte sayıyı keser.

4.1.3 Durum İletileri. Rozetteki sayının değişmesi bir durum iletisidir ve rozetin kendisinden değil kibar bölgeden bildirilir.

Sık Yapılan Hata ve Nasıl Anlaşılır

Rozet ayrı bir düğüm olarak okunuyor. Düğmenin yanındaki “3”, bağlamsız bir sayı olarak bildirilir. Anlaşılması: düğmenin ad alanında sayının bulunup bulunmadığına bakmak.

Durum yalnız renkli bir noktayla gösteriliyor. Anlaşılması: ekranı renksiz düşünmek yetmez, ölçmek gerekir — durum renklerinin ikili kontrast oranlarını hesaplamak ve 1.5:1’in altındaki çiftleri saymak.

Etiket kaldırma düğmesinin adı “kaldır”. Beş etiketin beşinde de aynı ad görünür ve hangi etiketin kaldırılacağı anlaşılmaz. Anlaşılması: bağlantı ve düğme düzleminde aynı adın kaç kez tekrarlandığını saymak; Ekran Okuyucu Deneyimi dersindeki “aynı metin farklı hedef” kusurunun düğme karşılığıdır.

Sayı rozeti sıfırken de duruyor. Boş bir rozet, olmayan bir bilgiyi ekranda tutar. Anlaşılması: sayı sıfırlandığında rozetin kaldırılıp kaldırılmadığına bakmak.

Özet

• Rozet iliştirildiği ögeyi niteler ve etkileşimli değildir; etiket kendi başına bir nesnedir ve kaldırma düğmesi tam bir düğmedir.
• Sayı rozetinin bilgisi iliştirildiği denetimin adına yazılır; görsel rozet ağaçtan gizlenir ve ekrandaki kısaltma adda açılır.
• Rozet metni 4.5:1, rozet zemini yüzeye karşı 3:1 eşiğini karşılamalıdır; turuncu zemin ölçümde 4.24:1 ile metin eşiğini kaçırdı.
• Durum renkleri birbirinden ayırt edilecek biçimde seçilemez: beş rengin on çiftinin tamamı renksiz kanalda 1.5:1 eşiğinin altında kalır, en yakın çift 1.02:1’dir.
• Bu yüzden her durum rozetinin ikinci bir kanalı olmalıdır — metin ya da simge; birinin bulunması yeterlidir, ikisi birden zorunlu değildir.
• Etiket kaldırıldığında odağın nereye gideceği ve sonuç sayısının nasıl bildirileceği belirtimin parçasıdır.

Sonraki Adım

Bu konudaki yedi kalıbın hepsinde son karar metne düştü. Bildirimin süresi metnin kelime sayısından hesaplandı, hata iletisinin yeterliliği kurtarma yolunu yazıp yazmamasına bağlandı, rozetin ikinci kanalı çoğu zaman bir sözcük oldu. Metin, bileşen belirtiminin son alanı değil; belirtimin kendisini taşıyan malzeme.

Sıradaki konu bu malzemeyi sisteme çevirir. Önce arayüz metnini denetlenebilir kurallara bağlar — ses tonu, uzunluk ve terim tutarlılığı ölçülebilir hâle gelir. Sonra hata iletisi yazımını, yerelleştirme kısıtlarını, sağdan sola düzeni ve bölgesel alan gerekliliklerini ele alır. İlk ders, aynı kavramın arayüzde kaç ayrı sözcükle anıldığını sayarak başlar.