Sitemap

In totaal heeft de website 521 pagina's

Handboek

92 pagina's

• NL Design System 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 - Introductie
  • Basis-tokens
    • Alle 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
  • Aanbestedingen
  • Meedoen
  • Beheren van een repository
• Baseline
  • Baseline oktober 2026
  • Archief
    • Baseline september 2026
    • Baseline augustus 2026
    • Baseline juli 2026
    • Baseline juni 2026
    • Baseline mei 2026
    • 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

236 pagina's

• 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
  • WCAG 1.1.1: Niet-tekstuele content
  • WCAG 1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
  • WCAG 1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
  • WCAG 1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
  • WCAG 1.2.4: Ondertitels voor doven en slechthorenden (live)
  • WCAG 1.2.5: Audiodescriptie (vooraf opgenomen)
  • WCAG 1.2.6: Gebarentaal (vooraf opgenomen)
  • WCAG 1.2.7: Verlengde audiodescriptie (vooraf opgenomen)
  • WCAG 1.2.8: Media-alternatief (vooraf opgenomen)
  • WCAG 1.2.9: Louter-geluid (live)
  • WCAG 1.3.1: Info en relaties
  • WCAG 1.3.2: Betekenisvolle volgorde
  • WCAG 1.3.3: Zintuiglijke eigenschappen
  • WCAG 1.3.4: Weergavestand
  • WCAG 1.3.5: Identificeer het doel van de input
  • WCAG 1.3.6: Identificeer het doel
  • WCAG 1.4.1: Gebruik van kleur
  • WCAG 1.4.2: Geluidsbediening
  • WCAG 1.4.3: Contrast (minimum)
  • WCAG 1.4.4: Herschalen van tekst
  • WCAG 1.4.5: Afbeeldingen van tekst
  • WCAG 1.4.6: Contrast (versterkt)
  • WCAG 1.4.7: Weinig of geen achtergrondgeluid
  • WCAG 1.4.8: Visuele presentatie
  • WCAG 1.4.9: Afbeeldingen van tekst (geen uitzondering)
  • WCAG 1.4.10: Reflow
  • WCAG 1.4.11: Contrast van niet-tekstuele content
  • WCAG 1.4.12: Tekstafstand
  • WCAG 1.4.13: Content bij hover of focus
  • WCAG 2.1.1: Toetsenbord
  • WCAG 2.1.2: Geen toetsenbordval
  • WCAG 2.1.3: Toetsenbord (geen uitzondering)
  • WCAG 2.1.4: Enkel teken sneltoetsen
  • WCAG 2.2.1: Timing aanpasbaar
  • WCAG 2.2.2: Pauzeren, stoppen, verbergen
  • WCAG 2.2.3: Geen timing
  • WCAG 2.2.4: Onderbrekingen
  • WCAG 2.2.5: Herauthentisering
  • WCAG 2.2.6: Time-outs
  • WCAG 2.3.1: Drie flitsen of beneden drempelwaarde
  • WCAG 2.3.2: Drie flitsen
  • WCAG 2.3.3: Animatie uit interacties
  • WCAG 2.4.1: Blokken omzeilen
  • WCAG 2.4.2: Paginatitel
  • WCAG 2.4.3: Focus volgorde
  • WCAG 2.4.4: Linkdoel (in context)
  • WCAG 2.4.5: Meerdere manieren
  • WCAG 2.4.6: Koppen en labels
  • WCAG 2.4.7: Focus zichtbaar
  • WCAG 2.4.8: Locatie
  • WCAG 2.4.9: Linkdoel (alleen link)
  • WCAG 2.4.10: Paragraafkoppen
  • WCAG 2.4.11: Focus niet bedekt (minimum)
  • WCAG 2.4.12: Focus niet bedekt (uitgebreid)
  • WCAG 2.4.13: Focusweergave
  • WCAG 2.5.1: Aanwijzergebaren
  • WCAG 2.5.2: Aanwijzerannulering
  • WCAG 2.5.3: Label in Naam
  • WCAG 2.5.4: Bewegingsactivering
  • WCAG 2.5.5: Grootte van het aanwijsgebied (uitgebreid)
  • WCAG 2.5.6: Input gelijktijdige invoermechanismen
  • WCAG 2.5.7: Sleepbewegingen
  • WCAG 2.5.8: Grootte van het aanwijsgebied (minimum)
  • WCAG 3.1.1: Taal van de pagina
  • WCAG 3.1.2: Taal van onderdelen
  • WCAG 3.1.3: Ongebruikelijke woorden
  • WCAG 3.1.4: Afkortingen
  • WCAG 3.1.5: Leesniveau
  • WCAG 3.1.6: Uitspraak
  • WCAG 3.2.1: Bij focus
  • WCAG 3.2.2: Bij input
  • WCAG 3.2.3: Consistente navigatie
  • WCAG 3.2.4: Consistente identificatie
  • WCAG 3.2.5: Verandering op verzoek
  • WCAG 3.2.6: Consistente hulp
  • WCAG 3.3.1: Foutidentificatie
  • WCAG 3.3.2: Labels of instructies
  • WCAG 3.3.3: Foutsuggestie
  • WCAG 3.3.4: Foutpreventie (wettelijk, financieel, gegevens)
  • WCAG 3.3.5: Hulp
  • WCAG 3.3.6: Foutpreventie (alle)
  • WCAG 3.3.7: Overbodige invoer
  • WCAG 3.3.8: Toegankelijke authenticatie (minimum)
  • WCAG 3.3.9: Toegankelijke authenticatie (uitgebreid)
  • WCAG 4.1.1: Parsen
  • WCAG 4.1.2: Naam, rol, waarde
  • WCAG 4.1.3: Statusberichten
• Changelog

Componenten

101 pagina's

• 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
• Customizable Text Input
• 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

4 pagina's

• Introductie patronen en templates
  • Formulieren
  • Mijn omgevingen
• Gebruikersonderzoek

Community

40 pagina's

• Sluit je aan
• De NL Design System Community in cijfers
• Community Sprints
• MijnServices Community
  • Aanmelden
• Rijkshuisstijl Community
  • Aanmelden
• Expertteam Digitale Toegankelijkheid
  • Design Tokens valideren
• Bijeenkomsten
  • Heartbeat
    • Video's
    • Aanmelden
    • Zelf iets vertellen
  • Design Open Hour
    • Aanmelden
  • Developer Open Hour
    • Aanmelden
  • MijnServices Check-in
  • Rijkshuisstijl Community Open Hour
  • Product Owner Open Hour
  • Estafettemodeldag
  • Design Open Dag
• Design Systems Week
  • Programma
  • Tijdschema
  • English
    • Program
    • Timetable
    • Previous editions
      • Videos of Design Systems Week 2025
      • Videos of Design Systems Week 2024
      • Videos of Design Systems Week 2023
  • Eerdere edities
    • Video's van Design Systems Week 2025
    • Video's van Design Systems Week 2024
    • Video's van Design Systems Week 2023
    • Design Systems Week 2022
• Design systems
• Global design systems
• Belangenorganisaties
• Slack

Project

39 pagina's

• 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
  • Code
  • Beslissingen voor schrijfwijze
  • Reviews
  • Video
  • Aanpak voor WCAG-pagina's
• Klachten