Data Badge

Candidate

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

Figma

Storybook

npm

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Als er in de Data Badge een informatief icoon staat, is er een goed tekstalternatief.
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.
codevoorbeeld
```
<span><img src="klok.svg" alt="tijd" />12.45</span>
```
NL Design System richtlijnen:
developercontentmakerWCAG 1.1.1Niveau A
Gebruik zoveel mogelijk semantische HTML voor de Data Badge.

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 gebruikers van screenreaders. De Data Badge geeft informatie die onmiddelijk duidelijk is voor ziende gebruikers. Dit voordeel hebben screenreadergebruikers niet.

developerWCAG 1.3.1Niveau A
Gebruik niet alleen kleur om de betekenis van de Data Badge duidelijk te maken.
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
- Gebruik van kleur in tekst
designerWCAG 1.4.1Niveau A
De tekst van de Data Badge heeft voldoende contrast tegen de achtergrond.
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:
designerWCAG 1.4.3Niveau AA
Gebruik geen afbeeldingen van tekst voor de Data Badge.
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:
- Afbeeldingen als buttons
- Tekst in een afbeelding
designercontentmakerWCAG 1.4.5Niveau AA
De Data Badge is niet bereikbaar en bedienbaar met het toetsenbord.
Componenten en elementen die niet interactief zijn, zijn niet bereikbaar en bedienbaar met het toetsenbord.

Een uitzondering geldt voor situaties waarbij een interactief element zoals een Skip Link of een Link in een Side Navigation, de bezoeker direct naar de component of het element stuurt.

NL Design System richtlijnen:
- Toetsenbordtoegankelijkheid
developerWCAG 2.1.1Niveau A
De Data Badge komt niet voor in de normale focusvolgorde van de pagina.
Componenten en elementen die niet interactief zijn, komen niet voor in de normale toetsenbord-focusvolgorde van de pagina.

Een uitzondering geldt voor situaties waarbij een interactief component een Skip Link of een Link in een Side Navigation, de bezoeker direct naar de component of het element stuurt.

NL Design System richtlijnen:
- Toetsenbordtoegankelijkheid
developerWCAG 2.4.3Niveau A
Als een tekst in de Data Badge in een andere taal is dan de taal van de pagina, dan heeft de Data Badge een lang-attribuut met de juiste taalcode.
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.

NL Design System richtlijnen:
- De juiste taal instellen
contentmakerdeveloperWCAG 3.1.2Niveau AA

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Als je de tekst van de Data Badge vergroot tot 200% blijft de tekst in zijn geheel zichtbaar.
Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.

Zorg ervoor dat de component meegroeit met de tekst. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

NL Design System richtlijnen:
- Let op voorkeursinstellingen voor typografie
- Zorg ervoor dat letters groot genoeg zijn
developerWCAG 1.4.4Niveau AA
Als je de tekstafstand van de Data Badge vergroot blijft de tekst in zijn geheel zichtbaar.
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. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

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

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

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 extensie zoals Stylus of User CSS, een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:
codevoorbeeld
```
<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:
developerWCAG 1.4.12Niveau AA
De Data Badge is standaard niet bereikbaar en bedienbaar met het toetsenbord.
Niet-interactieve componenten en elementen zijn standaard niet bereikbaar en bedienbaar met het toetsenbord.

NL Design System richtlijnen:
- Toetsenbordtoegankelijkheid
developerWCAG 2.1.1Niveau A
De Data Badge komt standaard niet voor in de focusvolgorde van de pagina.
Niet-interactieve componenten en elementen komen standaard niet voor in de toetsenbord-focusvolgorde van de pagina.

NL Design System richtlijnen:
- Toetsenbordtoegankelijkheid
developerWCAG 2.4.3Niveau A

CSS

De CSS van deze component is gepubliceerd in een npm package:

@nl-design-system-candidate/data-badge-css

Gebruik de nl-data-badge class name op een span element:

<span class="nl-data-badge">42</span>

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/data-badge-css

Als je een CDN gebruikt, dan kun je de CSS zo importeren:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/data-badge-css@1/dist/data-badge.css"
/>

Gebruik je geen CDN, dan kun je de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/data-badge-css/dist/data-badge.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@nl-design-system-candidate/data-badge-css/data-badge.css";

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/data-badge-react

Je kunt de npm package zo installeren:

npm install --save-dev @nl-design-system-candidate/data-badge-react

Je kunt de React component zo gebruiken:

import { DataBadge } from "@nl-design-system-candidate/data-badge-react";


export const MyPage = () => {
  return (
    <html>
      <body>
        <DataBadge>42</DataBadge>
      </body>
    </html>
  );
};

Design tokens

name	type
`nl.data-badge.background-color`	color
`nl.data-badge.border-color`	color
`nl.data-badge.border-radius`	dimension
`nl.data-badge.border-width`	dimension
`nl.data-badge.color`	color
`nl.data-badge.font-family`	fontFamilies
`nl.data-badge.font-size`	fontSizes
`nl.data-badge.font-weight`	fontWeights
`nl.data-badge.line-height`	lineHeights
`nl.data-badge.min-block-size`	dimension
`nl.data-badge.min-inline-size`	dimension
`nl.data-badge.padding-block`	dimension
`nl.data-badge.padding-inline`	dimension

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.

Welk bord
Afgevinkt.

GitHub (CSS)
Afgevinkt.

Storybook (CSS)
Afgevinkt.

Implementatie voldoet
Afgevinkt.

Minimale design tokens
Afgevinkt.

Prefix
Afgevinkt.

Naamgeving design tokens
Afgevinkt.

Licentie component
Afgevinkt.

Licentie documentatie
Afgevinkt.

Storybook thema's
Afgevinkt.

Visuele regressietest
Afgevinkt.

Figma URL
Afgevinkt.

nldesignsystem.nl
Afgevinkt.

Component assessment
Afgevinkt.

Promotie

Community projectbord op GitHub

Afgevinkt.

🔍 Huisstijl input
Afgevinkt.

🔍 Productie input
Afgevinkt.

🔍 WCAG input
Afgevinkt.

📝 Issues bekend
Afgevinkt.

📝 Varianten bepaald
Afgevinkt.

📝 Acceptatiecriteria a11y
Afgevinkt.

📝 Keywords en Aliassen bepaald
Afgevinkt.

📝 Anatomie bepaald
Afgevinkt.

📝 HTML bepaald
Afgevinkt.

📝 API bepaald
Afgevinkt.

📝 Design tokens bepaald
Afgevinkt.

📝 Stories en specs vastgelegd
Afgevinkt.

📝 Testcases voor gebruik
Afgevinkt.

🛠️ React component
Afgevinkt.

🛠️ CSS component
Afgevinkt.

🛠️ Figma component
Afgevinkt.

🛠️ Voorbeeld thema
Afgevinkt.

🛠️ Documentatie
Afgevinkt.

🧪 Design Tokens getest
Afgevinkt.

🧪 A11y getest
Afgevinkt.

🧪 Test coverage getest
Afgevinkt.

🧪 Testcases getest
Afgevinkt.

🧪 Documentatie getest
Afgevinkt.

🚀 NPM
Afgevinkt.

🚀 Figma - Start Bibliotheek
Afgevinkt.

🚀 Figma - Voorbeeld Bibliotheek
Afgevinkt.

🚀 Themes repository
Afgevinkt.

🚀 nldesignsystem.nl

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

Help om deze component te 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 voortgang 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

Figma

Storybook

npm

Checklist voor toegankelijkheid

Acceptatiecriteria bij gebruik

Filter acceptatiecriteria voor:

Acceptatiecriteria van de component

Filter acceptatiecriteria voor:

CSS

React

Design tokens

Definition of Done

Help Wanted - 11 van 11

Naam

Beschrijving

Afbeelding

Discussion URL

Backlog

Bruikbaar

Link

Varianten

Onderzoek

Kernteam

nldesignsystem.nl

Community - 15 van 15

Welk bord

GitHub (CSS)

Storybook (CSS)

Implementatie voldoet

Minimale design tokens

Prefix

Naamgeving design tokens

Licentie component

Licentie documentatie

Storybook thema's

Visuele regressietest

Figma URL

nldesignsystem.nl

Component assessment

Promotie

Candidate - 15 van 15

🔍 Huisstijl input

🔍 Productie input

🔍 WCAG input

📝 Issues bekend

📝 Varianten bepaald

📝 Acceptatiecriteria a11y

📝 Keywords en Aliassen bepaald

📝 Anatomie bepaald

📝 HTML bepaald

📝 API bepaald

📝 Design tokens bepaald

📝 Stories en specs vastgelegd

📝 Testcases voor gebruik

🛠️ React component

🛠️ CSS component

🛠️ Figma component

🛠️ Voorbeeld thema

🛠️ Documentatie

🧪 Design Tokens getest

🧪 A11y getest

🧪 Test coverage getest

🧪 Testcases getest

🧪 Documentatie getest

🚀 NPM

🚀 Figma - Start Bibliotheek

🚀 Figma - Voorbeeld Bibliotheek

🚀 Themes repository

🚀 nldesignsystem.nl

Hall of Fame - 0 van 20

Do and don't voorbeelden

HTML/CSS

Gebruikersonderzoek

Webcomponent

React

API unit tests

A11y audit

NPM

Semver