Introductie richtlijnen NL Design System voor formulieren

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

Deze richtlijnen staan gesorteerd op onderwerp en op alfabet. De aanvullende blogpost Toegankelijke foutmeldingen in formulieren vertelt in een lopend verhaal hoe foutmeldingen in formulieren op te zetten.

Buttons

• Introductie Buttons
• Toetsenbordbediening
• Verstuur niet automatisch
• Plaatsing button
• Duidelijke buttontekst
• Toegankelijke naam button
• Afbeelding als button
• Disabled submitbuttons

Bevestigingspagina

• Introductie bevestigingspagina
• Toegankelijke succesmelding
• Benoem vervolgstappen
• Contact opnemen
• Duidelijke succesmelding

Descriptions

• Introductie descriptions
• Koppel description
• Plaatsing description
• Meerdere descriptions
• Description bij fieldsets
• Grootte aanklikbaar gedeelte
• Lengte description

Foutmeldingen

• Introductie foutmeldingen
• Fouten controleren
• Fouten beschrijven
• Duidelijke foutmeldingen
• Plaatsing foutmelding
• HTML-formuliervalidatie
• Samenvatting fouten
• Screenreaderfeedback

Labels

• Introductie labels
• Toegankelijke naam label
• Zichtbare naam label
• Plaatsing label
• Label zichtbaar
• Label bevat alleen tekst
• Duidelijke tekst label

Links

• Introductie links
• Plaatsing link
• Geen link in label
• Link in nieuwe tab

Meerdere stappen

• Introductie meerdere stappen
• Voortgang stappen tonen
• Plaatsing voortgang stappen
• Consistente navigatie
• Samenvatting in laatste stap
• Duidelijk aangeven verzenden

Placeholders

• Introductie placeholders
• Placeholder is geen label
• Placeholder bij zoekfunctie
• Placeholder kan verwarren
• Placeholder kleurcontrast

Toetsenbord

• Introductie toetsenbordnavigatie
• Toetsenbordnavigatie
• Geen positieve tabindex

Uit te vragen informatie

• Introductie uit te vragen informatie
• Waarom stel je de vraag
• Waarom is informatie nodig
• Bied contactmogelijkheden
• Stel een vraag één keer
• Geen vaste tekstlengte

Status

• Introductie status
• Informeer screenreaders
• Informeer ingezoomde gebruikers
• Geef gebruikers voldoende tijd

Visueel ontwerp

• Introductie 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

• Introductie 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?

• Introductie wanneer welk element?
• Iedereen kan velden invullen
• Kies gebruiksvriendelijkheid

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.