aria-modal

Milloin käyttää

role="dialog"- tai role="alertdialog"-elementillä, jonka tulee estää vuorovaikutus muun sivun kanssa sen ollessa auki. Aseta aria-modal="true", jotta ruudunlukuohjelma rajoittaa virtuaalikursorinsa dialogiin ja ilmoittaa taustan sisällön olevan tavoittamattomissa.

Modaalisella dialogilla on kolme vastuuta:

1. aria-modal="true" — kertoo avustavalle teknologialle, että kyseessä on modaali.
2. Tausta inertiksi — tehdään inert-attribuutilla ympäröivässä sisällössä tai JavaScript-pohjaisella kohdistuslukituksella. Ilman tätä näppäimistökäyttäjä voi siirtyä dialogin ulkopuolelle.
3. Alkukohdistus — siirtää kohdistuksen dialogiin sen avautuessa ja palauttaa kohdistuksen käynnistäjään sen sulkeutuessa.

aria-modal yksin kattaa ruudunlukuohjelmasivun; se ei estä näppäimistökäyttäjää siirtymästä dialogin ohi. Selaimen tuki inerttiyden päättelyyn aria-modal-attribuutista vaihtelee, joten yhdistä aina.

Natiivi HTML-elementti <dialog> ja .showModal() hoitavat kaikki kolme automaattisesti. Suositaan sitä aina kun mahdollista.

Synkronoinnin ylläpito

Kelvolliset arvot ovat "true" ja "false". Renderöi "true" dialogin ollessa auki; poista attribuutti tai aseta "false" dialogin ollessa suljettuna (tyypillisesti suljettu dialogi ei ole DOM:ssa lainkaan, jolloin attribuutilla ei ole merkitystä).

aria-modal yhdistetään kahteen nimeämisattribuuttiin:

• aria-labelledby="<dialog-title-id>" — osoittaa näkyvään otsikkoon.
• aria-describedby="<dialog-body-id>" — valinnainen, lyhyttä kuvausta varten.

Yhdessä ne antavat ruudunlukuohjelmalle johdonmukaisen avausilmoituksen: “Dialogi, Poistetaanko tili?, Tätä toimintoa ei voi peruuttaa.”

Yleiset virheet

• aria-modal="true" ilman kohdistuslukitusta — näppäimistökäyttäjät siirtyvät taustalle.
• aria-modal-käyttö ei-modaalisessa ponnahdusikkunassa tai työkaluvihjeessä. Käytä role="dialog" vain todellisille modaalidialogeille; ponnahdusikkuna ei ole dialogi.
• Puuttuva aria-labelledby — ruudunlukuohjelma ilmoittaa “Dialogi” ilman nimeä.
• Kohdistuksen siirtämättä jättäminen dialogiin sen avautuessa.
• Kohdistuksen palauttamatta jättäminen alkuperäiseen käynnistäjään dialogin sulkeutuessa.
• Taustan merkitseminen aria-hidden="true" inert-attribuutin sijaan — näppäimistökohdistus karkaa silti; vain ruudunlukuohjelma kursori on rajoitettu.
• Kaksi samanaikaisesti avoinna olevaa modaalia aria-modal="true"-arvolla. Saavutettavuuspuu sekoittuu; näytä yksi kerrallaan.

Esimerkki

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