Ruolo Finestra

`alertdialog`

Un dialog che trasmette un messaggio urgente e richiede una risposta dell'utente. Combina la semantica del dialog con l'annuncio dell'alert. Da usare solo per conferme distruttive, errori che bloccano l'operatività o altre interruzioni che non possono attendere.

Quando usarlo

Solo per interruzioni: un errore che impedisce all’utente di proseguire, una richiesta di conferma del tipo «Sei sicuro di voler eliminare?», un avviso di modifiche non salvate durante la navigazione. Ricorrere a alertdialog per modali di routine è eccessivo — per queste si usa il semplice role="dialog".

La differenza rispetto a role="dialog" è che un alertdialog viene annunciato come un role="alert" — in modo assertivo e immediato — nel momento in cui appare. Ciò è appropriato per interruzioni genuine; l’uso improprio porta all’affaticamento da screen reader.

aria-labelledby (che punta al titolo) e aria-describedby (che punta al testo del corpo) sono entrambi obbligatori. L’alertdialog deve contenere almeno un pulsante attivabile affinché l’utente possa chiuderlo.

Contratto tastiera + focus

Secondo il pattern APG alertdialog:

Il focus si sposta sull’alertdialog all’apertura — tipicamente sul pulsante più sicuro (Annulla), in modo che una pressione accidentale di Invio non confermi un’azione distruttiva.
Tab / Shift+Tab spostano il focus all’interno del dialog.
Escape chiude l’alertdialog e restituisce il focus all’elemento che lo ha attivato.
Il resto della pagina è inattivo mentre l’alertdialog è aperto.

Scegliere con cura il focus iniziale: per le richieste di conferma «Elimina?», il focus ricade di default su Annulla — mai sul pulsante distruttivo.

Errori comuni

Usare role="alertdialog" per ogni modale. Gli screen reader bombardano l’utente con l’annuncio assertivo a ogni apertura di modale.
Focus iniziale sul pulsante distruttivo (Elimina, Scarta) — una pressione involontaria di Invio cancella il lavoro dell’utente.
aria-describedby mancante sul testo del corpo. L’utente sente il titolo e i pulsanti ma non l’avviso.
Alertdialog privo di pulsanti — non è possibile chiuderlo, e il ruolo impone una risposta attiva.
Alertdialog che si chiude automaticamente dopo un timeout. Vanifica la semantica «richiede risposta».

Esempio

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Eliminare la bozza?</h2>
  <p id="confDesc">«Bozza senza titolo (12 marzo)» verrà eliminata definitivamente. Questa azione non può essere annullata.</p>
  <button type="button" autofocus>Annulla</button>
  <button type="button">Elimina bozza</button>
</div>