--- title: 'Bildirim Şeritleri ve Anlık Bildirimler' source: 'https://academia.sh/tr/kurslar/erisilebilir-kaliplar/bildirim-seritleri-ve-anlik-bildirimler' course: 'Erişilebilir Bileşen Kalıpları' language: tr updated: '2026-08-17T18:09:33+00:00' license: 'CC BY-SA 4.0' --- # Bildirim Şeritleri ve Anlık Bildirimler Bildirim şeridi ile anlık bildirimin ayrımı, görünme süresinin metnin okunma hızından hesaplanması, art arda gelen olayların birleştirilmesi ve kibar–atılgan kuyruğunun kayıp ölçümü. Araç ipucunu kullanıcı açtı: bir ögeye yöneldi ve katman belirdi. Bildirimde bu bağ yoktur. Sistem bir şey olduğunda haberi kendisi gönderir; kullanıcı ekranın neresine bakıyorsa oraya bakmaktadır, hatta ekrana hiç bakmıyor olabilir. Bu, üç yeni soru getirir. Bildirim ne kadar ekranda kalmalıdır — kaybolan bir metin okunmadan gitmiş sayılır. Aynı anda gelen iki bildirim ne yapmalıdır — biri diğerini bastırırsa ne kaybedilir? Ve görsel kanalın dışındaki kullanıcı bildirimi nasıl alır? Bu ders üçünü de hesaplanabilir bir kısıta bağlar. ## Ne Çözer, Ne Zaman Kullanılmaz İki ayrı kalıp vardır ve karıştırılmaları en yaygın kusurdur. **Bildirim şeridi (notification banner)**, sayfa akışının içinde duran, kullanıcı ya da sistem kaldırana kadar kalan bir bölümdür. İçeriği geçerliliğini koruduğu sürece durur: "Üç kaydınızın iade tarihi geçti", "Katalog bakım nedeniyle salt okunur". Kalıcı olduğu için içinde eylem bulunabilir ve içine odak gidebilir. **Anlık bildirim (toast)**, akışın üstünde beliren, süresi dolunca kendiliğinden kaybolan katmandır. Yalnız **tamamlanmış** ve **geri alınabilir** bir eylemi bildirir: "Kayıt ödünç alındı". Kullanılmayacak durumlar tek bir kuraldan türer: **kaybolan bir katman, kullanıcının yapması gereken hiçbir şeyi taşıyamaz.** - **Kurtarma gerektiren hata** anlık bildirime konmaz; kullanıcı ekranda değilse hatayı hiç görmez ve sistem sessizce başarısız olmuş olur. - **Onay isteyen soru** anlık bildirime konmaz; süre dolduğunda soru cevapsız kalır. - **Kayıt tutulması gereken bilgi** anlık bildirime konmaz; bildirimin ayrıca kalıcı bir listede karşılığı olmalıdır. Anlık bildirimde eylem bulunabilir mi? Bulunabilir, ama tek bir koşulla: eylem **isteğe bağlı** olmalıdır. "Geri al" böyledir — kullanıcı hiçbir şey yapmazsa sonuç yine tutarlıdır. "Yeniden dene" değildir; hiçbir şey yapılmazsa istek kaybolur. ## Yerel Öge Önce, ARIA Sonra Bildirim için ayrılmış bir yerel öge yoktur; kurulum rollerle yapılır. | Parça | Kaynak | |---|---| | Kibar bildirim | `role="status"` (örtük `aria-live="polite"`) | | Atılgan bildirim | `role="alert"` (örtük `aria-live="assertive"`) | | Biriken kayıt | `role="log"` — sıralı, eskimeyen bildirim listesi | | Şeridin adı | Şerit bir bölümse `aria-labelledby` ile başlığına bağlanır | Ekran Okuyucu Deneyimi dersinde konan kural burada bir kurulum gereğidir: **canlı bölgenin kabı belgede önceden bulunmalıdır.** Bildirim geldiğinde kabı da içeriğiyle birlikte eklemek, bildirimin duyurulmamasına yol açabilir. Doğru kurulum, sayfa kurulurken boş bir kap koymak ve içine yalnız metni yazmaktır. İkinci kural önceliğin seçimidir. Kibar öncelik sıraya girer, atılgan öncelik bekleyenleri atar. Ödünç alma onayı kibardır; kullanıcının işini durduran bir hata atılgandır. Her bildirimi atılgan yapmak, önceliği anlamsızlaştırır ve aşağıdaki ölçümün gösterdiği kaybı üretir. ## Süre Metinden Hesaplanır Anlık bildirimin süresi bir tasarım tercihi değil, metnin uzunluğundan türeyen bir niceliktir. Model üç payı toplar: dikkatin bildirime yönelmesi, metnin okunması ve —eylem varsa— eyleme ulaşıp karar verme. Sonuç bir alt ve bir üst sınıra kıstırılır. ```js // bildirim.mjs — gorunme suresinin metinden hesabi, birlestirme ve duyuru kuyrugu // Model degerleri (secilmis parametreler): tepki payi, okuma hizi, eylem payi. const TEPKI = 700; // ms — dikkatin bildirime yonelmesi const OKUMA_HIZI = 200; // kelime/dakika — ekrandan okuma icin secilen deger const EYLEM = 1500; // ms — bildirimdeki eyleme ulasip karar verme payi const EN_AZ = 4000, EN_COK = 10000; const kelime = (m) => m.trim().split(/\s+/).length; function sure(m, eylemVar) { const ham = TEPKI + (kelime(m) / OKUMA_HIZI) * 60000 + (eylemVar ? EYLEM : 0); return { ham, gorunme: Math.min(EN_COK, Math.max(EN_AZ, Math.round(ham / 100) * 100)) }; } const ORNEKLER = [ { m: "Kayıt ödünç alındı.", eylem: false }, { m: "Kayıt ödünç alındı. İade tarihi 11 Ağustos.", eylem: false }, { m: "Kayıt ödünç alındı. İade tarihi 11 Ağustos.", eylem: true }, { m: "Süzgeç güncellendi; listede 128 kayıt var.", eylem: false }, { m: "Ödünç alma isteği gönderilemedi. Bağlantı koptuğu için istek tamamlanamadı; yeniden denemek için düğmeyi kullanın.", eylem: true }, ]; console.log("bildirim metni kelime eylem ham sure gorunme"); for (const o of ORNEKLER) { const s = sure(o.m, o.eylem); const kisa = o.m.length > 55 ? o.m.slice(0, 52) + "..." : o.m; console.log( `${kisa.padEnd(58)} ${String(kelime(o.m)).padStart(6)} ${(o.eylem ? "var" : "yok").padStart(5)} ` + `${(s.ham.toFixed(0) + " ms").padStart(8)} ${(s.gorunme + " ms").padStart(7)}`, ); } // --- Art arda gelen olaylar: birlestirilmis ve birlestirilmemis -------------- const OLAYLAR = [ { an: 0, tur: "odunc", konu: "Işık ve Gölge" }, { an: 350, tur: "odunc", konu: "Ağ Protokolleri El Kitabı" }, { an: 900, tur: "odunc", konu: "Kuzey Yamaç Ölçümleri" }, { an: 4200, tur: "suzgec", konu: "128" }, { an: 4600, tur: "suzgec", konu: "42" }, { an: 5100, tur: "suzgec", konu: "7" }, { an: 7000, tur: "hata", konu: "Kuzey Yamaç Ölçümleri" }, ]; const BIRLESTIRME_PENCERESI = 1500; // ms — ayni turden olaylarin toplandigi aralik const ONCELIK = { odunc: "kibar", suzgec: "kibar", hata: "atilgan" }; const EYLEM_VAR = { odunc: true, suzgec: false, hata: true }; const metinYaz = (tur, konular) => { if (tur === "odunc") return konular.length === 1 ? `${konular[0]} ödünç alındı.` : `${konular.length} kayıt ödünç alındı.`; if (tur === "suzgec") return `Süzgeç güncellendi; listede ${konular[konular.length - 1]} kayıt var.`; return `${konular[0]} ödünç alınamadı. Kaydın kopyası kalmadığı için istek reddedildi.`; }; function bildirimler(olaylar, birlestir) { if (!birlestir) return olaylar.map((o) => ({ an: o.an, tur: o.tur, metin: metinYaz(o.tur, [o.konu]) })); const gruplar = []; for (const o of olaylar) { const son = gruplar[gruplar.length - 1]; if (son && son.tur === o.tur && o.an - son.sonAn <= BIRLESTIRME_PENCERESI) { son.konular.push(o.konu); son.sonAn = o.an; } else gruplar.push({ tur: o.tur, konular: [o.konu], sonAn: o.an }); } // Birlestirilen grup, penceresi kapandiginda yazilir. return gruplar.map((g) => ({ an: g.sonAn, tur: g.tur, metin: metinYaz(g.tur, g.konular) })); } function kuyruk(liste) { const gelen = [...liste].sort((a, b) => a.an - b.an); let i = 0, etkin = null, bekleyen = []; let atilan = 0, kesilen = 0, tam = 0; const kayit = []; const baslat = (b, an) => { const s = sure(b.metin, EYLEM_VAR[b.tur]).gorunme; etkin = { ...b, bas: an, bitis: an + s, sure: s }; kayit.push({ an, oncelik: ONCELIK[b.tur], bekleme: an - b.an, metin: b.metin, sure: s }); }; while (i < gelen.length || bekleyen.length || etkin) { const sonrakiOlay = i < gelen.length ? gelen[i].an : Infinity; const bitis = etkin ? etkin.bitis : Infinity; if (bitis <= sonrakiOlay) { tam++; etkin = null; if (bekleyen.length) baslat(bekleyen.shift(), bitis); continue; } if (sonrakiOlay === Infinity) break; const b = gelen[i++]; if (ONCELIK[b.tur] === "atilgan") { atilan += bekleyen.length; bekleyen = []; if (etkin) { kesilen++; kayit[kayit.length - 1].kesik = b.an - etkin.bas; } baslat(b, b.an); } else if (!etkin) baslat(b, b.an); else bekleyen.push(b); } return { atilan, kesilen, tam, kayit }; } for (const birlestir of [false, true]) { const liste = bildirimler(OLAYLAR, birlestir); const s = kuyruk(liste); console.log(`\n${birlestir ? "birlestirilmis" : "her olay ayri bildirim"}: ` + `${OLAYLAR.length} olay -> ${liste.length} bildirim -> ${s.kayit.length} gosterim`); console.log(" an oncelik bekleme gorunme metin"); for (const k of s.kayit) { const gorunme = k.kesik === undefined ? `${k.sure} ms` : `${k.kesik}/${k.sure}`; console.log(` ${String(k.an).padStart(4)} ${k.oncelik.padEnd(7)} ${(k.bekleme ? k.bekleme + " ms" : "—").padStart(8)} ` + `${gorunme.padStart(10)} ${k.metin}`); } console.log(` hic gosterilmeyen: ${s.atilan}, kesilen: ${s.kesilen}, tam gorunen: ${s.tam}`); } ``` ``` bildirim metni kelime eylem ham sure gorunme Kayıt ödünç alındı. 3 yok 1600 ms 4000 ms Kayıt ödünç alındı. İade tarihi 11 Ağustos. 7 yok 2800 ms 4000 ms Kayıt ödünç alındı. İade tarihi 11 Ağustos. 7 var 4300 ms 4300 ms Süzgeç güncellendi; listede 128 kayıt var. 6 yok 2500 ms 4000 ms Ödünç alma isteği gönderilemedi. Bağlantı koptuğu iç... 14 var 6400 ms 6400 ms her olay ayri bildirim: 7 olay -> 7 bildirim -> 3 gosterim an oncelik bekleme gorunme metin 0 kibar — 4000 ms Işık ve Gölge ödünç alındı. 4000 kibar 3650 ms 3000/4000 Ağ Protokolleri El Kitabı ödünç alındı. 7000 atilgan — 5500 ms Kuzey Yamaç Ölçümleri ödünç alınamadı. Kaydın kopyası kalmadığı için istek reddedildi. hic gosterilmeyen: 4, kesilen: 1, tam gorunen: 2 birlestirilmis: 7 olay -> 3 bildirim -> 3 gosterim an oncelik bekleme gorunme metin 900 kibar — 4000 ms 3 kayıt ödünç alındı. 5100 kibar — 1900/4000 Süzgeç güncellendi; listede 7 kayıt var. 7000 atilgan — 5500 ms Kuzey Yamaç Ölçümleri ödünç alınamadı. Kaydın kopyası kalmadığı için istek reddedildi. hic gosterilmeyen: 0, kesilen: 1, tam gorunen: 2 ``` İlk tablo süreyi metne bağlıyor. Üç kelimelik bir bildirimin ham süresi 1.6 saniyedir ve alt sınıra çekilir; on dört kelimelik hata iletisi 6.4 saniye ister. Alt sınırın varlığı kısa bildirimlerin göz kırpar gibi geçmesini, üst sınırın varlığı da uzun metinlerin ekranda kalıcılaşmasını engeller. Üçüncü satır eylem payını gösteriyor: aynı metin "Geri al" düğmesi taşıdığında 4.3 saniyeye çıkar, çünkü kullanıcının okuması yetmez, karar da vermesi gerekir. Üst sınıra dayanan bir bildirim bir işarettir: metin bir bildirime göre uzundur ve şeride ya da kalıcı bir listeye aittir. İkinci ve üçüncü bloklar aynı yedi olayı iki farklı kurulumla işliyor. **Birleştirmesiz kurulumda yedi olaydan yalnız üçü ekrana çıkıyor**; dördü hiç gösterilmiyor, biri kesiliyor. Daha kötüsü ikinci satırdadır: kullanıcı ikinci kaydı ödünç aldıktan 3.65 saniye sonra onun bildirimini görüyor. Bildirim, bildirdiği eylemden bu kadar sonra geldiğinde kullanıcı onu üçüncü işlemin sonucu sanır. **Birleştirilmiş kurulumda yedi olay üç bildirime iniyor ve hiçbiri kaybolmuyor.** İki kural bunu sağlıyor. Aynı türden olaylar bir pencere boyunca toplanıyor ve tek bir sayılı metne dönüşüyor: üç ayrı "ödünç alındı" yerine "3 kayıt ödünç alındı". Ardışık süzgeç değişimlerinde ise **yalnız son durum** yazılıyor; ara değerler bildirilmiyor, çünkü kullanıcı için anlamlı olan son sayıdır. İki kurulumda da atılgan hata bildirimi etkin bildirimi kesiyor. Bu, önceliğin tanımı gereğidir ve düzeltilecek bir kusur değildir; düzeltilecek olan, kesilen bilginin başka bir yerde bulunmasıdır. Kesilen bildirimin karşılığı kalıcı bir kayıt listesinde durursa kayıp gerçek olmaktan çıkar. ## Ölçülebilir Kısıtlar **2.2.1 Ayarlanabilir Zamanlama.** Kendiliğinden kaybolan bir bildirim bir zaman sınırıdır. Ölçüt, sınırın kapatılabilmesini, ayarlanabilmesini ya da uzatılabilmesini ister. Pratikte bunun karşılığı üç kuraldır: bildirimin üstüne gelindiğinde ya da odak içine girdiğinde sayaç durur; bildirim elle kapatılabilir; ve içeriği kalıcı bir listede de bulunur. **4.1.3 Durum İletileri.** Bildirim, odak taşımadan bildirilmelidir. Odağı bildirime taşıyan kod ölçütü ters yönden kaldırır: kullanıcı yaptığı işten koparılır. **2.2.2 Duraklat, Durdur, Gizle.** Bildirim bir yerden kayarak giriyorsa bu hareket beş saniyeden kısa sürmeli ya da durdurulabilmelidir. Aynı ölçüt, ekranda biriken bir bildirim kaydının kendiliğinden ilerlemesini de kapsar. **1.4.13.** Bildirim şeridi sayfanın üstünde konumlanıp altındaki içeriği örtüyorsa, önceki dersteki üç koşul burada da geçerlidir; özellikle kapatılabilirlik. **Konum ve kaydırma.** Anlık bildirim ekranın bir köşesinde belirir ve o köşedeki içeriği örter. Örtülen içerik odaklı bir öge ise 2.4.11 ölçütü ihlal edilir. Bildirim alanının altına ayrılmış boşluk bir tasarım süsü değil, bu ölçütün gereğidir. ## Sık Yapılan Hata ve Nasıl Anlaşılır **Her olaya bir bildirim.** Toplu işlemde bildirimler üst üste yığılır. Anlaşılması: birden çok kaydı hızla ödünç alıp ekranda kaç bildirim belirdiğini saymak; sayı işlem sayısına eşitse birleştirme yoktur. **Hata anlık bildirimde.** İstek başarısız olduğunda kullanıcı ekranda değilse hiçbir iz kalmaz. Anlaşılması: hatayı üretip beklemek; süre dolduktan sonra ekranda hatanın izi kalmıyorsa kalıp yanlıştır. **Bildirim kabı sonradan ekleniyor.** Duyuru bazen çalışır bazen çalışmaz. Anlaşılması: sayfa ilk kurulduğunda canlı bölge kabının belgede bulunup bulunmadığına bakmak. **Sabit süre.** Bütün bildirimler aynı süre kalıyorsa uzun metinler okunmadan gider. Anlaşılması: en uzun bildirim metnini kelime sayısıyla ölçüp modelin verdiği süreyle karşılaştırmak. ## Özet - Bildirim şeridi akışın içinde durur ve kalıcıdır; anlık bildirim akışın üstünde belirir ve kendiliğinden kaybolur. - Kaybolan bir katman kullanıcının yapması gereken hiçbir şeyi taşıyamaz; anlık bildirimde yalnız isteğe bağlı bir eylem bulunabilir. - Canlı bölge kabı belgede önceden bulunur; kibar öncelik sıraya girer, atılgan öncelik bekleyenleri atar ve bu ayrım her bildirimi atılgan yapan kurulumda anlamsızlaşır. - Görünme süresi metnin kelime sayısından, tepki payından ve eylem payından hesaplanır; alt ve üst sınıra kıstırılır ve üst sınıra dayanan metin bildirime değil şeride aittir. - Art arda gelen aynı türden olaylar bir pencerede birleştirilir; sayılabilir olaylar tek sayılı metne, ardışık durum değişimleri yalnız son duruma indirgenir. - Kendiliğinden kaybolma bir zaman sınırıdır: üzerine gelindiğinde durmalı, elle kapatılabilmeli ve içeriği kalıcı bir listede de bulunmalıdır. ## Sonraki Adım Bildirim bir işin **bittiğini** söyledi. Aynı işin sürdüğü aralıkta ekranda ne olduğu ise ayrı bir kalıptır. Bekleme göstergesi iki temel biçime ayrılır: ne kadar süreceği bilinmeyen bir işin sürdüğünü bildiren gösterge ile tamamlanma oranı hesaplanabilen bir işin ilerlemesini gösteren gösterge. İkisinin rolü, duyurusu ve güncelleme sıklığı farklıdır — ve ikincisinde yüzdenin nasıl hesaplandığı, kalan sürenin nasıl kestirildiği kullanıcının bekleyip beklememe kararını belirler. Sonraki ders bu iki göstergeyi belirtim olarak yazar.