Status Widgetstatus

`aria-modal`

Geeft hulptechnologie aan de rest van de pagina als inert te behandelen terwijl een dialoogvenster open is. Stel in op "true" voor role="dialog" of role="alertdialog". Maakt de achtergrond zelf niet inert — combineer altijd met het inert-attribuut of een focustrap.

Wanneer te gebruiken

Op een role="dialog" of role="alertdialog" element dat interactie met de rest van de pagina moet blokkeren terwijl het open is. Stel aria-modal="true" in zodat de schermlezer zijn virtuele cursor tot het dialoogvenster beperkt en achtergrondinhoud als onbereikbaar aankondigt.

Een modaal dialoogvenster heeft drie verantwoordelijkheden:

aria-modal="true" — geeft hulptechnologie aan dat dit modaal is.
Achtergrond inert — toegepast via het inert-attribuut op de omringende inhoud, of via JavaScript-beheerde focustrapping. Zonder dit kunnen toetsenbordgebruikers buiten het dialoogvenster tabben.
Initiële focus — verplaatst de focus naar het dialoogvenster wanneer het opent, en herstelt de focus naar het activerende element wanneer het sluit.

aria-modal alleen dekt de schermlezerkant; het voorkomt niet dat een toetsenbordgebruiker voorbij het dialoogvenster tabt. Browserondersteuning voor het afleiden van inertness uit aria-modal is inconsistent, dus combineer altijd.

Het native HTML-element <dialog> met .showModal() verwerkt alle drie automatisch. Gebruik dit wanneer mogelijk.

Synchronisatie

Geldige waarden zijn "true" en "false". Stel "true" in terwijl het dialoogvenster open is; verwijder het attribuut of stel "false" in terwijl het gesloten is (doorgaans is het gesloten dialoogvenster helemaal niet in de DOM, waardoor het attribuut niet relevant is).

aria-modal wordt gecombineerd met twee label-attributen:

aria-labelledby="<dialog-title-id>" — verwijst naar de zichtbare koptekst.
aria-describedby="<dialog-body-id>" — optioneel, voor een korte beschrijving.

Samen geven ze de schermlezer een coherente openingsaankondiging: “Dialoogvenster, Account verwijderen?, Deze actie kan niet ongedaan worden gemaakt.”

Veelvoorkomende fouten

aria-modal="true" zonder focustrap — toetsenbordgebruikers tabben naar de achtergrond.
aria-modal gebruiken op een niet-modaal popover of tooltip. Gebruik role="dialog" alleen voor echte modale dialoogvensters; een popover is geen dialoogvenster.
Ontbrekende aria-labelledby — de schermlezer kondigt “Dialoogvenster” aan zonder naam.
Nalaten de focus naar het dialoogvenster te verplaatsen wanneer het opent.
Nalaten de focus naar het oorspronkelijke activeringselement te herstellen wanneer het sluit.
De achtergrond markeren met aria-hidden="true" in plaats van inert — toetsenbordsfocus ontsnapt nog steeds; alleen de schermlezercursor wordt beperkt.
Twee gelijktijdig geopende modals met aria-modal="true". De toegankelijkheidsstructuur raakt in de war; toon er telkens één tegelijk.

Voorbeeld

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="confirm-title"
  aria-describedby="confirm-body"
>
  <h2 id="confirm-title">Delete account?</h2>
  <p id="confirm-body">This action cannot be undone.</p>

  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete</button>
</div>