Blok-element

Voor het weergeven van grotere notificaties.

Benodigde stappen:

1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
2. Voeg de notificatie toe op basis van een van de onderstaande voorbeelden.
3. Voeg de gewenste notificatie-type-class toe. Voor meer informatie zie: Beschikbare weergaven.
4. Voeg role="group" toe aan het notificatie-element om screenreader gebruikers erop te attenderen dat de content van de notificatie bij elkaar hoort.
5. 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.
6. 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 hulptechnologieën.
• Notificaties kunnen verborgen worden door de class hidden toe te voegen aan de notification

Voorbeelden

Visueel voorbeeld:

HTML-voorbeeld:

div

<div class="error" role="group" aria-label="foutmelding">
  <span>Foutmelding:</span>
  <h1>Lorem ipsum dolor set</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.</p>
  <ul>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. <a href="">Lorem ipsum</a> consectetur adipiscing elit.</li>
  </ul>
  <button type="button">Lorem</button>
</div>

HTML-structuur voorbeeld:

<div class="error" role="group" aria-label="foutmelding">
  <!-- Content -->
</div>

HTML-voorbeeld:

section

<section class="error" role="group" aria-label="foutmelding">
  <span>Foutmelding:</span>
  <h1>Lorem ipsum dolor set</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.</p>
  <ul>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. <a href="">Lorem ipsum</a> consectetur adipiscing elit.</li>
  </ul>
  <button type="button">Lorem</button>
</section>

HTML-structuur voorbeeld:

<section class="error" role="group" aria-label="foutmelding">
  <!-- Content -->
</section>

Bijbehorende bestanden

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

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/notification";
@use "@minvws/manon/notification-block-element";

Instelbare variabelen

Gerelateerde pagina's