Data Badge

Community

Label met extra informatie, zoals een categorie of een eigenschap.

Anatomie

Definition of Done

Afgevinkt.

Naam
Naam bepaald op basis van NL Design System naamgeving.
Afgevinkt.

Beschrijving
Doel van component is in één zin beschreven.
Afgevinkt.

Afbeelding
Afbeelding gemaakt om de component visueel duidelijk te maken.
Afgevinkt.

Discussion URL
Afgevinkt.

Backlog
Staat in de publieke backlog van NL Design System.
Afgevinkt.

Bruikbaar
Bewijs verzameld dat de component algemeen bruikbaar is.
Afgevinkt.

Link
Link beschikbaar naar component in Figma of Storybook met alle belangrijke states en varianten.
Afgevinkt.

Varianten
Naam en doel van benodigde varianten beschreven.
Afgevinkt.

Onderzoek
Nut van component is onderbouwd door gebruikersonderzoek.
Afgevinkt.

Kernteam
Kernteam verwacht dat dit component tot Hall of Fame kan komen.
Afgevinkt.

nldesignsystem.nl
Vindbaar op de NL Design System website.

Help Wanted projectbord op GitHub

Afgevinkt.

≥2 Thema's
Afgevinkt.

Versimpeld of gesplitst
Afgevinkt.

API gemeenschappelijk
Niet afgevinkt.

API conventie
Niet afgevinkt.

Design tokens conventie
Niet afgevinkt.

Common tokens
Afgevinkt.

Design tokens nuttig
Afgevinkt.

Storybook NLDS
Niet afgevinkt.

Figma in lijn
Afgevinkt.

Figma NLDS
Niet afgevinkt.

Coverage features
Niet afgevinkt.

Semantiek goedgekeurd
Niet afgevinkt.

A11y getest
Niet afgevinkt.

i18n getest
Niet afgevinkt.

Content flexibel
Afgevinkt.

Linting en formatting
Niet afgevinkt.

NPM (candidate)
Niet afgevinkt.

Changelog
Afgevinkt.

Documentatie aliassen
Afgevinkt.

Documentatie anatomie
Niet afgevinkt.

Documentatie op website
Afgevinkt.

Documentatie a11y
Niet afgevinkt.

Documentatie onderzoek
Niet afgevinkt.

Documentatie getest

Candidate projectbord op GitHub

Niet afgevinkt.

Do and don't voorbeelden
Niet afgevinkt.

HTML/CSS
Niet afgevinkt.

Gebruikersonderzoek
Niet afgevinkt.

Webcomponent
Niet afgevinkt.

React
Niet afgevinkt.

API unit tests
Niet afgevinkt.

A11y audit
Niet afgevinkt.

NPM
Niet afgevinkt.

Semver
Niet afgevinkt.

Figma geversioneerd
Niet afgevinkt.

Figma changelog
Niet afgevinkt.

Code changelog
Niet afgevinkt.

Richtlijnen design tokens
Niet afgevinkt.

Richtlijnen redacteuren
Niet afgevinkt.

Beveiliging
Niet afgevinkt.

Privacy
Niet afgevinkt.

Getest met designers
Niet afgevinkt.

Getest met developers
Niet afgevinkt.

Getest met redacteuren
Niet afgevinkt.

≥2 organisaties geswitcht

Hall of Fame projectbord op GitHub

Implementaties

Community Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Component gebruiken?

Community Amsterdam

10 van 11 stappen gedocumenteerd op het Community Amsterdam 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).

Gebruik niet alleen kleur om de betekenis van de Data Badge duidelijk te maken

WCAG: 1.4.1 Gebruik van kleur

Gebruik niet alleen kleur om de betekenis van de Data Badge duidelijk te maken. Rood staat bijvoorbeeld voor gevaar, groen bijvoorbeeld voor het feit dat iets is gelukt. Veel mensen kunnen kleur niet of niet goed waarnemen. Zorg daarom dat er een tweede manier is om de betekenis te herkennen.

Het gebruik van duidelijke teksten is hierbij een goede oplossing. Bijvoorbeeld een rode Data Badge met de tekst 'fout', en een groene Data Badge met de tekst 'gelukt'.

NL Design System richtlijnen:

Gebruik kleur met een doel

De tekst van de Data 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:

Als je de tekst van de Data 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 Data 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:

Als er in de Data Badge een informatief icoon staat, is er een goed tekstalternatief

WCAG: 1.1.1 Niet-tekstuele content

Als de Data Badge een icoon bevat, of een icoon bevat dat extra informatie geeft naast de tekst, dan heeft dit icoon een goed tekstalternatief, zodat de informatie ook beschikbaar is voor mensen die de de afbeelding niet kunnen zien.

Het beste is om altijd visueel een tekst te tonen naast of onder een icoon. Iconen zijn immers niet altijd voor iedereen duidelijk. Een tekstalternatief voor het icoon is niet nodig als er tekst in beeld is die hetzelfde betekent. Een img kan dan een leeg alt-attribuut krijgen (alt="").

Is het toch gewenst om alleen een icoon of een extra informatief icoon te tonen, hou dan rekening met het volgende.

Een img met een alt-attribuut is een robuuste manier om een alternatieve tekst toe te voegen.

<span><img src="klok.svg" alt="tijd" />12.45</span>

NL Design System richtlijnen:

Gebruik zoveel mogelijk semantische HTML voor de Data Badge

WCAG: 1.3.1 Info en relaties

Gebruik zoveel mogelijk semantische HTML, bijvoorbeeld het time-element als het om een datum of een tijd gaat.

De toevoeging van de Data Badge mag niet verwarrend zijn voor screenreadergebruikers. De Data Badge geeft informatie die onmiddelijk duidelijk is voor ziende gebruikers. Dit voordeel hebben screenreadergebruikers niet.

Help component verbeteren

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

Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
Draag bij aan de voortang van Data Badge door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.

Data Badge

Anatomie

Definition of Done

Help Wanted - 11 van 11

Community - 15 van 15

Candidate - 11 van 24

Hall of Fame - 0 van 20

Implementaties

Community Utrecht

Component gebruiken?

Community Amsterdam

Component gebruiken?

Acceptatiecriteria

Toegankelijkheid algemeen

Toegankelijkheid visueel ontwerp

Toegankelijkheid zoom en herschalen

Toegankelijkheid screenreader

Help component verbeteren