Uyarı şeridi alert / banner

bilinen diğer adları alert · banner · bildirim şeridi · inline uyarı

Böyle diyorsan: "sayfanın üstündeki renkli uyarı" · "sarı bilgi kutusu" → bunun adı uyarı şeridi.

Sayfa içinde duran renkli bilgi/uyarı kutusu; toast'tan farkı kaybolmamasıdır.

Uyarı şeridi, sayfa akışının içinde duran ve kaybolmayan bilgi kutusudur. Kısa bildirimden ayrıldığı yer kalıcılıktır: devam eden bir DURUMU anlatır, biten bir olayı değil — 'E-postan doğrulanmadı', 'Aboneliğin 3 gün sonra bitiyor'. Kalıcı olduğu için bir çıkış yolu sunmak zorundadır: her uyarı şeridinde kullanıcının o durumu çözebileceği bir eylem bulunmalıdır, yoksa şerit yalnızca suçlayan bir levha olur. Kapatılabilir yapılacaksa kapatmanın hafızası olmalı; her sayfa yenilemesinde geri gelen şerit, kullanıcıyı arayüze küstürür.

Kapsam: Bu madde sayfa akışında duran kalıcı uyarıyı kapsar. Geçici mesaj Kısa Bildirim, kullanıcıyı durduran pencere Kip Pencere maddesindedir. Bir form alanına ait hata satırı da buraya değil Form Alanı maddesine aittir — o hata alanına bağlıdır, sayfaya değil.

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

⚠ Ödemeniz 3 gün gecikti — Şimdi öde✕

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

YAPIM PROMPTU — AJANINA YAPIŞTIR

Ödeme gecikince sayfa üstünde banner göster: sarı zemin + ⚠ ikon + 'Ödemeniz 3 gün gecikti' + 'Şimdi öde' linki + ✕; kapatınca o oturum boyunca gizlensin ama koşul sürüyorsa ertesi gün geri gelsin; kritik (hata) türü role=alert ile anons edilsin, bilgi türü sessiz kalsın; birden çok banner üst üste değil sırayla gösterilsin.

DEBUG PROMPTU — HUYSUZLANIRSA

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

Banner'ım huysuz; klasikleri sırayla ele: (1) renk tek sinyal — ikon yok, renk körü kullanıcı türü ayıramıyor; (2) ✕'e basınca sonsuza dek kayboluyor — borç duruyor ama uyarı bir daha gelmiyor; (3) her önemsiz bilgiye role=alert konmuş, ekran okuyucu spam yiyor; (4) eylem linki yok — kullanıcı 'peki ne yapayım?' ile baş başa; (5) iki banner aynı anda üst üste binmiş. Belirti şu:

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

1Tür (renk+ikon)info/uyarı/hata
Sarı=uyarı, kırmızı=hata, mavi=bilgi; ikon renkle BİRLİKTE gider — renk tek sinyal olamaz.
2Mesajtek cümle
Ne oldu + ne anlama geliyor; teknik kod değil insan dili.
3Eylem'Şimdi öde' linki
Banner'ın var olma sebebi: kullanıcıya ÇIKIŞ yolu. Eylemsiz uyarı sadece kaygı üretir.
4Kapatma✕ + koşul hafızası
Kullanıcı kapatabilir; AMA koşul sürüyorsa (borç duruyorsa) makul süre sonra geri gelir.

DURUMLAR — HANGİ HÂLDE NE OLUR

ABilgirole="status"
Nötr bilgilendirme. Ekran okuyucuya kibar duyurulur; kullanıcının işini bölmez.
BUyarısarı + eylem
Bir şey ters gidecek ama henüz gitmedi. Eylem linki zorunlu: 'Aboneliğin bitiyor' tek başına yardım değil, 'Yenile' ile birlikte yardımdır.
CHatarole="alert"
Bir şey ters gitti. role="alert" araya girer ve hemen duyurulur; bu güç yalnız gerçekten kritik durumlar için saklanır.
DBaşarıyeşil, geçici olabilir
İş tamamlandı. Bu genelde şerit değil kısa bildirim işidir — sayfada kalıcı bir 'başarılı' şeridi bir süre sonra anlamsızlaşır.
EKapatıldıkapatma + hafıza
Kullanıcı kapattı. Kapatma bir yerde saklanmalı; koşul hâlâ geçerliyse ne zaman geri geleceği bilinçli bir karardır.

KODDAKİ ADLARI

ARIA	role=alert (kritik) / status	doğru anons seviyesi
UX	eylem linki zorunlu	çıkış yolu
JS	kapatma + koşul hafızası	localStorage/oturum

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

Rol seviyesini abartma: her şeriti role="alert" yaparsan ekran okuyucu kullanıcısı sürekli bölünür. Kritik olmayanlar için role="status" ya da hiç canlı bölge kullanma.
Sayfa yüklenirken zaten var olan şeriti canlı bölge yapma; canlı bölgeler DEĞİŞİKLİĞİ duyurmak içindir, başlangıç içeriğini değil.
Anlamı yalnız renge yükleme (WCAG 1.4.1): sarı ve kırmızı şerit renk körlüğünde ayırt edilemez; ikon ve metin de durumu söylemeli.
Her uyarıya bir çıkış yolu koy (WCAG 3.3.1 ruhu): sorunu anlatan ama çözüm sunmayan şerit, kullanıcıyı çaresiz bırakır.
Kapatma düğmesinin erişilebilir adı 'Kapat' değil ne kapattığını söylesin ('Doğrulama uyarısını kapat'); sayfada birden çok şerit varsa hangisi olduğu belli olmalı.

SIK KARIŞTIRILANLAR

Kısa bildirimden farkı. Şerit KALICIDIR ve devam eden bir durumu anlatır; kısa bildirim geçicidir ve biten bir olayı bildirir. Test: bilgi, kullanıcı bir şey yapana kadar doğru kalacak mı? Kalacaksa şerit, olay bittiği anda geçersizleşiyorsa kısa bildirim. 'Kaydedildi' kısa bildirimdir, 'E-postan doğrulanmadı' şerittir.

Kısa bildirim sayfasına git →

Alan hatasından farkı. Şerit sayfaya ya da forma BÜTÜN olarak seslenir; form alanının hata satırı ise tek bir alana aittir ve girdiye aria-describedby ile bağlıdır. Alan bazlı hataları tek bir üst şeride toplarsan kullanıcı hangi alanı düzelteceğini aramak zorunda kalır — doğrusu ikisini birlikte kullanmaktır: şerit özetler, alan gösterir.

Form alanı sayfasına git →

KAYNAKLAR

standartMDN — role="alert" ↗
Araya giren duyurunun doğru ve ölçülü kullanımı.
standartMDN — ARIA Live Regions ↗
Canlı bölgelerin başlangıç içeriğini değil değişikliği duyurduğu kuralı.
standartW3C — WCAG 2.2, Error Identification (3.3.1) ↗
Hatanın metinle tanımlanması ve kullanıcıya yol gösterilmesi şartı.
standartW3C — WCAG 2.2, Use of Color (1.4.1) ↗
Uyarı seviyesinin yalnız renkle anlatılamayacağı kuralı.

İLGİLİ PARÇALAR

Kısa bildirim toast / snackbar Kip pencere modal / dialog Form alanı form field Boş durum empty state

AYNI AİLEDE · GERI BILDIRIM