Rola Okno

`alertdialog`

Okno dialogowe przekazujące pilny komunikat i wymagające odpowiedzi użytkownika. Łączy semantykę okna dialogowego z ogłoszeniem alertu. Używaj tylko dla destrukcyjnych potwierdzeń, błędów blokujących dalszą pracę lub innych przerwań, które nie mogą czekać.

Kiedy używać

Tylko dla przerwań: błąd uniemożliwiający użytkownikowi kontynuowanie, potwierdzenie „Czy na pewno chcesz usunąć?”, ostrzeżenie o niezapisanych zmianach przy nawigowaniu dalej. Sięganie po alertdialog dla rutynowych okien modalnych to przesada — użyj zwykłego role="dialog" w takich przypadkach.

Różnica w stosunku do role="dialog" polega na tym, że alertdialog jest ogłaszany jak role="alert" — asertywnie, natychmiast — gdy się pojawi. Jest to właściwe dla prawdziwych przerwań; nadużycie prowadzi do zmęczenia czytnikiem ekranu.

aria-labelledby (wskazujące tytuł) i aria-describedby (wskazujące treść) są oba wymagane. Alertdialog musi zawierać przynajmniej jeden możliwy do aktywowania przycisk, by użytkownik mógł go zamknąć.

Klawiatura i kontrakt fokusu

Zgodnie ze wzorcem APG alertdialog:

Fokus przenosi się do alertdialog przy otwarciu — zazwyczaj na najbezpieczniejszy przycisk (Anuluj), aby przypadkowe naciśnięcie Enter nie potwierdziło destrukcyjnej akcji.
Tab / Shift+Tab cyklicznie przemieszcza fokus wewnątrz okna dialogowego.
Escape zamyka alertdialog i przywraca fokus do elementu wyzwalającego.
Reszta strony jest nieaktywna, gdy alertdialog jest otwarty.

Wybieraj ostrożnie fokus początkowy: dla pytań „Usunąć?” domyślnie skup Anuluj — nigdy destrukcyjny przycisk.

Częste błędy

Używanie role="alertdialog" dla każdego okna modalnego. Czytniki ekranu zasypują użytkownika asertywnym ogłoszeniem przy każdym otwarciu.
Fokus początkowy na destrukcyjnym przycisku (Usuń, Odrzuć) — przypadkowy Enter niszczy pracę użytkownika.
Brakujące aria-describedby dla treści. Użytkownik słyszy tytuł i przyciski, ale nie ostrzeżenie.
Alertdialog bez przycisków — nie ma sposobu na jego zamknięcie, a rola nakazuje odpowiedź.
Automatyczne zamykanie alertdialoga po upływie czasu. Niszczy semantykę „wymaga odpowiedzi”.

Przykład

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Usunąć wersję roboczą?</h2>
  <p id="confDesc">„Wersja robocza bez tytułu (12 marca)" zostanie trwale usunięta. Tej operacji nie można cofnąć.</p>
  <button type="button" autofocus>Anuluj</button>
  <button type="button">Usuń wersję roboczą</button>
</div>