Ga naar hoofdinhoud

Componenten

Number Badge

Community

Klein label dat de aandacht trekt informeert over een aantal.

Anatomie

Definition of Done

Implementaties

Community Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Component gebruiken?

Acceptatiecriteria

Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.

Als je implementatie voldoet aan de acceptatiecriteria voor dit component, kun je er vanuit gaan dat je gebruik van dit component voldoet aan WCAG, niveau A en AA, en voor twee succescriteria aan niveau AAA (2.4.13 Focusweergave en 2.5.5 Grootte van het aanwijsgebied uitgebreid).

Toegankelijkheid algemeen

Gebruik geen afbeeldingen van tekst voor de Number Badge

WCAG
1.4.5 Afbeeldingen van tekst

Het label bestaat uit gewone tekst, niet uit een afbeelding van tekst. Tenzij het om een logo gaat, zoals een DigiD-logo.

NL Design System richtlijnen:

Als een tekst en/of het aria-label in de Number Badge in een andere taal is dan de taal van de pagina, dan heeft de Number Badge een lang-attribuut met de juiste taalcode

WCAG
3.1.2 Taal van onderdelen

Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

Toegankelijkheid visueel ontwerp

De tekst van de Number Badge heeft voldoende contrast tegen de achtergrond

WCAG
1.4.3 Contrast (minimum)

De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:

  • 4,5:1 contrast voor normale tekst.
  • 3:1 contrast voor grotere letters (vanaf 24 pixels).
  • 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

NL Design System richtlijnen:

Toegankelijkheid zoom en herschalen

Als je de tekst van de Number Badge vergroot tot 200% blijft de tekst in zijn geheel zichtbaar

WCAG
1.4.4 Herschalen van tekst

Als je de tekst vergroot tot 200% (via browserzoom en via de browserinstellingen voor tekstgrootte) blijft de tekst in zijn geheel zichtbaar.

Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

NL Design System richtlijnen:

Als je de tekstafstand van de Number Badge vergroot blijft de tekst in zijn geheel zichtbaar

WCAG
1.4.12 Tekstafstand

Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden.

Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

Je moet de afstand kunnen vergroten naar deze waardes:

  • Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
  • Afstand tussen alinea's naar ten minste 2 keer de lettergrootte;
  • Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
  • Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

Dit is te testen met een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:

<style>
body * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
body p {
    margin-bottom: 2em !important;
}
</style>

NL Design System richtlijnen:

Toegankelijkheid screenreader

Geef de informatie uit de Number Badge ook door aan screenreaders

WCAG
1.3.1 Info en relaties

Visueel heeft de Number Badge een betekenis die duidelijk is. Deze betekenis moet ook duidelijk zijn voor screenreadergebruikers. Het volstaat daarom meestal niet als de Number Badge alleen een cijfer toevoegt aan bijvoorbeeld een tekst 'Inbox'. De visuele layout maakt namelijk duidelijk dat het om nieuwe berichten gaat.

Geeft dan extra tekstuele context, bijvoorbeeld met een visueel verborgen tekst:

<a href="/inbox">
  Inbox
  <data class="utrecht-number-badge" value="4">4</data>
  <span class="screenreader-only">nieuwe berichten</span>
</a>

Help component verbeteren

We vinden het belangrijk dat de component Number Badge goed te gebruiken is door iedereen. Help je mee?