Rolle Vindue

`alertdialog`

En dialog, der formidler en presserende besked og kræver brugerens svar. Kombinerer dialog-semantik med alert-annoncering. Brug kun til destruktive bekræftelser, fejl der blokerer videre arbejde, eller afbrydelser, der ikke kan vente.

Hvornår bruges den

Kun til afbrydelser: en fejl, der forhindrer brugeren i at komme videre, en “Er du sikker på, at du vil slette?”-bekræftelse, eller en advarsel om ugemte ændringer ved navigation væk fra siden. Det er overdrevet at nå ud efter alertdialog til rutinemæssige modaler — brug den simple role="dialog" til dem.

Forskellen fra role="dialog" er, at en alertdialog annonceres som et role="alert" — assertivt og øjeblikkeligt — når den vises. Dette er passende til reelle afbrydelser; misbrug fører til træthed hos skærmlæser-brugere.

Både aria-labelledby (der peger på titlen) og aria-describedby (der peger på brødteksten) er påkrævede. Alertdialogen skal indeholde mindst én fokuserbar knap, så brugeren kan lukke den.

Tastatur og fokuskontrakt

Ifølge APG alertdialog-mønsteret:

Fokus flyttes til alertdialogen ved åbning — typisk til den sikreste knap (Annuller), så et utilsigtet Enter ikke bekræfter en destruktiv handling.
Tab / Shift+Tab cykler fokus inden for dialogen.
Escape lukker alertdialogen og returnerer fokus til udløseren.
Resten af siden er inaktiv, mens alertdialogen er åben.

Vælg det initiale fokus omhyggeligt: for “Slet?”-prompter skal fokus som standard være på Annuller — aldrig på den destruktive knap.

Hyppige fejl

Bruge role="alertdialog" til alle modaler. Skærmlæsere blaster brugeren med den assertive annoncering, hver gang en modal åbnes.
Initialt fokus på den destruktive knap (Slet, Kassér) — et fejlagtigt Enter sletter brugerens arbejde.
Manglende aria-describedby på brødteksten. Brugeren hører titlen og knapperne, men ikke advarslen.
Alertdialog uden knapper — der er ingen måde at lukke den på, og rollen kræver et handlingsrettet svar.
Selvlukkende alertdialoger efter en timeout. Ophæver semantikken “kræver svar”.

Eksempel

<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>