Rooli Ikkuna

`alertdialog`

Dialogi, joka välittää kiireellisen viestin ja vaatii käyttäjän vastauksen. Yhdistää dialogin semantiikan ja hälytysilmoituksen. Käytä vain tuhoaville vahvistuksille, työtä estäville virheille tai muille keskeytyksille, jotka eivät voi odottaa.

Käyttötilanteet

Vain todellisiin keskeytyksiin: virhe, joka estää käyttäjää jatkamasta, “Haluatko varmasti poistaa?” -vahvistus, tallentamattomia muutoksia koskeva varoitus navigoitaessa pois. alertdialog tavallisiin modaaleihin on ylimitoitettu — käytä niihin tavallista role="dialog".

Ero role="dialog"-rooliin on se, että alertdialog ilmoitetaan role="alert"-tyylisesti — assertiivisesti ja välittömästi — sen ilmestyessä. Tämä sopii todellisiin keskeytyksiin; väärinkäyttö johtaa ruudunlukuohjelman käyttöväsymykseen.

aria-labelledby (osoittaa otsikkoon) ja aria-describedby (osoittaa leipätekstiin) ovat molemmat pakollisia. Alertdialogin täytyy sisältää vähintään yksi kohdistettava painike, jolla käyttäjä voi sulkea sen.

Näppäimistö- ja kohdistussopimus

APG alertdialog -mallin mukaisesti:

Kohdistus siirtyy alertdialogiin avattaessa — tyypillisesti turvallisimpaan painikkeeseen (Peruuta), jotta vahingollinen Enter-painallus ei vahvista tuhoavaa toimintoa.
Tab / Shift+Tab kiertää kohdistuksen dialogin sisällä.
Escape sulkee alertdialogin ja palauttaa kohdistuksen käynnistyselementtiin.
Muu sivu on inaktiivinen alertdialogin ollessa auki.

Valitse alkukohdistus huolella: “Poista?”-valintaikkunoissa kohdista oletuksena Peruuta — ei koskaan tuhoavaan painikkeeseen.

Yleiset virheet

role="alertdialog" käyttäminen jokaiselle modaalille. Ruudunlukuohjelmat laukaisevat assertiivisen ilmoituksen joka kerta modaalin avautuessa.
Alkukohdistus tuhoavassa painikkeessa (Poista, Hylkää) — vahingollinen Enter pyyhkii käyttäjän työn.
Puuttuva aria-describedby leipätekstille. Käyttäjä kuulee otsikon ja painikkeet mutta ei varoitustekstiä.
Alertdialog ilman painikkeita — sitä ei voi sulkea, eikä rooli edellytä toimintakelpoista vastausta.
Alertdialogien automaattinen sulkeminen aikakatkaisun jälkeen. Kumoaa “vaatii vastauksen” -semantiikan.

Esimerkki

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Poistetaanko luonnos?</h2>
  <p id="confDesc">"Nimetön luonnos (12. maaliskuuta)" poistetaan pysyvästi. Toimintoa ei voi kumota.</p>
  <button type="button" autofocus>Peruuta</button>
  <button type="button">Poista luonnos</button>
</div>