Odağı Kalıcı İletişim Kutusunun İçinde Tutma
Sekme odağının arkadaki sayfaya kaçmasını önleyin.
Odağı Kalıcı İletişim Kutusunun İçinde Tutma, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 2. 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.
Odağın İçeride Kalması Neden Önemlidir
Modal açıkken klavye odağı onun içinde kalmalıdır. Sekme tuşu arka plandaki sayfaya kaçarsa görme engelli kullanıcılar göremedikleri içerik içinde kaybolur.
Yerel Element Yardımcı Olur
showModal() ile açılan gerçek bir dialog, odağı sizin için otomatik olarak içeride tutar. Bu, onu div yerine tercih etmeniz için önemli bir nedendir.
Kendiniz Oluşturduğunuzda
Div ile özel bir modal oluşturursanız odağı içeride tutmayı kendiniz sağlamalısınız; çünkü Sekme tuşunun sayfaya geçmesini hiçbir şey engellemez.
Açılırken Odağı İçeri Taşıyın
Öncelikle modal açıldığında odağı içine taşıyın. Genellikle ilk denetime veya başlığa taşıyarak kullanıcının doğru yerden başlamasını sağlayın.
modal.querySelector('button').focus();Odaklanılabilir Elementleri Bulun
Modalın odaklanılabilir öğelerini toplayın: bağlantılar, düğmeler, giriş alanları ve tabindex değerine sahip her şey. Döngüyü oluşturmak için ilk ve son öğeye ihtiyacınız vardır.
modal.querySelectorAll('a, button, input, [tabindex]');Sondan Başa Döngü Oluşturun
Son öğe üzerindeyken Sekme tuşuna basıldığında odağı ilk öğeye taşıyın. Böylece kullanıcı dışarı çıkmak yerine döngü içinde ilerler.
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}Baştan Sona Döngü Oluşturun
İlk öğedeyken Shift+Tab tuşlarını da yönetin: odağı son öğeye taşıyarak geriye doğru sekme kullanımının da içeride kalmasını sağlayın.
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}Varsayılan Sekme Davranışını Engelleyin
Sınırlara gelindiğinde preventDefault() çağrısını yapmalısınız; aksi hâlde tarayıcı kodunuz odağı yönlendiremeden önce odağı dışarı taşır.
e.preventDefault();Devre Dışı ve Gizli Öğelere Dikkat Edin
İlk ve son öğeyi seçerken devre dışı veya gizli elementleri atlayın; çünkü bunlar gerçekte odak alamaz.
Arka Planı Unutmayın
Odağı içeride tutmaya ek olarak arka plandaki sayfayı etkisiz hâle getirin. Böylece modal açıkken yanlışlıkla yapılan bir tıklama veya ekran okuyucu bile sayfaya erişemez.
Klavye ile Test Edin
Tüm modalda Sekme tuşuyla ilerleyin ve odak halkasının hiç dışarı çıkmadan döngü yaptığını gözlemleyin. Bu gidiş dönüş, odağı içeride tutma işleminin çalıştığının kanıtıdır. ✅
Hızlı Kontrol
Özel bir div modalı oluşturdunuz. Sekme tuşunu onun içinde tutmak için ne yapmalısınız?
Özet: Odağı İçeride Tutun
Açılışta odağı içeri taşımayı ve her iki sınırda döngü oluşturmayı öğrendiniz. Böylece klavye kullanıcıları kapatmayı seçene kadar modalın içinde kalır. 🎯
Sıkça Sorulan Sorular
“Odağı Kalıcı İletişim Kutusunun İçinde Tutma” dersi ücretsiz mi?
Evet — “Odağı Kalıcı İletişim Kutusunun İçinde Tutma” 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.
“Odağı Kalıcı İletişim Kutusunun İçinde Tutma” dersinde ne öğreneceğim?
Sekme odağının arkadaki sayfaya kaçmasını önleyin. 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 2. dersidir.
“Odağı Kalıcı İletişim Kutusunun İçinde Tutma” 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