alert
Reaaliaikainen alue, joka välittää kiireellisen, aikakriittisen viestin. Ruudunlukuohjelmat ilmoittavat sen välittömästi keskeyttäen meneillään olevan puheen. Käytä harkiten — varaa aidoille virheille ja varoituksille; väärinkäyttö aiheuttaa avustavan teknologian käyttöväsymystä.
Käyttötilanteet
Viesteille, jotka aidosti keskeyttävät käyttäjän — lomakkeen lähetys epäonnistui, istunto on päättymässä, yhteys on katkennut. role="alert" vastaa aria-live="assertive" ja aria-atomic="true" yhdistelmää, mikä tarkoittaa, että ruudunlukuohjelma keskeyttää meneillään olevan ilmoituksen ja lukee hälytyksen seuraavaksi.
Käytä harkiten. Assertiiviset ilmoitukset keskeyttävät käyttäjän meneillään olevan tehtävän; sellaisen laukaiseminen jokaisen tallennetun kentän tai onnistuneen toiminnon yhteydessä on häiritsevää. Ei-kiireellisiin tilamuutoksiin käytä role="status" (aria-live="polite").
Tärkein sääntö: hälytyselelementin TÄYTYY olla DOM:ssa ennen kuin viesti lisätään, ja sisältö TÄYTYY lisätä (ei vaihtaa piilosta näkyväksi) ilmoituksen laukaisemiseksi. <div role="alert">Virhe</div>-elementin lisääminen tyhjästä on epäluotettavaa eri ruudunlukuohjelmissa. Turvallinen malli: renderöi tyhjä <div role="alert"></div> sivun latautuessa, päivitä sen tekstisisältö hälytyksen yhteydessä.
Milloin käyttää alert- vs. status-roolia
Käytä role="alert" | Käytä role="status" |
|---|---|
| Lomakkeen validointivirheet | ”Tuote lisätty ostoskoriin” |
| Istunto on päättymässä | Hakutulosten määrä päivitetty |
| Yhteys katkesi | ”Tallennettu”-ilmaisin |
| Maksu epäonnistui | Lataus valmis |
Yleiset virheet
- Hälytyselelementin lisääminen DOM:iin viestin jälkeen — monet ruudunlukuohjelmat eivät ilmoita.
hidden-attribuutin vaihtaminen valmiiksi täytetyssä hälytyslaatikossa. Tekstisisällön muutos käynnistää ilmoituksen; pelkkä näkyvyyden vaihto ei välttämättä toimi.role="alert"käyttäminen rutiinitilaviesteihin. Hukkuu käyttäjä keskeytyksiin.- Useita hälytyksiä lisätään nopeasti — myöhemmät viestit jonottuvat aiempien jälkeen, joskus kymmeniä sekunteja.
- Hälytysviesti, joka ei nimeä kenttää tai syytä — pelkkä “Virhe” on hyödytön. “Sähköpostiosoite vaaditaan.” on toimintakelpoinen.
role="alert"asettaminen lomaketta ympäröivälle säiliölle ja odotetaan, että sisäiset muutokset ilmoitetaan. Vain hälytyseelementin oman tekstin muutokset käynnistävät ilmoituksen.
Esimerkki
<!-- Renderöi tämä tyhjänä sivun latautuessa -->
<div role="alert" id="formErr"></div>
<script>
// Lähetyksen epäonnistuessa:
document.getElementById('formErr').textContent =
'Sähköpostiosoite vaaditaan.';
</script>