Ilmoitukset ja ilmoituskomponentit

Suomi.fi Design System sisältää neljä eri komponenttia, joilla voidaan esittää käyttäjälle erilaisia ilmoituksia: Alert, InlineAlert, Notification ja Toast. Tällä sivulla kuvataan näiden komponenttien erot ja käyttötarkoitukset.

Komponenttien vertailu

	Milloin käytetään	Ilmestyy dynaamisesti	Sijainti sivulla
Alert (Heräte)	Ilmoitus koskee staattisesti koko sivua tai sivustoa	Ei	Sivun yläreuna
InlineAlert (Sisältöheräte)	Ilmoitus näytetään käyttäjän suorittaman interaktion jälkeen, ja se koskee sivun tiettyä osaa (esim. lomake)	Kyllä	Ilmoituksen kohteen yläpuolella
Notification (Ilmoitus)	Ilmoitus koskee sivua tai sivun tiettyä osaa, eikä sen näyttämiseen vaadita ensin käyttäjän interaktiota	Ei	Ilmoituksen kohteen yläpuolella tai sivun alussa
Toast (Ponnahdusilmoitus)	Ilmoitus on toissijainen ja se näytetään hetkellisesti käyttäjän suorittaman interaktion jälkeen	Kyllä	Kelluu sivun oikeassa yläkulmassa

Dynaamiset ilmoitukset

Kun ilmoitus lisätään sivulle dynaamisesti käyttäjän interaktion seurauksena (InlineAlert tai Toast), tulee huolehtia siitä, että myös ruudunlukijakäyttäjät saavat tiedon ilmoituksesta. Paras keino tähän on asettaa ilmoitukset sellaisen HTML-elementin sisään, jolla on aria-live -attribuutti.

Huomioi, että aria-live -attribuutin sisältävän elementin tulee esiintyä HTML-dokumentissa ennen kuin ilmoitus renderöidään sen sisään, jotta ruudunlukijat rekisteröivät sisällön muutoksen. Alla on esitetty yksinkertainen esimerkki aria-live -regionista ja sisältöherätekomponentin käytöstä.

Lähdekoodi GitHubissa

Div-elementti, joka sisältää aria-live -attribuutin ja jonka sisään ilmoitukset asetetaan.

Jokin sivuston osa, esimerkiksi lomake, jossa käyttäjä suorittaa interaktioita ja saa siitä mahdollisia ilmoituksia.