--- title: 'Rozet ve Etiketler' source: 'https://academia.sh/tr/kurslar/erisilebilir-kaliplar/rozet-ve-etiketler' course: 'Erişilebilir Bileşen Kalıpları' language: tr updated: '2026-08-17T18:09:33+00:00' license: 'CC BY-SA 4.0' --- # Rozet ve Etiketler Rozet ve etiketin belirtimi, sayı rozetinin erişilebilir adının kurulması, durum renklerinin kontrast denetimi ve renk bilgisi olmadan ayırt edilebilirliğin bağıl parlaklıkla hesaplanması. 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. ```js // 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.