Normative · ARIA

Stato Stato del widget

aria-modal

Indica alle tecnologie assistive di trattare il resto della pagina come inerte mentre un dialogo è aperto. Va impostato a "true" su role="dialog" o role="alertdialog". Non rende effettivamente inerte lo sfondo — occorre abbinarlo all'attributo inert o a un focus trap.

Quando usarlo

Su un elemento role="dialog" o role="alertdialog" che deve bloccare l’interazione con il resto della pagina mentre è aperto. Impostare aria-modal="true" in modo che il screen reader confini il cursore virtuale al dialogo e annunci il contenuto in background come non raggiungibile.

Un dialogo modale ha tre responsabilità:

  1. aria-modal="true" — comunica alle tecnologie assistive che si tratta di un elemento modale.
  2. Sfondo inerte — applicato tramite l’attributo inert sul contenuto circostante, oppure mediante un focus trap gestito via JavaScript. Senza questa misura, gli utenti da tastiera possono uscire dal dialogo con Tab.
  3. Focus iniziale — sposta il focus nel dialogo quando si apre e lo ripristina sul trigger quando si chiude.

aria-modal da solo copre il lato screen reader; non impedisce a un utente da tastiera di spostarsi con Tab oltre il dialogo. Il supporto dei browser all’inferenza dell’inertness da aria-modal è disomogeneo, perciò è sempre opportuno combinare entrambe le tecniche.

L’elemento nativo HTML <dialog> con .showModal() gestisce automaticamente tutte e tre le responsabilità. È preferibile utilizzarlo quando possibile.

Come mantenerlo sincronizzato

I valori validi sono "true" e "false". Impostare "true" mentre il dialogo è aperto; rimuovere l’attributo oppure impostarlo a "false" mentre è chiuso (di norma il dialogo chiuso non è presente nel DOM, quindi l’attributo non ha effetto).

aria-modal è abbinato a due attributi di etichettatura:

  • aria-labelledby="<dialog-title-id>" — punta all’intestazione visibile.
  • aria-describedby="<dialog-body-id>" — opzionale, per una breve descrizione.

Insieme forniscono al screen reader un annuncio di apertura coerente: «Dialogo, Eliminare l’account? Questa operazione non può essere annullata.»

Errori comuni

  • aria-modal="true" senza alcun focus trap — gli utenti da tastiera possono spostarsi nello sfondo.
  • Usare aria-modal su un popover o un tooltip non modale. Si utilizzi role="dialog" solo per i dialoghi modali veri e propri; un popover non è un dialogo.
  • aria-labelledby assente — il screen reader annuncia «Dialogo» senza nome.
  • Mancato spostamento del focus nel dialogo all’apertura.
  • Mancato ripristino del focus sul trigger originale alla chiusura.
  • Contrassegnare lo sfondo con aria-hidden="true" anziché con inert — il focus da tastiera riesce comunque a uscire; è vincolato solo il cursore del screen reader.
  • Due modali aperti contemporaneamente con aria-modal="true". L’albero dell’accessibilità si confonde; mostrarne uno alla volta.

Esempio

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="confirm-title"
  aria-describedby="confirm-body"
>
  <h2 id="confirm-title">Eliminare l'account?</h2>
  <p id="confirm-body">Questa operazione non può essere annullata.</p>

  <button type="button" autofocus>Annulla</button>
  <button type="button">Elimina</button>
</div>