You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/richtlijnen/formulieren/testing/README.mdx
+91-67Lines changed: 91 additions & 67 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,7 +42,8 @@ Bekijk elk formulierveld, en controleer voor elk veld:
42
42
-**Heeft de tekst haakjes in woorden?**\
43
43
Bijvoorbeeld: "voorna(a)m(en)"? Pas de tekst aan.
44
44
-**Kun je voor dit veld autocomplete instellen?**
45
-
- Belangrijke uitleg staat in een description of in de labeltekst, niet alleen in een placeholder of tooltip.
45
+
-**Belangrijke uitleg is altijd zichtbaar.**\
46
+
Essentiële informataat staat in een description of in de labeltekst, niet alleen in een placeholder of tooltip.
46
47
- Labelteksten zijn duidelijk en beschrijvend.
47
48
48
49
{/* - Descriptions bevatten alleen tekst, staan tussen het label en het invoerveld, zijn kort en to-the-point, en het aanklikbare gedeelte is groot genoeg. Bij meerdere descriptions zijn ze allemaal correct gekoppeld aan het invoerveld. */}
@@ -53,27 +54,20 @@ Verder:
53
54
- Boven het formulier staat uitleg over hoe verplichte of niet-verplichte velden zijn aangemerkt. Verplichte of niet-verplichte velden zijn consequent aangemerkt in het hele formulier.
-[zichtbare naam label](/richtlijnen/formulieren/labels/zichtbare-naam) ⁉️
106
105
-[invoerveld goed zichtbaar](/richtlijnen/formulieren/visueel-ontwerp/invoerveld-goed-zichtbaar).
107
106
-[tekst goed zichtbaar](/richtlijnen/formulieren/visueel-ontwerp/tekst-goed-zichtbaar)
108
107
-[placeholder goed zichtbaar](/richtlijnen/formulieren/visueel-ontwerp/placeholder-goed-zichtbaar)
@@ -118,28 +117,39 @@ Lees meer in de richtlijnen:
118
117
119
118
Controleer of elk veld duidelijk gelabeld is en of de uitleg goed is geplaatst:
120
119
121
-
- Er worden geen afbeeldingen gebruikt voor buttons.
122
-
- De zichtbare labeltekst komt overeen met de toegankelijke naam in de code. Klik op het label: het bijbehorende invoerveld krijgt focus — zo werkt de `for`-en-`id`-koppeling.
123
-
- De beschrijving en foutmelding van invoervelden zijn gekoppeld met `aria-describedby`.
120
+
{/* - Er worden geen afbeeldingen gebruikt voor buttons. */}
121
+
122
+
- Gebruik een `<label for="input-id">` voor het formulierveld, en zorg dat alles een gekoppeld label heeft.
123
+
- Andere code voor een label, zoals `aria-label=""` of `title=""` moeten in elk geval de zichtbare labeltekst bevatten, anders werkt het niet met spraakbesturing.
124
+
- Extra teksten bij een formulierveld zijn gekoppeld met `aria-describedby` op het formulier-element, zoals `<input>` of `<select>`:
125
+
- Beschrijving
126
+
- Foutmeldingen
127
+
- Feedback zoals: "42 van de 100 tekens" of "Je wachtwoord voldoet aan de eisen"
128
+
- Gebruik een `<fieldset>` en `<legend>` voor Checkbox Group en Radio Group.
124
129
- De beschrijving en foutmelding van Checkbox Group en Radio Group zijn gekoppeld aan de `<fieldset>` met `aria-describedby`
125
-
- De description van een `<fieldset>` staat tussen de `<legend>` en het eerste item in de groep.
130
+
- De beschrijving van een `<fieldset>` staat tussen de `<legend>` en de eerste Radio of Checkbox Option
126
131
127
132
Verder:
128
133
129
134
- Verplichte velden hebben `aria-required` of `required` in de code.
130
-
-**Heb je code die voorkomt dat je kunt plakken?\n**
131
-
Verwijder die code.
135
+
- Invalide velden hebben `aria-invalid="true"` in de code.
136
+
-**Heb je code die voorkomt dat je kunt plakken?**\
137
+
Verwijder die code het `paste` event voorkomt.
132
138
- De naam van de stap en het formulier staat in de `<title>` van de pagina, zodat deze zichtbaar is in de browsertab en browsergeschiedenis.
133
-
- Er wordt geen positieve `tabindex` gebruikt die de volgorde verstoort.
139
+
- Er wordt geen positieve `tabindex` gebruikt die de focus-volgorde verstoort.
134
140
- Labels bevatten geen afbeeldingen of interactieve elementen.
135
141
- Buttons hebben een duidelijke en beschrijvende tekst en wanneer er een toegankelijke naam is gebruikt code, bijvoorbeeld met `aria-label` komt deze overeen met de zichtbare tekst.
142
+
- Voorkom met `<bdi translate="no">` dat wat de gebruiker zelf heeft ingevoerd, wordt vertaald. Dit is met name op de controle-pagina en de bevestigingspagina.
136
143
137
144
Validatie:
138
145
139
-
- Foutmeldingen verschijnen niet al tijdens het typen — pas na het verlaten van het veld of na verzenden.
140
-
- HTML-formuliervalidatie van de browser is uitgeschakeld (`novalidate`).
146
+
- Foutmeldingen verschijnen niet al tijdens het typen — pas na het verlaten van het veld of na verzenden. \
147
+
Gebruik het `blur` en `submit` event om validatie uit te voeren, niet `input` en `change`.
148
+
- HTML-formuliervalidatie van de browser is uitgeschakeld met `<form novalidate>`.
141
149
142
-
Lees meer in de richtlijnen:
150
+
{/* TODO: :user-invalid ipv :invalid */}
151
+
152
+
### Verder lezen
143
153
144
154
-[description bij fieldsets](/richtlijnen/formulieren/descriptions/plaatsing-bij-fieldset)
@@ -163,17 +173,19 @@ Lees meer in de richtlijnen:
163
173
164
174
-**Staan de formuliervelden in logische volgorde?**
165
175
-**Zijn er meerdere contactmogelijkheden beschikbaar om hulp te krijgen?**
166
-
Zorg voor meerdere manieren zodat het voor iedereen mogelijk is contact op te nemen. Bijorobeeld: e-mail, chat en telefoon.
176
+
Zorg voor meerdere manieren zodat het voor iedereen mogelijk is contact op te nemen. Bijvoorbeeld: e-mail, chat en telefoon.
167
177
-**Wordt hulp op meerdere plekken aangeboden?**
168
-
Goede plekken zijn: in de introductietekst, bovenaan een formulier, in de [Page Footer](/page-footer/) op de controlepagina en op de bevestigingspagina.
169
-
- De voortgang wordt getoond boven het formulier in tekst, bijvoorbeeld "Stap 2 van 4". De naam van de stap en het formulier staat in de `<title>` van de pagina, zodat deze zichtbaar is in de browsertab en browsergeschiedenis. De voortgang is hoorbaar voor screenreadergebruikers: "Stap 2 van 4" of vergelijkbaar.
178
+
Goede plekken zijn: in de introductietekst, bovenaan een formulier, in de [Page Footer](/page-footer/), op de controlepagina en op de bevestigingspagina.
179
+
- De voortgang wordt getoond boven het formulier in tekst, bijvoorbeeld "Stap 2 van 4".
170
180
- Het formulier wordt niet automatisch verzonden na het wijzigen van een veld.
171
-
- Als de gebruiker is ingelogd, dan worden bekende gegevens vooraf ingevuld waar dat wettelijk is toegestaan.
172
-
- Knippen en plakken is toegestaan.\
173
-
Zodat gebruikers niet gedwongen worden een simpel goed te onthouden wachtwoord te kiezen of hun contactgevens uit een adres boek kunnen overnemen.
181
+
- Als de gebruiker is ingelogd, dan worden bekende gegevens vooraf ingevuld.
182
+
- Knippen en plakken is overal toegestaan.
183
+
- Controleer of de browser autocomplete aanbiedt om velden vooraf in te vullen, waar je dat verwacht.
174
184
175
185
Voor het verzenden:
176
186
187
+
{/* TODO: Merge deze 2 */}
188
+
177
189
- De laatste stap toont een samenvatting van alle ingevoerde gegevens.
178
190
- Het formulier biedt de mogelijkheid om een inzending te controleren, te wijzigen of ongedaan te maken.
179
191
@@ -186,12 +198,11 @@ Vul het formulier bewust fout in en controleer de foutafhandeling:
186
198
187
199
- Ingevoerde gegevens worden niet te snel afgekeurd. \
188
200
Er worden geen invoerpatronen gebruikt zodat bijvoorbeeld een minder vaak gebruikt e-mail adres (`user+inbox@voorbeeld.nl`) of een postcode met èn zonder spatieook geldig is.
189
-
-Geldige waarden voor een invoerveld zijn vooraf aangegeven, zodat gebruikers weten wat er wordt verwacht.
201
+
-{/* TODO: Minder abstract */} Der regels voor een invoerveld zijn vooraf duidelijk, bijvoorbeeld: welke tekens, of hoe lang de tekst mag zijn.
190
202
- Invoervelden hebben geen onnodig minimum of maximum aantal tekens.
191
-
- Na verzenden met fouten verschijnt een samenvatting van alle fouten boven het formulier. \
192
-
Elke foutmelding in de samenvatting is een link naar het betreffende veld. Het kopje van de foutensamenvatting krijgt toetsenbordfocus na verzenden.
203
+
- Na verzenden met fouten verschijnt een samenvatting van alle fouten boven het formulier.
193
204
194
-
Lees meer:
205
+
### Verder lezen
195
206
196
207
-[controleren en aanpassen](/richtlijnen/formulieren/voorkom-fouten/controleren-en-aanpassen)
Gebruik vertaalsoftware, zoals Google Translate, en vul je formulier in. Test zowel de happy flow als de unhappy flow.
219
+
Vul je formulier in terwijl je vertaalsoftware gebruikt, zoals Google Translate. Test zowel de happy flow als de unhappy flow.
209
220
210
221
- Je kunt het formulier invullen, alle informatie van het formulier wordt vertaald.
211
-
-Als je Google Translate gebruikt op de controlepagina, wordt de ingevoerde informatie niet meevertaald.
222
+
-Informatie die je zelf hebt ingevoerd wordt niet meevertaald.
212
223
213
-
### Na verzenden verschijnt een duidelijke bevestiging
224
+
{/*### Na verzenden verschijnt een duidelijke bevestiging*/}
214
225
215
-
Na verzenden verschijnt een duidelijke bevestiging dat het formulier succesvol is verzonden. De bevestiging vermeldt welke informatie is verstuurd, of verwijst naar een plek waar dat te vinden is. De bevestiging vermeldt wat de vervolgstappen zijn.
226
+
{/*Na verzenden verschijnt een duidelijke bevestiging dat het formulier succesvol is verzonden. De bevestiging vermeldt welke informatie is verstuurd, of verwijst naar een plek waar dat te vinden is. De bevestiging vermeldt wat de vervolgstappen zijn.*/}
216
227
217
-
Lees meer over [toegankelijke succesmelding](/richtlijnen/formulieren/bevestigingspagina/toegankelijke-succesmelding), [bevestigingspagina](/richtlijnen/formulieren/bevestigingspagina) en [benoem vervolgstappen](/richtlijnen/formulieren/bevestigingspagina/vervolgstappen).
228
+
{/*Lees meer over [toegankelijke succesmelding](/richtlijnen/formulieren/bevestigingspagina/toegankelijke-succesmelding), [bevestigingspagina](/richtlijnen/formulieren/bevestigingspagina) en [benoem vervolgstappen](/richtlijnen/formulieren/bevestigingspagina/vervolgstappen).*/}
@@ -240,41 +258,47 @@ Lees meer in de richtlijnen:
240
258
241
259
Test het formulier met een screenreader. Gebruik bij voorkeur een combinatie van screenreader en browser die veel voorkomt bij je doelgroep, zoals NVDA met Firefox of VoiceOver met Safari.
242
260
243
-
- Verplichte velden worden als verplicht aangeduid bij het voorlezen. \
244
-
Vul alleen de velden in die aangekondigd worden als "verplicht", en controleer dat je geen foutmelding krijgt over ontbrekende informatie.
245
-
- Statusberichten (zoals "formulier verzonden") worden voorgelezen zonder dat de gebruiker er naartoe hoeft te navigeren.
246
-
- De voortgang is hoorbaar voor screenreadergebruikers: "Stap 2 van 4" of vergelijkbaar.
247
261
- Het label van elk veld wordt voorgelezen als het veld focus krijgt.
248
-
- De description van een veld wordt voorgelezen als het veld focus krijgt.
262
+
- De beschrijving van een veld wordt voorgelezen als het veld focus krijgt.
263
+
- Verplichte velden worden als verplicht aangeduid bij het voorlezen.
264
+
- Foutmeldingen en feedback onderbreken de gebruiker niet bij het invullen.
265
+
- Feedback over invoer (bijvoorbeeld: of "je wachtwoord voldoet aan de eisen") worden automatisch voorgelezen, zonder dat de gebruiker er naartoe hoeft te navigeren.
266
+
267
+
Controleer het volgende als naar een volgende stap gaat of het formulier verzend:
268
+
269
+
- De voortgang is hoorbaar voor screenreadergebruikers: "Stap 2 van 4" of vergelijkbaar.
249
270
- Na verzenden verschijnt een duidelijke bevestiging dat het formulier succesvol is verzonden.
271
+
- Positieve statusberichten na het versturen (zoals "formulier verzonden") worden automatisch voorgelezen.
250
272
251
273
{/* TODO Statusberichten zijn ook zichtbaar voor ingezoomde gebruikers — ze verdwijnen niet buiten het scherm. Statusberichten verdwijnen niet automatisch — of als ze dat doen, wordt het einde van de status ook via een screenreader gecommuniceerd. */}
252
274
275
+
Test de validatie:
276
+
277
+
- Vul alleen de velden in die aangekondigd worden als "verplicht".\
278
+
Je zou nu geen foutmelding moeten krijgen over ontbrekende velden.
279
+
253
280
Test ook de unhappy flow:
254
281
255
-
- Foutmeldingen worden voorgelezen — controleer ook de foutensamenvatting.
282
+
- Foutmeldingen worden voorgelezen.
283
+
- Foutmeldingen onderbreken de gebruiker niet bij het invullen.
284
+
- Wanneer je meerdere fouten hebt bij het verzenden, dan krijg je 1 bericht met de samenvatting van alle fouten.
285
+
- De foutmelding van een veld wordt voorgelezen als het veld focus krijgt.
256
286
- Foutmeldingen leggen uit wat er fout is en hoe het opgelost kan worden — niet alleen "Invoer klopt niet!".
257
287
258
288
{/* Foutmeldingen eindigen met een punt zodat een screenreader een duidelijke pauze maakt. */}
-[informeer ingezoomde gebruikers](/richtlijnen/formulieren/status/zoom) en [geef gebruikers voldoende tijd](/richtlijnen/formulieren/status/enough-time)[optioneel of verplicht](/richtlijnen/formulieren/voorkom-fouten/verplichte-velden).
0 commit comments