Standarder · ARIA

Tilstand Widgettilstand

aria-modal

Fortæller hjælpeteknologi, at resten af siden er inert, mens en dialog er åben. Sæt til "true" på role="dialog" eller role="alertdialog". Gør ikke baggrunden faktisk inert — kombinér med inert-attributten eller en fokus-fælde.

Hvornår bruges det

På et role="dialog"- eller role="alertdialog"-element, der skal blokere interaktion med resten af siden, mens det er åbent. Sæt aria-modal="true", så skærmlæseren begrænser sin virtuelle markør til dialogen og annoncerer baggrundindhold som utilgængeligt.

En modal dialog har tre ansvarsområder:

  1. aria-modal="true" — fortæller hjælpeteknologi, at dette er modalt.
  2. Baggrunden inert — opnås via inert-attributten på det omgivende indhold eller ved JavaScript-styret fokus-fælde. Uden dette kan tastaturbrugere tabbe ud af dialogen.
  3. Indledende fokus — flytter fokus ind i dialogen, når den åbnes, og gendanner fokus til udløseren, når den lukkes.

aria-modal alene dækker skærmlæsersiden; det forhindrer ikke en tastaturbruger i at tabbe forbi dialogen. Browserunderstøttelse for at udlede inertness fra aria-modal er inkonsekvent, så kombinér altid.

Det native HTML-element <dialog> med .showModal() håndterer alle tre automatisk. Foretræk det, når det er muligt.

Sådan holdes det synkroniseret

Gyldige værdier er "true" og "false". Render "true", mens dialogen er åben; fjern enten attributten eller sæt "false", mens den er lukket (typisk er den lukkede dialog slet ikke i DOM, så attributten er ligegyldig).

aria-modal parres med to mærkningsattributter:

  • aria-labelledby="<dialog-title-id>" — peger på den synlige overskrift.
  • aria-describedby="<dialog-body-id>" — valgfri, til en kort beskrivelse.

Tilsammen giver de skærmlæseren en sammenhængende åbningsannoncering: “Dialog, Slet konto?, Denne handling kan ikke fortrydes.”

Hyppige fejl

  • aria-modal="true" uden fokus-fælde — tastaturbrugere taber ind i baggrunden.
  • Brug af aria-modal på en ikke-modal popover eller tooltip. Brug role="dialog" kun til ægte modale dialoger; en popover er ikke en dialog.
  • Manglende aria-labelledby — skærmlæseren annoncerer “Dialog” uden noget navn.
  • Undladelse af at flytte fokus ind i dialogen, når den åbnes.
  • Undladelse af at gendanne fokus til den oprindelige udløser, når den lukkes.
  • Markering af baggrunden med aria-hidden="true" i stedet for inert — tastaturets fokus slipper stadig ud; kun skærmlæserens markør er begrænset.
  • To simultant åbne modale vinduer med aria-modal="true". Tilgængelighedstræet bliver forvirret; vis ét ad gangen.

Eksempel

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="confirm-title"
  aria-describedby="confirm-body"
>
  <h2 id="confirm-title">Slet konto?</h2>
  <p id="confirm-body">Denne handling kan ikke fortrydes.</p>

  <button type="button" autofocus>Annuller</button>
  <button type="button">Slet</button>
</div>