Bileşenler

Banner

Uygulamanın ya da sayfanın tepesinde, altındaki her şeyi etkileyen durum için tam genişlik mesaj.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Banner varsayılan olarak rol taşımaz ve sayfanın başında okunur. Sonradan beliren banner’da announce açılınca danger role="alert", diğer tonlar role="status" alır. Ton görünmez bir önekle (“Uyarı:”) okunur; ikon okunmaz.

Klavye

Tuş	Davranış
Tab	Eyleme ve kapat butonuna gider.
Enter	Bağlantıyı açar ya da butonu çalıştırır.

Odak

Banner odak almaz. Kapatılınca odak bir sonraki kontrole geçer.

Ekran okuyucu

Örnek	Okunan
Uyarı banner’ı	“Uyarı: Bu gece 23.00 ile 01.00 arasında bakım yapılacak. Ayrıntılar, bağlantı”
Kapat butonu	“Uyarıyı kapat, düğme”

Kontrast

Metin ve bağlantı her tonun yoğun zemininde en az 4.5:1 kontrast taşır. Bağlantı altı çizili olduğu için renge dayanmaz.

WCAG 2.2

Ölçüt	Banner nasıl karşılar	Ürün ekibi ne yapmalı
1.4.1 Rengin kullanımı	Ton önekle, bağlantı alt çizgiyle belirtilir.	Yok.
4.1.3 Durum mesajları	`announce` ile `status` ya da `alert`.	Sonradan beliren banner’da `announce` açın.
1.4.3 Kontrast	Yoğun zemin üzerinde karşıt metin.	Yok.