Notificatie-teller

Gebruik om de gebruiker te attenderen en te informeren over nieuwe berichten of notificaties.

  • Voeg de class "message-counter" toe om het aantal berichten visueel weer te geven als een notificatie-teller.
  • Voeg aria-label="" toe met een duidelijke omschrijving toe voor gebruiker die gebruik maken van screenreaders. Bijvoorbeeld: "Nieuwe berichten", "Ongelezen berichten" of "Nieuwe berichten binnen afspraken". Houd de omschrijving kort maar zorg voor voldoende context.

Visueel voorbeelden:

1 12 500 1583 12.830

Html-voorbeelden:

              
<span class="message-counter" aria-label="Nieuwe berichten">1</span>
<span class="message-counter" aria-label="Nieuwe berichten">12</span>
<span class="message-counter" aria-label="Nieuwe berichten">500</span>
<span class="message-counter" aria-label="Nieuwe berichten">1583</span>
<span class="message-counter" aria-label="Nieuwe berichten">12.830</span>
Terug naar het hoofdmenu