Roll Fönster

`alertdialog`

En dialogruta som förmedlar ett brådskande meddelande och kräver användarens svar. Kombinerar dialogrutesemantik med aviseringsmeddelande. Använd bara för destruktiva bekräftelser, fel som blockerar fortsatt arbete eller andra avbrott som inte kan vänta.

När du ska använda det

Bara för avbrott: ett fel som hindrar användaren från att fortsätta, en “Är du säker på att du vill radera?”-bekräftelse, en varning om osparade ändringar vid navigering bort. Att använda alertdialog för vanliga modaler är överdrivet — använd role="dialog" för sådana.

Skillnaden från role="dialog" är att en alertdialog meddelas som ett role="alert" — påstridigt, omedelbart — när den visas. Detta är lämpligt för genuina avbrott; missbruk leder till skärmläsartrötthet.

aria-labelledby (som pekar på titeln) och aria-describedby (som pekar på brödtexten) krävs båda. Alertdialogen måste innehålla minst en fokuserbar knapp så att användaren kan stänga den.

Tangentbords- och fokuskontrakt

Enligt APG alertdialog-mönstret:

Fokus flyttas till alertdialogen vid öppning — vanligen till den säkraste knappen (Avbryt) så att ett oavsiktligt Enter inte bekräftar en destruktiv åtgärd.
Tab / Shift+Tab cyklar fokus inom dialogrutan.
Escape stänger alertdialogen och returnerar fokus till det element som utlöste den.
Resten av sidan är inert medan alertdialogen är öppen.

Välj det initiala fokuset med omsorg: för “Radera?”-uppmaningar, fokusera Avbryt som standard — aldrig den destruktiva knappen.

Vanliga fel

Använder role="alertdialog" för alla modaler. Skärmläsare bombarderar användaren med det påstridiga meddelandet vid varje modalöppning.
Initialt fokus på den destruktiva knappen (Radera, Ignorera) — ett felaktigt Enter raderar användarens arbete.
Saknar aria-describedby på brödtexten. Användaren hör titeln och knapparna men inte varningen.
Alertdialog utan knappar — det finns inget sätt att stänga den, och rollen kräver ett genomförbart svar.
Auto-stänger alertdialoger efter en tidsgräns. Motverkar semantiken “kräver svar”.

Exempel

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Delete draft?</h2>
  <p id="confDesc">"Untitled draft (March 12)" will be permanently deleted. This action cannot be undone.</p>
  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete draft</button>
</div>