Modal Pencere (Modal Dialog) Nedir?
Modal pencere (modal dialog), sayfanın üstünde açılan ve açık kaldığı sürece arkadaki içerikle etkileşimi engelleyen penceredir; kullanıcı pencereyi kapatmadan ya da içindeki işlemi bitirmeden sayfaya dönemez.
Diğer Adları: Modal Dialog, Modal
Modal Pencere Nasıl Çalışır?
W3C’nin tanımıyla modal pencere, başka bir pencerenin üzerine yerleşen bir penceredir ve altındaki pencereler etkisizdir (inert): kullanıcı arkadaki içerikle etkileşime giremez. Pencere, kullanıcıdan bir karar, bir bilgi girişi ya da bir içeriği incelemesi istendiğinde kullanılır. Pencereye görünür bir başlık ve açıkça görülen bir kapatma düğmesi konur; kullanıcı pencereden nasıl çıkacağını her zaman bilmelidir.
Modal Pencerede Klavye ve Ekran Okuyucu Kuralları
- Pencere açıldığında odak pencerenin içine taşınır.
- Tab ve Shift ile Tab, odağı pencerenin içindeki öğeler arasında döndürür; odak pencereden dışarı çıkmaz.
- Escape tuşu pencereyi kapatır.
- Pencere kapanınca odak onu açan öğeye döner; o öğe artık yoksa ya da iş akışı başka bir hedef gerektiriyorsa mantıklı bir yere taşınır.
- Pencerenin kabı dialog rolünü ve true değerli aria-modal özniteliğini taşır; görünür başlığı aria-labelledby ile pencerenin adı olur.
Modal Pencerenin E-Ticarette Kullanımı
Ürünün hızlı önizlemesi, sepete eklendi onayı, adres ya da kişi seçimi, beden tablosu ve çerez tercihleri modal pencereyle sunulabilir. Kampanya duyuran açılır pencere (popup) de çoğunlukla modal olarak kurulur; bu durumda aynı klavye kuralları ona da uygulanır.
Örnek: Bir mağazanın hızlı önizleme penceresi açıldığında odak arkadaki ürün listesinde kalır. Klavye kullanıcısı Tab’a bastıkça görünmeyen ürün kartlarında ilerler ve pencereyi kapatamaz. Odak pencerenin içine taşınıp Escape ile kapatma eklendiğinde pencere klavyeyle kullanılabilir olur.
Modal Pencere (Modal Dialog) Hakkında Sık Sorulan Sorular
Modal pencere ile açılır pencere (popup) aynı şey mi?
Her zaman değil. Popup, kampanya ya da bülten gibi bir mesajı gösteren açılır kutudur ve modal olarak kurulabilir. Modal pencere ise arkadaki içeriği kullanılmaz kılan pencere davranışını anlatır.
Modal pencere ne zaman kullanılmaz?
Kullanıcının işini kesmesi gerekmeyen bilgiler için kullanılmaz. Sayfa içinde gösterilebilecek kısa bir bilgi ya da onay mesajı için arkadaki içeriği kilitlemek gereksizdir.
Modal pencere açıkken arkadaki sayfa kaydırılabilir mi?
Arkadaki içerik etkisiz olduğu için kullanıcı onunla etkileşime giremez. Pencerenin içeriği ekrana sığmıyorsa kaydırma pencerenin kendi içinde yapılır.