aria-modal

När ska det användas

På ett role="dialog"- eller role="alertdialog"-element som ska blockera interaktion med resten av sidan medan det är öppet. Sätt aria-modal="true" så att skärmläsaren begränsar sin virtuella markör till dialogen och meddelar att bakgrundsinnehållet inte är nåbart.

En modal dialog har tre ansvarsområden:

1. aria-modal="true" — talar om för hjälpmedel att detta är modalt.
2. Bakgrunden inaktiv — tillämpas via attributet inert på omgivande innehåll, eller med JavaScript-styrd fokusfälla. Utan detta kan tangentbordsanvändare tabba ut ur dialogen.
3. Inledande fokus — flyttar fokus in i dialogen när den öppnas, och återställer fokus till utlösaren när den stängs.

aria-modal täcker enbart skärmläsarsidan; det hindrar inte en tangentbordsanvändare från att tabba förbi dialogen. Webbläsarstödet för att härleda inaktivitet från aria-modal är inkonsekvent, så kombinera alltid med andra åtgärder.

Det inbyggda HTML-elementet <dialog> med .showModal() hanterar alla tre automatiskt. Föredra det när det är möjligt.

Hur man håller det synkroniserat

Giltiga värden är "true" och "false". Rendera "true" medan dialogen är öppen; ta antingen bort attributet eller sätt "false" medan den är stängd (vanligtvis är den stängda dialogen inte i DOM alls, så attributet saknar betydelse).

aria-modal kombineras med två etiketteringsattribut:

• aria-labelledby="<dialog-title-id>" — pekar på den synliga rubriken.
• aria-describedby="<dialog-body-id>" — valfritt, för en kort beskrivning.

Tillsammans ger de skärmläsaren ett sammanhängande öppningsmeddelande: “Dialog, Ta bort konto?, Den här åtgärden kan inte ångras.”

Vanliga fel

• aria-modal="true" utan någon fokusfälla — tangentbordsanvändare kan tabba in i bakgrunden.
• Att använda aria-modal på ett icke-modalt popover eller ett verktygstips. Använd role="dialog" enbart för verkliga modala dialoger; ett popover är ingen dialog.
• Saknat aria-labelledby — skärmläsaren meddelar “Dialog” utan namn.
• Att inte flytta fokus in i dialogen när den öppnas.
• Att inte återställa fokus till den ursprungliga utlösaren när dialogen stängs.
• Att markera bakgrunden med aria-hidden="true" i stället för inert — tangentbordsfokus kan fortfarande lämna dialogen; enbart skärmläsarmarkören begränsas.
• Två samtidigt öppna modaler med aria-modal="true". Tillgänglighetsträdet förvirras; visa en åt gången.

Exempel

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