Naar de inhoud
Hoofdmenu
Home
Handboek
Richtlijnen
Componenten
Voorbeelden
Community
Project
Handboek
Introductie
Estafettemodel
Componenten vinden
Definition of Done
Help Wanted
Community
Organisaties
Kernteam
Candidate
1. Selectiefase
2. Voorbereidings
3. Ontwikkelfase
4. Testfase
5. Publicatiefase
Hall of Fame
1. Feedbackfase
2. Selectiefase
3. Voorbereidingsfase
4. Ontwikkelfase
5. Testfase
6. Publicatiefase
Huisstijl vastleggen
Design tokens
Basis-tokens
Thema's
Start-thema
Voorbeeld-thema
Voor designers
Werken met NL Design System
Figma structuur
Figma stappenplan
Figma hygiëne
Werken met de Figma changelog
Figma changelog
Design tokens versiebeheer
Zelf een thema maken
Zelf componenten uitbreiden
Zelf componenten maken
Figma-bestanden overzicht
Voor developers
Aan de slag
Prototypes
Prototypes zonder front-end framework
CDN gebruiken
Migreer van een CDN naar pnpm
Conventies
Design Token conventie
CSS conventie
API conventie
Namen van states
Versionering conventie
Semantic Versioning
Changesets
Deprecation
Design tokens
Design tokens vastleggen
Infrastructuur
GitHub
GitHub Actions
GitHub teams en code owners
Linting en code formatting
Werken met Node.js
Werken met pnpm
Security audit voor npm
Publiceren van npm packages
Vercel
Voor organisaties
Meedoen
Aanbestedingen
Voor leveranciers
Voor managers
Baseline
Baseline mei 2026
Archief
Baseline april 2026
Baseline maart 2026
Baseline februari 2026
Baseline december 2025
Baseline november 2025
Baseline oktober 2025
Baseline september 2025
Baseline augustus 2025
Baseline juli 2025
Baseline juni 2025
Baseline mei 2025
Baseline april 2025
Baseline december 2024
Woordenlijst
Richtlijnen
Stijl
Typografie
Letters groot genoeg
Comfortabele regelafstand
Comfortabele regellengte
Goed lettertype
Let op voorkeursinstellingen voor typografie
Uitlijning
Kleuren
Kleurcontrast voor tekst
Kleurcontrast voor niet-tekstuele content
Gebruik kleur met een doel
Vertrouw niet alleen op kleur
Verschillen in waarneming van kleur
Voorkeursinstellingen voor kleur
Ruimte
Spacing scale
Box model
Spacing concepten
Relaties tussen elementen
Hiërarchie tussen elementen
Ruim of compact
Interactieve elementen
Iconen
Maak functionele iconen simpel van vorm
Toptaak iconen kunnen gedetailleerd zijn
Positioneer iconen binnen een vierkant grid
Stem de grootte van je iconen af op je lettergrootte
Laat de lijndikte meeschalen
Zorg voor voldoende contrast
Respecteer conventies
Gebruik SVG voor iconen en geen font
Content
Afbeeldingen
Algemene richtlijnen
Waar moet een alternatieve tekst staan?
Decoratieve afbeeldingen
Functionele afbeeldingen
Grafieken
Informatieve afbeeldingen
Tekst in een afbeelding
Tekstopmaak
Kleurgebruik in tekst
Tekst benadrukken
Koppen
De juiste taal instellen
Toegankelijke linkteksten
Citaten
Opsommingen
Tabellen
Video
Audiodescriptie
Video beschrijving
Flitsen
Gebarentaal
Ondertiteling
Transcript
Kantoorbestanden
Formulieren
Buttons
Toetsenbordbediening
Verstuur niet automatisch
Plaatsing button
Duidelijke buttontekst
Toegankelijke naam
Afbeelding als button
Disabled submitbuttons
Bevestigingspagina
Toegankelijke succesmelding
Benoem vervolgstappen
Contact opnemen
Duidelijke succesmelding
Descriptions
Koppel description
Inhoud description
Plaatsing description
Meerdere descriptions
Description bij fieldsets
Grootte aanklikbaar gedeelte
Lengte description
Foutmeldingen
Fouten controleren
Fouten beschrijven
Duidelijke foutmeldingen
Plaatsing foutmelding
HTML-formuliervalidatie
Samenvatting fouten
Screenreaderfeedback
Fieldsets
Legends
Descriptions in een fieldset
Labels
Toegankelijke naam label
Zichtbare naam label
Plaatsing label
Label zichtbaar
Label bevat alleen tekst
Duidelijke tekst label
Links
Plaatsing link
Geen link in label
Link in nieuwe tab
Meerdere stappen
Voortgang stappen tonen
Plaatsing voortgang stappen
Consistente navigatie
Samenvatting in laatste stap
Duidelijk aangeven verzenden
Placeholders
Placeholder is geen label
Placeholder bij zoekfunctie
Placeholder kan verwarren
Placeholder kleurcontrast
Toetsenbord
Toetsenbordnavigatie
Geen positieve tabindex
Uit te vragen informatie
Waarom stel je de vraag
Waarom is informatie nodig
Bied contactmogelijkheden
Stel een vraag één keer
Geen vaste tekstlengte
Status
Informeer screenreaders
Informeer ingezoomde gebruikers
Geef gebruikers voldoende tijd
Visueel ontwerp
Invoerveld goed zichtbaar
Tekst goed zichtbaar
Placeholder goed zichtbaar
Focus goed zichtbaar
Invoerveld goed aanklikbaar
Fouten niet kleurafhankelijk
Geen afbeelding voor buttons
Logische volgorde
Voorkom fouten
Optioneel of verplicht
Wachtwoord plakken
Keur niet te snel af
Geef geldige waardes aan
Autocomplete
Automatisch invullen
Controleren en aanpassen
Vermijd invoerpatronen
Wanneer welk element
Iedereen kan velden invullen
Kies gebruiksvriendelijkheid
WCAG
1.1.1 Niet-tekstuele content
1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
1.2.4 Ondertitels voor doven en slechthorenden (live)
1.2.5 Audiodescriptie (vooraf opgenomen)
1.2.6 Gebarentaal (vooraf opgenomen)
1.2.7 Verlengde audiodescriptie (vooraf opgenomen)
1.2.8 Media-alternatief (vooraf opgenomen)
1.2.9 Louter-geluid (live)
1.3.1 Info en relaties
1.3.2 Betekenisvolle volgorde
1.3.3 Zintuiglijke eigenschappen
1.3.4 Weergavestand
1.3.5 Identificeer het doel van de input
1.3.6 Identificeer het doel
1.4.1 Gebruik van kleur
1.4.2 Geluidsbediening
1.4.3 Contrast (minimum)
1.4.4 Herschalen van tekst
1.4.5 Afbeeldingen van tekst
1.4.6 Contrast (versterkt)
1.4.7 Weinig of geen achtergrondgeluid
1.4.8 Visuele presentatie
1.4.9 Afbeeldingen van tekst (geen uitzondering)
1.4.10 Reflow
1.4.11 Contrast van niet-tekstuele content
1.4.12 Tekstafstand
1.4.13 Content bij hover of focus
2.1.1 Toetsenbord
2.1.2 Geen toetsenbordval
2.1.3 Toetsenbord (geen uitzondering)
2.1.4 Enkel teken sneltoetsen
2.2.1 Timing aanpasbaar
2.2.2 Pauzeren, stoppen, verbergen
2.2.3 Geen timing
2.2.4 Onderbrekingen
2.2.5 Herauthentisering
2.2.6 Time-outs
2.3.1 Drie flitsen of beneden drempelwaarde
2.3.2 Drie flitsen
2.3.3 Animatie uit interacties
2.4.1 Blokken omzeilen
2.4.2 Paginatitel
2.4.3 Focus volgorde
2.4.4 Linkdoel (in context)
2.4.5 Meerdere manieren
2.4.6 Koppen en labels
2.4.7 Focus zichtbaar
2.4.8 Locatie
2.4.9 Linkdoel (alleen link)
2.4.10 Paragraafkoppen
2.4.11 Focus niet bedekt (minimum)
2.4.12 Focus niet bedekt (uitgebreid)
2.4.13 Focusweergave
2.5.1 Aanwijzergebaren
2.5.2 Aanwijzerannulering
2.5.3 Label in Naam
2.5.4 Bewegingsactivering
2.5.5 Grootte van het aanwijsgebied (uitgebreid)
2.5.6 Input gelijktijdige invoermechanismen
2.5.7 Sleepbewegingen
2.5.8 Grootte van het aanwijsgebied (minimum)
3.1.1 Taal van de pagina
3.1.2 Taal van onderdelen
3.1.3 Ongebruikelijke woorden
3.1.4 Afkortingen
3.1.5 Leesniveau
3.1.6 Uitspraak
3.2.1 Bij focus
3.2.2 Bij input
3.2.3 Consistente navigatie
3.2.4 Consistente identificatie
3.2.5 Verandering op verzoek
3.2.6 Consistente hulp
3.3.1 Foutidentificatie
3.3.2 Labels of instructies
3.3.3 Foutsuggestie
3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
3.3.5 Hulp
3.3.6 Foutpreventie (alle)
3.3.7 Overbodige invoer
3.3.8 Toegankelijke authenticatie (minimum)
3.3.9 Toegankelijke authenticatie (uitgebreid)
4.1.1 Parsen
4.1.2 Naam, rol, waarde
4.1.3 Statusberichten
Changelog
Componenten
Accordion
Action Group
Alert
Alert Dialog
Avatar
Blockquote
Breadcrumb Navigation
Button
Calendar
Card as Link
Case Card
Checkbox
Checkbox Group
Code
Code Block
Color Sample
Contact Timeline
Data Badge
Data Summary
Date Input
Date Input Group
Date Picker
Description List
Dialog
Dot Badge
Drawer
Fieldset
Figure
File
File Input
Form Field
Form Field Description
Form Field Error Message
Form Field Label
Form Field Label Suffix
Form Field Status
Form Navigation
Form Summary
Grid
Heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading Group
Icon
Image
Input Group
Language Navigation
Link
Link List
Login Link
Logo
Mark
Modal Dialog
Navigation Bar
Note
Notification Banner
Number Badge
Number Input
Ordered List
Page Body
Page Footer
Page Header
Page Layout
Page Number Navigation
Paragraph
Password Input
Progress Bar
Progress Circle
Progress List
Pull Quote
Radio Button
Radio Group
Range
Rich Text Content
Root
Select
Select Combobox
Separator
Side Navigation
Skip Link
Spinner
Status Badge
Strong
Subscript
Superscript
Switch
Table
Tabs
Task List
Task Navigation
Text Input
Text Area
Toggletip
Unordered List
Video
YouTube Video
Voorbeelden
Introductie patronen en templates
Formulieren
Mijn omgevingen
Gebruikersonderzoek
Community
Sluit je aan
Wie doet mee
Community Sprints
MijnServices Community
Aanmelden
Rijkshuisstijl Community
Aanmelden
Expertteam Digitale Toegankelijkheid
Bijeenkomsten
Heartbeat
Video's
Aanmelden
Zelf iets vertellen
Design Open Hour
Aanmelden
Developer Open Hour
Aanmelden
MijnServices Check-in
Rijkshuisstijl Community Open Hour
Design Open Dag
Estafettemodeldag
Design Systems Week
English
Previous editions
2025
2024
2023
Eerdere edities
2025
2024
2023
2022
Design systems
Global design systems
Belangenorganisaties
Slack
Project
Over NL Design System
Veelgestelde vragen
Kernteam
Op de hoogte blijven
Kwaliteitsaanpak
Agile sprint
Backup
Broncodekwaliteit
Code reviews
Continuous Delivery
Continuous Deployment
Continuous Integration
Definition of Done
Definition of Ready
Internationalisatie en localisatie
Open Source
Product Backlog
Productieomgeving
Release notes
Sprint review
Software supply chain
Testomgeving
Toegankelijkheid
Veilig werken
Veilige werkomgeving
Versiebeheer
Schrijfwijzer
Afbeeldingen
Opbouw van een pagina
Doelen
Doelgroepen
Nederlands
Engels
Beslissingen voor schrijfwijze
Video
Reviews
Aanpak voor WCAG-pagina's
Klachten
Naamgeving voor componenten, attributen en variaties