Pasif Arka Plan ve aria-modal
Açıkken sayfanın geri kalanına erişilememesini sağlayın.
Pasif Arka Plan ve aria-modal, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 4. 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.
Arka Plandaki Sayfa Hâlâ Vardır
Odak içeride tutulsa bile modalınızın arkasındaki içerik DOM'da hâlâ bulunur. Onu engellemezseniz ekran okuyucu bu içeriğe geçebilir.
inert Niteliğiyle Tanışın
inert niteliği, bir elementi ve tüm alt öğelerini tek işlemle odaklanılamaz ve tıklanamaz hâle getirir; ayrıca yardımcı teknolojilerin bunları atlamasını sağlar.
<main inert>...page content...</main>Arka Planı Etkisiz Hâle Getirin
Modal açıldığında dışındaki her şeye inert ekleyin. Böylece arka plandaki sayfaya gerçekten hiç kimse erişemez.
pageContent.inert = true;Kapatırken inert'i Kaldırın
Modal kapandığında sayfanın yeniden etkileşimli olması için inert niteliğini kaldırın. Bunu unutmak sayfanın donmuş kalmasına neden olur.
pageContent.inert = false;Yerel dialog Bunu Sizin İçin Yapar
showModal() ile açılan yerel bir dialog, sayfanın geri kalanını otomatik olarak etkisiz hâle getirir. Böylece bu korumayı ek kod yazmadan elde edersiniz.
aria-modal Ne Bildirir
aria-modal değerini true olarak ayarlamak, yardımcı teknolojilere bu iletişim kutusu açıkken dışındaki içeriğin kullanılamadığını bildirir.
<div role="dialog" aria-modal="true">...</div>aria-modal Bir Duvar Değil, Bir Taahhüttür
Dikkatli olun: aria-modal yalnızca ekran okuyucuya bilgi verir. Odağı veya tıklamaları gerçekten engellemez; bu nedenle yine inert kullanmanız gerekir.
İkisini Birlikte Kullanın
Sağlam yaklaşımda arka plandaki inert ile iletişim kutusundaki aria-modal birlikte kullanılır. Biri uygular, diğeri sınırı bildirir.
<div role="dialog" aria-modal="true">
<!-- background gets inert -->Eski aria-hidden Yöntemi
inert yaygın olarak desteklenmeden önce geliştiriciler arka plana aria-hidden eklerdi. Bu, içeriği ekran okuyuculardan gizlerdi; ancak klavye odağını durdurmazdı.
İletişim Kutusunun Kendisine Asla Gizli Uygulamayın
Klasik hatalardan biri, aria-hidden'ı iletişim kutusunu da kapsayacak kadar geniş uygulamaktır. modalınızın gizli bölgenin dışında kaldığından emin olun.
Ağaçta Doğrulayın
Modal açıkken tarayıcının erişilebilirlik ağacını açın. Arka plandaki sayfanın ağaçtan kaybolduğunu ve yalnızca iletişim kutusunun kaldığını doğrulayın. ✅
Hızlı Kontrol
aria-modal=true ekliyor ancak inert kullanmıyorsunuz. Hangi sorun devam eder?
Özet: Arka Planı Yalıtın
Arka plandaki sayfayı etkisiz hâle getirmeyi ve aria-modal bildirimini eklemeyi öğrendiniz. Böylece kullanıcıların erişebileceği tek şey gerçekten modal olur. 🎯
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
“Pasif Arka Plan ve aria-modal” dersi ücretsiz mi?
Evet — “Pasif Arka Plan ve aria-modal” 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.
“Pasif Arka Plan ve aria-modal” dersinde ne öğreneceğim?
Açıkken sayfanın geri kalanına erişilememesini 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 4. dersidir.
“Pasif Arka Plan ve aria-modal” 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