Notifactie op een paragraaf

Voor het weergeven van notificaties.

Benodigde stappen:

Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
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.

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

Foutmelding: Lorem ipsum dolor sit.

<p class="error" role="group" aria-label="foutmelding"><span>Foutmelding:</span> Lorem ipsum dolor sit.</p>

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

@use "@minvws/manon/notification";
@use "@minvws/manon/notification-paragraph";