Alert

[jeffreylauwers]

We willen graag meer leren over de Alert component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Alert

Doel

Belangrijk bericht dat informeert over de huidige activiteit van de gebruiker.

Ook bekend als

Message, Notification.

Gerelateerde componenten

Alert Dialog, Invalid Form Alert, Notification Banner, Note

Gerelateerde NL Design System Richtlijnen

Formulieren:

• Statusberichten in een formulier.
  • Informeer gebruikers van screenreaders over het statusbericht.
  • Informeer ingezoomde gebruikers over het statusbericht.
  • Geef gebruikers voldoende tijd om het statusbericht te lezen.

Onderzoek

Onderzoek Generieke Services - Gemeente Den Haag
Gebruikersonderzoek waarin inzichten over de Alert zijn verzameld. Er is aangegeven dat de ‘groene balk’ met de bevestiging na het uitvoeren van een taak goed opvalt en als zeer prettig wordt ervaren.

Onderzoek Generieke Services - Miro
Miro board dat is gebruikt tijdens het gebruikersonderzoek Generieke Services waarin een inzicht te vinden is over de Alert.

ARIA live regions - MDN docs
Het artikel bespreekt hoe ARIA live-regio’s ervoor zorgen dat dynamische contentupdates toegankelijk worden voor gebruikers van assistieve technologie door gebruik van het aria-live-attribuut.

ARIA: alert role - MDN docs
In dit artikel wordt het gebruik en de toepassing van de aria alert role beschreven. Wanneer deze rol aan een element wordt toegevoegd, stuurt de browser een toegankelijk alert-evenement naar ondersteunende technologieën, die de gebruiker vervolgens kunnen waarschuwen.

Alert Pattern - ARIA Authoring Practices Guide (APG)
Interactief voorbeeld en WAI-ARIA richtlijnen.

Notification Banner - GOV.UK
Notification Banner (vergelijkbaar met de Alert) implementatie bij GOV.UK. Onder 'Research on this component' is genoteerd waar nog nader onderzoek naar moet worden gedaan. Er is ook een Notification banner Discussion waar meer informatie, onderzoek en aanpassingen worden gedeeld. Enkele interessante comments:

• Gebruik van rode kleuren. Rode kleuren zijn effectief voor directe foutmeldingen, maar veroorzaken mogelijk stress als ze onnodig op een dashboard verschijnen.
• Positie van melding. Uit onderzoeken met meldingen voor belastingkredieten bleek dat mensen meldingen bovenaan het scherm vaak over het hoofd zagen; door ze direct onder de <h1>-kop te plaatsen, werden ze veel vaker opgemerkt.
• Accessibility review. Er is een interne toegankelijkheidsbeoordeling gedaan. Daar wordt ingegaan op de blauwe banner, autofocus, gebruik van meerdere banners en de styling.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Storybook

Default (warning)

Warning
Display a warning when user action is required.

Error
In case of an error, use the red alert. Provide the user with suggestions on alternative ways to achieve the goal.

Success
Announce the success of a significant action.

Info
An informative message can emphasize matters that are useful to follow.

With List
For clarification, formatted text can be included in the alert.

With Inline Link
Include an inline link in the text to guide the user.

Without Heading
Sometimes, a heading is unnecessary. The icon automatically becomes slightly smaller.

Responsive gedrag

Figma

Warning

Info

Error

Success

---

Notities

• De iconen verschillen tussen Storybook en Figma.
• Heading 1 t/m Heading 4 kunnen in de code worden toegepast, maar dit verandert de zichtbare lettergrootte niet.
• Er is een optie om de Alert met of zonder Heading weer te geven.
• Als er geen Heading wordt gebruikt, wordt het icoon automatisch kleiner.
• De Alert kan worden gesloten via een Icon Button (kruisje).
• Verschillende border kleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• Er is geen achtergrondkleur ingesteld.
• De inhoud kan bestaan uit een Paragraph, Link en List.
• Richtlijnen beschikbaar.

[Rozerinay]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP
• GitHub

---

Screenshots / Varianten

Storybook

Default

Success

Warning

Error

With Action

With Close

With Action And Close

With Custom Icon

Responsive gedrag

Figma - Huidig

With action

Without action

With action not closeable

Figma - WIP

Informative

Negative

Positive

Warning

---

Notities

• De iconen verschillen tussen Storybook en Figma.
• Heading is niet instelbaar. Er is maar 1 Heading gebruikt.
• Er is geen optie om de Alert zonder Heading weer te geven.
• De Alert kan worden gesloten via een Icon Button (kruisje).
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph en Button.
• Richtlijnen beschikbaar.

[Rozerinay]

DSO

• Documentatie website
• Storybook
• GitHub

---

Screenshots / Varianten

Documentatie website

Storybook

Error

Info

Success

Warning

Without button

Compact (without icon)

Responsive gedrag

---

Notities

• De iconen verschillen tussen Storybook en Figma.
• Heading 2 t/m Heading 6 kunnen in de code worden toegepast, maar dit verandert de zichtbare lettergrootte niet.
• Er is een optie om de Alert met of zonder Heading weer te geven.
• De Alert kan niet worden gesloten.
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph, Link en Button.
• Compacte variant heeft een border-inline-start en geen icoon.
• Richtlijnen beschikbaar.

[Rozerinay]

DUO

Documentatie website

---

Screenshots / Varianten

Informatief (inline)
Om een gebruiker te informeren.

Waarschuwing (inline)
Om een gebruiker te waarschuwen.

Fout (inline)
Om een gebruikter te laten weten dat er iets fout is gegaan.

Succes (inline)
Om een gebruikter te laten weten dat een actie geslaagd is.

Sluitbare notificaties
Gebruik alleen als de informatie niet van cruciaal belang is te lezen of erop te reageren.

Toast notificaties
Toasts zijn op tijd gebaseerde notificaties die worden gebruikt om korte berichten weer te geven. Ze verschijnen bovenaan het scherm en verdwijnen na 7 seconden.

Responsive gedrag

---

Notities

• Onder de naam: Notification.
• Er is geen gebruik gemaakt van iconen.
• Heading is niet instelbaar. Er is maar 1 Heading gebruikt.
• Er is geen optie om de Alert zonder Heading weer te geven.
• De Alert kan worden gesloten via een Button (kruisje met 'sluit' tekst).
• Verschillende achtergrond kleuren worden gebruikt om het type Alert aan te geven.
• De inhoud kan bestaan uit een Paragraph.
• Wordt of inline of boven de main container getoond.
• Richtlijnen beschikbaar.

[Rozerinay]

OpenFormulieren

Storybook

---

Screenshots / Varianten

Error Message

Ok Message

Info Message

Warning Message

Responsive gedrag

---

Notities

• Onder de naam: Error Message.
• Er is geen Heading gebruikt.
• De Message kan niet worden gesloten.
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph.

[Rozerinay]

OpenGemeenten

• Documentatie website
• Pattern Lab

---

Screenshots / Varianten

Notification

Notification Alert

Notification Information

Notification Success

Notification Warning

Notification Link

Notification Layout 1 Alert

Notification Layout 1 Information

Notification Layout 1 Success

Notification Layout 1 Warning

Responsive gedrag

---

Notities

• Onder de naam: Notifications (Patternlab) en Waarschuwingen (Documentatie website)
• Heading is niet instelbaar. Er is maar 1 Heading gebruikt.
• Er is geen optie om de Alert zonder Heading weer te geven.
• De Notification kan niet worden gesloten.
• Verschillende achtergrondkleuren worden gebruikt om het type Notification aan te geven.
• Verschillende iconen worden toegepast om het type Notification te verduidelijken.
• De inhoud kan bestaan uit een Paragraph en Link.
• De 'Layout' variant heeft alleen een icoon en Heading, en geen achtergrond.

[Rozerinay]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Notification

Alert

Warning

OK

Responsive gedrag

Figma

Neutral and closeable

Accomplishment

Warning !

Alert !!!

Responsive gedrag

---

Notities

• Onder de naam: Alert in Storybook en Notifications in Figma.
• De namen van de types verschillen tussen Storybook en Figma.
• Er is geen Heading gebruikt.
• Notification in Figma kan worden gesloten via een kruis icoon.
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph en Link.
• In Figma staat documentatie die erop wijst dat deze componenten als Toast of Snackbar ingezet worden.

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Storybook

Info

Warning

Error

Success

With heading

With button

With close button

Responsive gedrag

Figma

---

Notities

• Er is een Heading gebruikt, maar in feite is dit een text met het strong element.
• Er is een optie om de Alert met of zonder Heading weer te geven.
• Alert kan worden gesloten via een Button (kruisje).
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph, Button en Link.

[Rozerinay]

Utrecht

• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Storybook

Default

Info

OK

Warning

Error

With Icon

Responsive gedrag

Figma

Informative

Negative

Positive

Warning

---

Notities

• Heading is niet instelbaar. Er is maar 1 Heading gebruikt.
• Er is geen optie om de Alert zonder Heading weer te geven.
• De Alert kan niet worden gesloten.
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Mogelijkheid om een icoon toe te passen.
• In Figma worden verschillende iconen toegepast om het type Alert te verduidelijken.
• In Figma worden border kleuren gebruikt om het type Alert aan te geven.
• De inhoud kan bestaan uit een Paragraph.
• De namen van de types verschillen tussen Storybook en Figma.
• Richtlijnen beschikbaar.

[MariekeBrouwer]

Nice! Wij hebben bij het bekijken van de alert eigenlijk nog een aantal vragen/opmerkingen:

• het kan zijn dat het systeem van leverancier meerdere meldingen/alerts genereert. Handig is dan ook dat er een bepaalde spacing zit tussen de verschillende alerts.
• is er ook documentatie beschikbaar over wanneer je wel/niet meldingen van een kruisje voorziet?
• wanneer er directe actie nodig is (op een andere pagina) is een knop handig :)

[Rozerinay]

Dank je wel voor je goede vragen.

Laten we dit zeker bespreken als deze component richting Candidate gaat.

Er is dan ook nog geen documentatie beschikbaar over het wel / niet tonen van een kruisje. Op dit moment heeft alleen DUO documentatie beschikbaar over wanneer je dit doet.

We zouden graag vanuit de community willen horen wanneer dit wordt gedaan.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Alert op het Community bord

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Alert op het Candidate bord

[eslook]

Aanvullende learnings uit ons werk aan de Alert in de Utrecht repository, naar aanleiding van deze PR.

• De Alert moet altijd een role hebben. De initiele implementatie had de type optioneel, waardoor wanneer je geen type meegeeft, geen role werd gezet.
• De Alert type en role moeten gelimiteerd worden tot deze die wij vastleggen en altijd een fallback bevatten wanneer niet ingesteld.
• De Alert moet altijd role="status" of role="alert" gebruiken. De role="note" is niet van toepassing voor een Alert. Dit is ook de distinctie tussen een Alert en een Spotlight Section.
• Mogelijk moet de API voor role property veranderen naar aanleiding van de gelijknamige role attribuut welke een conflict zou veroorzaken in Web Components. Vandaar dat Web Components component niet role aanpasbaar heeft nu, terwijl de React component dat wel heeft.

ik kan me trouwens voorstellen dat we in de toekomst een andere naam toevoegen voor "role" in React, zodat we een consistente API hebben voor React, voor de Web Component, en voor de React Web Component wrapper

Aangezien ARIA alleen alert/assertive en status/polite de enige opties zijn, en assistive technologies niet heel snel evolueren, hoeven we misschien niet echt rekening te houden met potentiele toekomstige aria live niveau's. Dan kun je overwegen om er een boolean van te maken, zoals 'utrecht-alert type="info" assertive'. Maar misschien wil je ook wel ondersteunen dat je warnings polite maakt, bijvoorbeeld als het er heel veel zijn.In React is assertive={false} misschien logisch, maar in HTML is het gebruikelijk dat je boolean attributes achterwege laat. Daarom is een enum handiger. Bijvoorbeeld live="assertive" en live="polite".

Bron

[JJGrootveld]

Repost vanuit Alert Dialog omdat het meer aansluit bij dit component:

KVK

Screenshots / Varianten

Storybook

Documentatie in Figma

Component in Figma

Onderzoek naar dit component

• De blauwe "Info" variant van het Notification component wordt in een aantal van onze onderzoeken makkelijk over het hoofd gezien tenzij zij echt bewust de pagina scannen en op zoek zijn naar informatie.

[RenateRoke]

Candidate selectieproces: Is de component al ingesteld voor meerdere huisstijlen?

Het kernteam heeft gekeken of Alert van Gemeente Utrecht al geschikt is om richting Hall of Fame te gaan. Hiervoor willen we dat de component succesvol in tenminste 2 verschillende huisstijlen is ingezet.

We hebben gekeken naar de huisstijl van onder andere gemeente Tubbergen, gemeente Noordwijk, gemeente Rotterdam en Open Formulieren en we zijn tot de volgende conclusie gekomen:

🎉 Jazeker! Met jullie hulp hebben we genoeg informatie verzameld om een goed instelbaar component als Candidate beschikbaar te gaan maken.

Heb je aanvullingen? We horen het graag, laat het ons weten als comment onder bericht!

[RenateRoke]

Candidate selectieproces: Is de component al ingezet in meerdere projecten?

Omdat de Alert van Gemeente Utrecht geschikt is voor verschillende huisstijlen heeft het kernteam ook gekeken of hij al gebruikt wordt in productie, prototypes en templates.
Deze informatie is nodig om de component een stap verder te brengen in het Candidate proces.

We hebben hiervoor gekeken waar de component succesvol wordt ingezet en we zijn tot de volgende conclusie gekomen:

🎉 De component wordt onder andere gebruikt door:

• Gemeente Druten Wijchen via OpenStad gebruikt het in https://doemee.drutenwijchen.nl/zon-wind/vragenlijst.
• Gemeente Haarlemmermeer via Open Formulieren gebruikt het in https://formulieren.haarlemmermeer.nl/subsidie-voor-isolatie-aanvragen/startpagina?_start=1&_digid-message=login-cancelled

Heb je aanvullingen? We horen het graag, laat het ons weten als comment onder bericht!

[RenateRoke]

Candidate selectieproces: Is de component al meegenomen in een WCAG-EM audit?

Om de Alert van gemeente Utrecht als een toegankelijk Candidate component beschikbaar te maken is het handig als we weten of de Community implementaties al helemaal toegankelijk kunnen worden ingezet.

We hebben hiervoor gekeken of er een toegankelijkheidsverklaring beschikbaar was voor de projecten die in productie worden gebruikt. En:

🎉 Ja! We hebben de uitkomsten van de volgende WCAG-EM audit (1 of meerdere) kunnen vinden:

• Content-onderzoek Doe Mee Druten Wijchen (OpenStad)
• Techniek onderzoek OpenStad
• Techniek onderzoek Open Formulieren
• Content-onderzoek Open Formulieren Haarlemmermeer
• Volledig onderzoek Open Formulieren Nijmegen
• Volledig onderzoek Open Formulieren Den Bosch

Notities voor toegankelijkheid

📝 We hebben wat dingen gevonden die in een Candidate implementatie beter kunnen. Omdat we die niet willen vergeten hebben we hier de notities gemaakt:

• Als er sprake is van een statusmelding moet de rol 'alert' aanwezig zijn.
• De contrastratio tussen de tekst en de achtergrond moet ten minste 4,5:1 zijn.

Heb je aanvullingen? We horen het graag, laat het ons weten als comment onder bericht!