İletişim Kutusu Rolleri ve Yerel dialog Öğesi
Bir katmanı gerçek bir kalıcı iletişim kutusu olarak işaretleyin.
İletişim Kutusu Rolleri ve Yerel dialog Öğesi, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. 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.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
What Makes a Dialog a Dialog
A dialog is a layer that interrupts the page to ask for input or show a message. Screen reader users need to be told it is a dialog, not just floating text.
A div Looks Modal but Is Not
A styled div can look like a popup, yet assistive tech sees ordinary content. Without the right role, users never learn a dialog opened.
<div class="modal">Are you sure?</div>Meet the Native dialog Element
The HTML dialog element is built for this job. It carries dialog semantics for free, so screen readers announce it correctly.
<dialog>Are you sure?</dialog>Open It as a True Modal
Call showModal() in JavaScript to open dialog as a real modal. This is what makes the page behind it inert and unreachable.
document.querySelector("dialog").showModal();show() Is Not Modal
Watch out: show() opens the dialog as non-modal, so the page stays interactive behind it. For a blocking dialog, you want showModal().
dialog.show();The role Behind dialog
Under the hood, the element maps to the dialog role. If you must build one from a div, role="dialog" is the attribute that gives it meaning.
<div role="dialog">Settings</div>alertdialog for Urgent Choices
When a dialog demands a response, like a delete confirmation, use role="alertdialog". It signals extra urgency to assistive tech.
<div role="alertdialog">Delete this file?</div>Every Dialog Needs a Name
A dialog must have an accessible name so users know its purpose on open. Point aria-labelledby at the heading inside it.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Close It in Code
The native element offers a matching close() method. Calling it dismisses the dialog and lets the page behind become reachable again.
dialog.close();The Built-In Backdrop
A modal dialog gets a free backdrop you can style with the ::backdrop pseudo-element. It dims the page and signals focus has shifted.
dialog::backdrop { background: rgba(0,0,0,0.5); }Why Native Saves You Work
The native dialog handles focus, Escape, and inerting the background for you. Reaching for it means fewer bugs than a hand-rolled div.
Quick Check
You want a confirmation popup that blocks the page until the user responds. Which call should you use?
Recap: Use Real Dialogs
You learned a modal needs dialog semantics. Prefer the native dialog with showModal(), give it a name, and reserve alertdialog for urgent choices.
Sıkça Sorulan Sorular
“İletişim Kutusu Rolleri ve Yerel dialog Öğesi” dersi ücretsiz mi?
Evet — “İletişim Kutusu Rolleri ve Yerel dialog Öğesi” 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.
“İletişim Kutusu Rolleri ve Yerel dialog Öğesi” dersinde ne öğreneceğim?
Bir katmanı gerçek bir kalıcı iletişim kutusu olarak işaretleyin. 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 1. dersidir.
“İletişim Kutusu Rolleri ve Yerel dialog Öğesi” 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