Role dialogu i natywny element dialog
Oznacz warstwę jako prawdziwe modalne okno dialogowe.
Role dialogu i natywny element dialog to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co sprawia, że dialog jest dialogiem
Dialog to warstwa, która przerywa korzystanie ze strony, aby poprosić o dane lub wyświetlić komunikat. Użytkownicy czytników ekranu muszą otrzymać informację, że to dialog, a nie tylko unoszący się tekst.
Element div wygląda jak modalny, ale nim nie jest
Stylizowany element div może wyglądać jak wyskakujące okno, ale technologie asystujące widzą zwykłą treść. Bez właściwych ról użytkownicy nie dowiedzą się, że otwarto okno dialogowe.
<div class="modal">Are you sure?</div>Poznaj natywny element dialog
Element HTML dialog został stworzony właśnie do tego zadania. Domyślnie ma semantykę okna dialogowego, więc czytniki ekranu prawidłowo go ogłaszają.
<dialog>Are you sure?</dialog>Otwórz go jako prawdziwy modal
Wywołaj w JavaScript metodę showModal(), aby otworzyć okno dialogowe jako prawdziwy modal. Dzięki temu strona znajdująca się za nim staje się nieaktywna i niedostępna.
document.querySelector("dialog").showModal();show() nie tworzy modalu
Uważaj: show() otwiera okno dialogowe w trybie niemodalnym, więc strona pozostaje interaktywna w tle. W przypadku okna blokującego należy użyć showModal().
dialog.show();Rola stojąca za dialog
Wewnętrznie element jest mapowany na rolę dialog. Jeśli musisz zbudować taki element na bazie div, atrybut role="dialog" nadaje mu odpowiednie znaczenie.
<div role="dialog">Settings</div>alertdialog dla pilnych decyzji
Gdy okno dialogowe wymaga odpowiedzi, na przykład potwierdzenia usunięcia, użyj role="alertdialog". Sygnalizuje ono technologiom asystującym dodatkową pilność.
<div role="alertdialog">Delete this file?</div>Każde okno dialogowe potrzebuje nazwy
Okno dialogowe musi mieć dostępną nazwę, aby użytkownicy po jego otwarciu wiedzieli, do czego służy. Wskaż nagłówek wewnątrz okna za pomocą aria-labelledby.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Zamknij je w kodzie
Natywny element udostępnia pasującą metodę close(). Jej wywołanie zamyka okno dialogowe i ponownie umożliwia dostęp do strony znajdującej się w tle.
dialog.close();Wbudowane tło
Modalne okno dialogowe otrzymuje bezpłatne tło, które można stylizować za pomocą pseudoelementu ::backdrop. Przyciemnia ono stronę i sygnalizuje przeniesienie fokusu.
dialog::backdrop { background: rgba(0,0,0,0.5); }Dlaczego natywny element oszczędza pracę
Natywny element dialog sam obsługuje fokus, klawisz Escape i dezaktywowanie tła. Jego użycie oznacza mniej błędów niż ręczne tworzenie modalu na bazie div.
Szybkie sprawdzenie
Chcesz utworzyć wyskakujące okno potwierdzenia, które blokuje stronę do czasu odpowiedzi użytkownika. Którego wywołania należy użyć?
Podsumowanie: używaj prawdziwych okien dialogowych
Dowiedziałeś się, że modal potrzebuje semantyki okna dialogowego. Preferuj natywny element dialog z showModal(), nadaj mu nazwę, a alertdialog rezerwuj dla pilnych decyzji.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Role dialogu i natywny element dialog” jest bezpłatna?
Tak — pełny tekst „Role dialogu i natywny element dialog” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Role dialogu i natywny element dialog”?
Oznacz warstwę jako prawdziwe modalne okno dialogowe. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Role dialogu i natywny element dialog”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Role dialogu i natywny element dialog
- Uwięzienie fokusu w oknie modalnym
- Escape do zamykania i przywracania fokusu
- Nieaktywne tło i aria-modal