Voeg de notificatie toe op basis van een van de onderstaande voorbeelden.
Voeg de gewenste notificatie-type-class toe. Voor meer informatie zie:
Beschikbare weergaven.
Voeg role="group" toe aan het notificatie-element om screenreader gebruikers
erop te attenderen dat de content van de notificatie bij elkaar hoort.
Voeg aria-label="" toe aan het notificatie-element om screenreader
gebruikers inzicht te geven in het type bericht. Bijvoorbeeld:
aria-label="foutmelding". Let op dat de content van het label in de taal
van het document staat.
Voeg binnen het element een span toe zodat gebruikers (van screenreaders)
weten wat de context van het bericht is. Bijvoorbeeld:
<span>Foutmelding:</span>. Het is aan te raden om dit bericht
voor alle gebruikers zichtbaar te houden zodat het voor iedereen duidelijk is. Denk
hierbij ook aan kleurenblinden als er in het ontwerp enkel gebruik wordt gemaakt van
kleuren als visuele onderscheidende factor op notificaties of iconen waarbij het kan
zijn dat niet alle gebruikers het icoon zullen herkennen.
Aandachtspunten
Voeg de volledige code toe die in de voorbeelden staat om alle gebruikers een goede
gebruikerservaring the bieden. Denk hierbij aan gebruikers die kleurenblind zijn of
gebruikers die gebruik maken van hulptechnologiën.
Notificaties kunnen verborgen worden door de class
hidden toe te voegen aan de notification