NL Design System gerenderd met Astro
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 Navigation
- Form Summary
- 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 Footer
- Page Header
- Page Number Navigation
- Paragraph
- Password Input
- Progress Bar
- Progress Circle
- Progress List
- Radio Button
- Radio Group
- Range
- Rich Text Content
- Select
- Select Combobox
- Separator
- Side Navigation
- Skip Link
- Spinner
- Status Badge
- Strong
- Subscript
- Superscript
- Switch
- Table
- Tabs
- Task List
- Task Navigation
- Text Area
- Text Input
- Toggletip
- Unordered List
- Video
- YouTube Video
- Componenten Overzicht
- 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 Navigation
- Form Summary
- 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 Footer
- Page Header
- Page Number Navigation
- Paragraph
- Password Input
- Progress Bar
- Progress Circle
- Progress List
- Radio Button
- Radio Group
- Range
- Rich Text Content
- Select
- Select Combobox
- Separator
- Side Navigation
- Skip Link
- Spinner
- Status Badge
- Strong
- Subscript
- Superscript
- Switch
- Table
- Tabs
- Task List
- Task Navigation
- Text Area
- Text Input
- Toggletip
- Unordered List
- Video
- YouTube Video
- Componenten Overzicht
baseline
footer
community
- Aanmelden als belangenorganisatie
- Bedankt voor je aanmelding
- Community Sprints
- MijnServices Community
- Meld je aan voor de MijnServices Community
- Bedankt voor je aanmelding
- Rijkshuisstijl Community
- Meld je aan voor de Rijkshuisstijl Community
- Bedankt voor je aanmelding
- Bedankt voor je aanmelding
- Bedankt voor je aanmelding
- Bedankt voor je aanmelding
- Estafettemodeldag
- Introduction into European Design Systems 2025
- Thanks for signing up!
- Bedankt voor je aanmelding
- Communitybijeenkomst 18 oktober 2024
- Design Open Dag
- Design Open Hour
- Aanmelden
- Bedankt voor je aanmelding
- Design Systems Week
- Design Systems Week 2022
- Videos
- Video's van Design Systems Week 2023
- Videos
- Video's van Design Systems Week 2024
- Videos
- Video's van Design Systems Week 2025
- Tijdschema
- Aanmelden voor Design Systems Week
- Bedankt voor je aanmelding
- Design Systems Week
- Propose talk for Design Systems Week
- Thanks for proposing a session
- Sign up for Design Systems Week
- Thanks for signing up!
- Sprekers gezocht voor Design Systems Week
- Sessie voorstellen
- Developer Open Hour
- Aanmelden voor de Developer Open Hour
- Bedankt voor je aanmelding
- Heartbeat van NL Design System
- Aanmelden voor de Heartbeat
- Bedankt voor je aanmelding
- Video's van de Heartbeat
- Zelf iets vertellen
- MijnServices Check-in
- Rijkshuisstijl Community Open Hour
- Expertteam Digitale Toegankelijkheid
- Slack
- Design systems bij de overheid
- Global design systems for governments
- Sluit je aan bij onze community
- Wie doet mee
handboek
- Figma-bestanden overzicht
- GitHub
- Design tokens versiebeheer
- Figma changelog
- Figma hygiëne
- Figma migratie-stappenplan
- Figma stappenplan
- Figma structuur
- Introductie
- Werken met de Figma changelog
- Werken met NL Design System
- Zelf componenten maken
- Zelf componenten uitbreiden
- Zelf een thema maken
- API conventie
- Migreer van een CDN naar pnpm
- CDN gebruiken
- Nieuwe versies uitbrengen met Changesets
- Namen van states
- CSS conventie
- Deprecation
- Design Token conventie
- GitHub Actions
- Introductie
- Werken met Node.js
- Werken met pnpm
- Prototypes zonder front-end framework
- Semantic Versioning
- Design tokens vastleggen
- Overzicht
- 3. Ontwikkelfase
- 5. Publicatiefase
- 1. Selectiefase
- 4. Testfase
- 2. Voorbereidings
- Community stappenplan
- Community stappenplan voor het kernteam
- Community stappenplan voor organisaties
- Definition of Done voor componenten
- Overzicht
- 1. Feedbackfase
- 4. Ontwikkelfase
- 6. Publicatiefase
- 2. Selectiefase
- 5. Testfase
- 3. Voorbereidingsfase
- Help Wanted stappenplan
- Design tokens
- Thema's
- Start-thema
- Voorbeeld-thema
- Linting en code formatting
- Security audit voor npm
- Vercel
- Componenten vinden
- Aan de slag met NL Design System
- Prototypes met NL Design System
- Conventies
- Aanpak voor versionering
- Design tokens
- Infrastructuur
- Estafettemodel
- Introductie
- Voor leveranciers
- Voor managers
- Naamgeving
- Meedoen als organisatie
- Tips voor NL Design System in aanbestedingen
project
richtlijnen
- Introductie
- Introductie richtlijnen voor content
- Introductie richtlijnen voor afbeeldingen
- Algemene richtlijnen
- Waar moet een alternatieve tekst staan?
- Decoratieve afbeeldingen
- Functionele afbeeldingen
- Grafieken
- Informatieve afbeeldingen
- Tekst in een afbeelding
- Citaten
- Kantoorbestanden
- Introductie richtlijnen voor tekstopmaak
- Kleurgebruik in tekst
- Koppen
- Toegankelijke linkteksten
- Opsommingen
- Taal instellen
- Tabellen
- Tekst benadrukken
- Introductie richtlijnen voor video
- Audiodescriptie
- Beschrijving voor video
- Flitsen in video
- Gebarentaal
- Ondertiteling
- Transcript
- Introductie richtlijnen voor formulieren
- Bevestigingspagina van een formulier
- Zorg dat de gebruiker contact op kan nemen bij vragen · Bevestigingspagina van een formulier · Richtlijnen
- Vermeld dat het formulier succesvol is verzonden
- Maak de succesmelding toegankelijk voor alle gebruikers
- Vertel wat de vervolgacties zijn
- Buttons in een formulier
- Afbeeldingen als buttons
- Disabled submitbuttons
- Duidelijk buttontekst die beschrijft wat de button doet
- Verstuur een formulier niet automatisch na het wijzigen of invullen van een formulierveld
- Plaatsing van een button binnen een formulier
- De toegankelijke naam van een button
- Toetsenbordbediening van een button
- Descriptions in een formulier
- Houd het aanklikbare gedeelte groot genoeg
- Gebruik alleen tekst in descriptions
- Koppel een description aan het formulierveld
- Houd de description kort en to-the-point
- Meerdere descriptions koppelen
- Plaats descriptions tussen label en formulierveld
- Plaats descriptions bij een fieldset tussen legend en eerste item
- Fieldsets in een formulier
- Descriptions in een fieldset
- Legends
- Foutmeldingen in een formulier
- Schrijf een foutmelding uit in tekst
- Controleer op het juiste moment op fouten
- Schrijf een duidelijke foutmelding
- Gebruik geen HTML-formuliervalidatie
- Zet de foutmeldingen bij de betreffende formuliervelden
- Zet een samenvatting van de foutmeldingen boven het formulier
- Geef feedback aan screenreadergebruikers
- Labels in een formulier
- Zet alleen tekst in het label
- Zorg ervoor dat het label altijd zichtbaar is
- Gebruik duidelijke labelteksten
- Zet het label boven het formulierveld
- Geef een formulierveld een toegankelijke naam met een label
- De zichtbare naam moet overeenkomen met de toegankelijke naam
- Links in een formulier
- Zet geen link in een label
- Geef aan als een link in een nieuwe tab opent
- Plaats de link boven het gerelateerde formulierveld
- Meerdere stappen in een formulier
- Zorg voor een consistente navigatie en benaming van links en buttons
- Plaats de informatie over waar de gebruiker is in de stappen boven het formulier
- Bied als laatste stap een opsomming aan van alle ingevoerde gegevens
- Geef duidelijk aan wanneer het formulier verzonden gaat worden
- Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt
- Placeholders in een formulier
- Zorg voor een goed kleurcontrast van de placeholdertekst
- Een placeholder is geen vervanger van een label
- Voorkom verwarring bij de gebruiker
- Placeholders en de zoekfunctie
- Status in een formulier
- Geef gebruikers voldoende tijd
- Informeer gebruikers van screenreaders over het statusbericht
- Informeer ingezoomde gebruikers
- Toetsenbordnavigatie in een formulier
- Gebruik geen positieve tabindex | Toetsenbordnavigatie in een formulier | Richtlijnen
- Zorg dat het formulier werkt met een toetsenbord | Toetsenbordnavigatie in een formulier | Richtlijnen
- Visueel ontwerp van een formulier
- Maak toetsenbordfocus goed zichtbaar | Visueel ontwerp van een formulier | Richtlijnen
- Geef fouten weer met meer dan alleen kleur
- Gebruik geen afbeelding voor buttons maar stijl tekst met CSS | Visueel ontwerp van een formulier | Richtlijnen
- Maak aanklikbare formuliervelden groot genoeg
- Geef duidelijk aan waar een invoerveld is | Visueel ontwerp van een formulier | Richtlijnen
- Zorg voor een logische volgorde van de informatie
- Geef placeholders voldoende kleurcontrast | Visueel ontwerp van een formulier | Richtlijnen
- Geef tekst voldoende kleurcontrast
- Voorkom fouten in een formulier
- Autocomplete in een formulier
- Vul bekende informatie in waar mogelijk
- Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken
- Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken
- Geef geldige waardes aan voor een invoerveld
- Keur niet te snel af
- Vermeld duidelijk of een veld wel of niet verplicht is
- Sta knippen en plakken van een wachtwoord toe
- Uit te vragen informatie in een formulier
- Check of informatie ècht nodig is
- Geef invoervelden geen minimum/maximum tekstlengte
- Leg uit waarom informatie nodig is
- Biedt verschillende manieren om contact op te nemen
- Vraag niet meerdere keren dezelfde informatie uit
- Wanneer gebruik je welk formulierelement?
- Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief
- Kies voor het meest gebruiksvriendelijke formulierelement
- Introductie richtlijnen voor stijl
- Introductie richtlijnen voor iconen
- Maak functionele iconen simpel van vorm
- Gebruik SVG voor iconen en geen font
- Stem de grootte van je iconen af op je lettergrootte
- Zorg ook bij iconen voor voldoende contrast
- Laat de lijndikte meeschalen
- Positioneer iconen binnen een vierkant grid
- Respecteer conventies
- Toptaak iconen kunnen gedetailleerd zijn
- Introductie richtlijnen voor kleuren
- Zorg voor voldoende kleurcontrast voor niet-tekstuele content
- Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond
- Gebruik kleur met een doel
- Vertrouw niet alleen op kleur
- Let op voorkeursinstellingen voor kleur
- Let op verschillen in waarneming van kleur
- Introductie richtlijnen voor ruimte
- Werk en denk vanuit het box model
- Gebruik ruimte om hiërarchie te creëren tussen elementen
- Reserveer ruimte tussen interactieve elementen
- Gebruik ruimte om relaties te creëren tussen elementen
- Stem het gebruik van ruimte af op de functie en inhoud
- Maak gebruik van de spacing concepten
- Maak gebruik van een spacing scale
- Introductie richtlijnen voor typografie
- Zorg ervoor dat letters groot genoeg zijn
- Kies een goed lettertype
- Zorg voor een comfortabele regelafstand
- Zorg voor een comfortabele regellengte
- Uitlijning
- Let op voorkeursinstellingen voor typografie
voorbeelden
woordenlijst
wcag
- Introductie WCAG pagina's
- WCAG-succescriterium 1.1.1 Niet-tekstuele content
- WCAG-succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
- WCAG-succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
- WCAG-succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
- WCAG-succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)
- WCAG-succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)
- WCAG-succescriterium 1.2.6 Gebarentaal (vooraf opgenomen)
- WCAG-succescriterium 1.2.7 Verlengde audiodescriptie (vooraf opgenomen)
- WCAG-succescriterium 1.2.8 Media-alternatief (vooraf opgenomen)
- WCAG-succescriterium 1.2.9 Louter-geluid (live)
- WCAG-succescriterium 1.3.1 Info en relaties
- WCAG-succescriterium 1.3.2 Betekenisvolle volgorde
- WCAG-succescriterium 1.3.3 Zintuiglijke eigenschappen
- WCAG-succescriterium 1.3.4 Weergavestand
- WCAG-succescriterium 1.3.5 Identificeer het doel van de input
- WCAG-succescriterium 1.3.6 Identificeer het doel
- WCAG-succescriterium 1.4.1 Gebruik van kleur
- WCAG-succescriterium 1.4.10 Reflow
- WCAG-succescriterium 1.4.11 Contrast van niet-tekstuele content
- WCAG-succescriterium 1.4.12 Tekstafstand
- WCAG-succescriterium 1.4.13 Content bij hover of focus
- WCAG-succescriterium 1.4.2 Geluidsbediening
- WCAG-succescriterium 1.4.3 Contrast (minimum)
- WCAG-succescriterium 1.4.4 Herschalen van tekst
- WCAG-succescriterium 1.4.5 Afbeeldingen van tekst
- WCAG-succescriterium 1.4.6 Contrast (versterkt)
- WCAG-succescriterium 1.4.7 Weinig of geen achtergrondgeluid
- WCAG-succescriterium 1.4.8 Visuele presentatie
- WCAG-succescriterium 1.4.9 Afbeeldingen van tekst (geen uitzondering)
- WCAG-succescriterium 2.1.1 Toetsenbord
- WCAG-succescriterium 2.1.2 Geen toetsenbordval
- WCAG-succescriterium 2.1.3 Toetsenbord (geen uitzondering)
- WCAG-succescriterium 2.1.4 Enkel teken sneltoetsen
- WCAG-succescriterium 2.2.1 Timing aanpasbaar
- WCAG-succescriterium 2.2.2 Pauzeren, stoppen, verbergen
- WCAG-succescriterium 2.2.3 Geen timing
- WCAG-succescriterium 2.2.4 Onderbrekingen
- WCAG-succescriterium 2.2.5 Herauthentisering
- WCAG-succescriterium 2.2.6 Time-outs
- WCAG-succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde
- WCAG-succescriterium 2.3.2 Drie flitsen
- WCAG-succescriterium 2.3.3 Animatie uit interacties
- WCAG-succescriterium 2.4.1 Blokken omzeilen
- WCAG-succescriterium 2.4.10 Paragraafkoppen
- WCAG-succescriterium 2.4.11 Focus niet bedekt (minimum)
- WCAG-succescriterium 2.4.12 Focus niet bedekt (uitgebreid)
- WCAG-succescriterium 2.4.13 Focusweergave
- WCAG-succescriterium 2.4.2 Paginatitel
- WCAG-succescriterium 2.4.3 Focus volgorde
- WCAG-succescriterium 2.4.4 Linkdoel (in context)
- WCAG-succescriterium 2.4.5 Meerdere manieren
- WCAG-succescriterium 2.4.6 Koppen en labels
- WCAG-succescriterium 2.4.7 Focus zichtbaar
- WCAG-succescriterium 2.4.8 Locatie
- WCAG-succescriterium 2.4.9 Linkdoel (alleen link)
- WCAG-succescriterium 2.5.1 Aanwijzergebaren
- WCAG-succescriterium 2.5.2 Aanwijzerannulering
- WCAG-succescriterium 2.5.3 Label in Naam
- WCAG-succescriterium 2.5.4 Bewegingsactivering
- WCAG-succescriterium 2.5.5 Grootte van het aanwijsgebied (uitgebreid)
- WCAG-succescriterium 2.5.6 Input gelijktijdige invoermechanismen
- WCAG-succescriterium 2.5.7 Sleepbewegingen
- WCAG-succescriterium 2.5.8 Grootte van het aanwijsgebied (minimum)
- WCAG-succescriterium 3.1.1 Taal van de pagina
- WCAG-succescriterium 3.1.2 Taal van onderdelen
- WCAG-succescriterium 3.1.3 Ongebruikelijke woorden
- WCAG-succescriterium 3.1.4 Afkortingen
- WCAG-succescriterium 3.1.5 Leesniveau
- WCAG-succescriterium 3.1.6 Uitspraak
- WCAG-succescriterium 3.2.1 Bij focus
- WCAG-succescriterium 3.2.2 Bij input
- WCAG-succescriterium 3.2.3 Consistente navigatie
- WCAG-succescriterium 3.2.4 Consistente identificatie
- WCAG-succescriterium 3.2.5 Verandering op verzoek
- WCAG-succescriterium 3.2.6 Consistente hulp
- WCAG-succescriterium 3.3.1 Foutidentificatie
- WCAG-succescriterium 3.3.2 Labels of instructies
- WCAG-succescriterium 3.3.3 Foutsuggestie
- WCAG-succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
- WCAG-succescriterium 3.3.5 Hulp
- WCAG-succescriterium 3.3.6 Foutpreventie (alle)
- WCAG-succescriterium 3.3.7 Overbodige invoer
- WCAG-succescriterium 3.3.8 Toegankelijke authenticatie (minimum)
- WCAG-succescriterium 3.3.9 Toegankelijke authenticatie (uitgebreid)
- WCAG-succescriterium 4.1.1 Parsen
- WCAG-succescriterium 4.1.2 Naam, rol, waarde
- WCAG-succescriterium 4.1.3 Statusberichten