Ga naar hoofdinhoud

Alert

Alerts geven contextuele feedback op acties van de gebruiker of tonen belangrijke informatie vanuit het systeem. Ze trekken de aandacht van de gebruiker zonder de taak van de gebruiker te onderbreken. Het is aan te raden om alerts bovenaan de gerelateerde sectie te laten zien. Zorg dat feedback als gevolg van een gebruikersactie altijd in beeld verschijnt.

Gebruikers kunnen alerts niet afwijzen. Alerts verdwijnen pas als de situatie is opgelost of de gebruiker een nieuwe actie uitvoert.

Wanneer te gebruiken​

Gebruik een alert om feedback te geven op acties van de gebruiker of om belangrijke systeeminformatie te laten zien. Ze worden ook samen gebruikt met inline validatie in lange formulieren.

Type meldingen:

  • Foutmelding: Foutmeldingen laten de gebruiker weten dat er iets is misgegaan nadat ze hebben geprobeerd iets te doen.
  • Waarschuwing: Waarschuwingen laten gebruikers weten dat ze acties ondernemen die niet wenselijk zijn of onverwachte resultaten kunnen hebben.
  • Bevestiging: Succesmeldingen laten de gebruiker weten dat ze een actie of taak hebben voltooid.
  • Toelichting: Toelichtingen geven aanvullende informatie die niet altijd is gekoppeld aan de huidige actie of taak.

Wanneer niet te gebruiken​

Gebruik geen alert om invoervelden te valideren bij lange formulieren. Gebruik dan altijd in-line validatie op veldniveau. Zet het eventueel naast een alert met het overzicht van foutmeldingen bovenaan het formulier.

Gebruik ook geen alert voor destructieve acties. Zo kunt u bij een verwijderactie beter een blokkerend patroon gebruiken, zoals een modal. Zo kan de gebruiker bevestigen dat dit is wat hij wil.

Hoe te gebruiken​

  • Houd meldingen zo kort mogelijk.
  • Wees beschrijvend en geef gebruikers duidelijke vervolgstappen.
  • Bedek andere inhoud niet met een alert.
  • De breedte van een alert varieert op basis van de context en pagina-indeling.
  • Plaats alerts bovenaan de gerelateerde sectie.
  • Zorg dat een alert altijd in beeld verschijnt.
  • Probeer dezelfde type meldingen te combineren.
  • Meerdere alerts worden verticaal gestapeld, met de nieuwste bovenaan de lijst.

Gedrag en toegankelijkheid​

Een alert met ARIA role="alert" wordt onmiddellijk aangekondigd als het wordt toegevoegd aan de DOM . Een screenreader plaatst hier automatisch het woord 'melding' voor.

Gebruik role="alert" alleen als de melding verschijnt als gevolg van een actie door de gebruiker.

Vraag jezelf altijd af wanneer de flow van de gebruiker moet worden onderbroken. Bijvoorbeeld als een toelichting of waarschuwingsalert vast op de pagina staat als die wordt geladen, is het niet nodig een role="alert" toe te kennen. In veel gevallen geldt: wees terughoudend met het gebruik van meldingen.

Meerdere alerts Het kan voorkomen dat er een alert op de pagina staat en er door een gebruikersactie nóg een alert bijkomt. Zorg er dan altijd voor dat de nieuwste alert een role="alert" krijgt en de overige alerts niet. Er mag dus slechts één alert een role="alert" bevatten.

Bronvermelding​