Escape ile Kapatma ve Odağı Geri Getirme
Kullanıcıyı geri döndüren güvenilir bir çıkış sağlayın.
Escape ile Kapatma ve Odağı Geri Getirme, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Her Modalın Bir Çıkışı Olmalıdır
İçinden çıkamadığınız bir modal tuzaktır. Kullanıcılar, küçük bir düğmeyi aramak zorunda kalmadan hızlı ve güvenilir bir şekilde kapatmayı bekler.
Escape Evrensel Anahtardır
Escape tuşu, iletişim kutusunu kapatmak için kabul edilmiş kısayoldur. Klavye ve ekran okuyucu kullanıcıları önce bu tuşa başvurur; bu nedenle onu her zaman destekleyin.
Yerel dialog Escape'i Yönetir
showModal() ile açılan yerel bir dialog, Escape tuşuna basıldığında otomatik olarak kapanır ve gerekirse dinleyebileceğiniz bir iptal olayı tetikler.
dialog.addEventListener('cancel', onClose);Escape'i Kendiniz Bağlayın
Özel bir modal için keydown olayını dinleyin ve tuş Escape olduğunda kapatın. Bu yalnızca birkaç satır sürer; ancak bunu asla atlamayın.
if (e.key === 'Escape') closeModal();Odağın Nerede Olduğunu Hatırlayın
Modalı açmadan önce odağın bulunduğu elementi kaydedin. document.activeElement, daha sonra geri döneceğiniz tetikleyicidir.
const opener = document.activeElement;Kapatırken Odağı Geri Yükleyin
Modal kapandığında odağı kaydettiğiniz tetikleyiciye geri taşıyın. Bu odağı geri yükleme adımı, kapatma işleminin kesintisiz hissettirmesini sağlar.
closeModal();
opener.focus();Geri Yükleme Neden Önemlidir
Geri yükleme yapılmazsa odak sayfanın en üstüne sıçrar. Kullanıcı bulunduğu yeri kaybeder ve geri dönmek için tüm öğelerde sekme tuşuna basmak zorunda kalır. Sinir bozucu ve önlenebilir bir durumdur. 😕
Görünür Bir Kapatma Düğmesi de Ekleyin
Escape tek başına yeterli değildir. Fare ve dokunmatik ekran kullanıcıları için açık bir çıkış sunmak üzere net biçimde etiketlenmiş bir kapatma düğmesi ekleyin.
<button aria-label="Close dialog">×</button>Arka Plan Örtüsüne Tıklama
Birçok modal, karartılmış arka plan örtüsüne tıklandığında da kapanır. Bu hoş bir ek özelliktir; ancak hiçbir zaman Escape'in veya düğmenin yerini almamalıdır.
Yıkıcı İşlemlerde Dikkatli Olun
Riskli bir işlemi onaylayan iletişim kutularında, yanlışlıkla basılan Escape'in önemli bir seçimi atlamaması için hızlı kapatmayı engelleyebilirsiniz.
Tüm Döngüyü Test Edin
Klavye ile açın, Escape tuşuna basın ve odağın başladığınız tam tetikleyiciye geri döndüğünü doğrulayın. Bu gidiş dönüş hedefinizdir. ✅
Hızlı Kontrol
Bir kullanıcı bir düğmeden modal açıyor ve Escape tuşuna basıyor. Odak nereye gitmelidir?
Özet: Temizce Kapatın
Escape desteği sunmayı, görünür bir kapatma düğmesi eklemeyi ve odağı açıcıya geri yüklemeyi öğrendiniz. Böylece kapatma işlemi kullanıcıyı hiçbir zaman ortada bırakmaz. 🎯
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Escape ile Kapatma ve Odağı Geri Getirme” dersi ücretsiz mi?
Evet — “Escape ile Kapatma ve Odağı Geri Getirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Escape ile Kapatma ve Odağı Geri Getirme” dersinde ne öğreneceğim?
Kullanıcıyı geri döndüren güvenilir bir çıkış sağlayın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Escape ile Kapatma ve Odağı Geri Getirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- İletişim Kutusu Rolleri ve Yerel dialog Öğesi
- Odağı Kalıcı İletişim Kutusunun İçinde Tutma
- Escape ile Kapatma ve Odağı Geri Getirme
- Pasif Arka Plan ve aria-modal