Richtlijnen

Het NL Design System geeft richtlijnen voor het ontwikkelen van digitale diensten. Hierbij zijn we uitgegaan van toegankelijkheid, gebruikersvriendelijkheid en consistentie, ondersteund door gebruikersonderzoek.

Onderbouwing

Toegankelijkheid

De richtlijnen zijn gebaseerd op de Web Content Accessibility Guidelines, versie 2.2 niveau AA (WCAG 2.2 AA).

Bij enkele richtlijnen is niveau AAA aangehouden, om een betere gebruikerservaring te garanderen. Bijvoorbeeld voor de minimale grootte van het aanklikbare gedeelte van links en formulierelementen.

Gebruikersvriendelijkheid

Om de gebruikersvriendelijkheid te garanderen zijn er ook richtlijnen toegevoegd naar aanleiding van gebruikersonderzoek. Bijvoorbeeld door een formulierlabel altijd zichtbaar boven het invoerveld te plaatsen.

Beschikbare richtlijnen

Stijl

Onze richtlijnen voor een toegankelijke huisstijl en visueel ontwerp.

• Typografie
• Kleuren
• Ruimte
• Iconen

Formulieren

Onze richtlijnen voor inclusieve formulieren.

• Introductie formulieren
• 8 pagina's voor Buttons
• 5 pagina's voor Bevestigingspagina
• 7 pagina's voor Descriptions
• 8 pagina's voor Foutmeldingen
• 7 pagina's voor Labels
• 4 pagina's voor Links
• 6 pagina's voor Meerdere stappen
• 5 pagina's voor Placeholders
• 3 pagina's voor Toetsenbord
• 6 pagina's voor Uit te vragen informatie
• 4 pagina's voor Status
• 9 pagina's voor Visueel ontwerp
• 9 pagina's voor Voorkom fouten
• 3 pagina's voor Wanneer welk element?

WCAG

Hier proberen WCAG begrijpelijk uit te leggen en daardoor makkelijker toepasbaar te maken. Daarnaast staat beschreven hoe je webpagina's voor de verschillende succescriteria kunt testen.

• Introductie WCAG-pagina's
• 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.3.1 Drie flitsen of beneden drempelwaarde
• 2.3.2 Drie flitsen
• 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.10 Paragraafkoppen
• 2.4.11 Focus niet bedekt (minimum)
• 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.7 Sleepbewegingen
• 2.5.8 Grootte van het aanwijsgebied (minimum)
• 3.1.1 Taal van de pagina
• 3.1.2 Taal van onderdelen
• 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

1.1.0

Aanvullingen of opmerkingen?

Deze richtlijnen worden beheerd door het NL Design System, samen met de community, en zijn op dit moment nog in ontwikkeling. We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je aanvullingen of opmerkingen? Discusieer mee of open een nieuw issue op GitHub.