Skip to content

Commit b185ae8

Browse files
JuliaTol-properaccessclaude
JuliaTol-properaccess
and
claude
committed
docs: schrijf 1.3.5 Identificeer het doel van de input volgens de schrijfwijzer
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 8f9a6b9 commit b185ae8

File tree

2 files changed

+258
-19
lines changed

2 files changed

+258
-19
lines changed

‎docs/wcag/1.3.05.mdx‎

Lines changed: 257 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,25 @@ hide_title: true
44
hide_table_of_contents: false
55
sidebar_label: 1.3.5 Identificeer het doel van de input
66
pagination_label: WCAG-succescriterium 1.3.5 Identificeer het doel van de input
7-
description: Zorg dat de browser kan begrijpen wat een gebruiker moet invoeren, zodat die kan helpen en het makkelijker kan maken.
7+
description: Invoervelden voor persoonlijke gegevens hebben een autocomplete-attribuut zodat de browser ze automatisch kan invullen.
88
slug: 1.3.5
99
keywords:
1010
- WCAG
11-
- AA
11+
- Niveau AA
1212
- waarneembaar
1313
- aanpasbaar
1414
- perceivable
1515
- adaptable
1616
- identify input purpose
17+
- autocomplete
18+
- invoerdoel
19+
- formulier
20+
- persoonlijke gegevens
21+
- autofill
22+
- adres
23+
- naam
24+
- WCAG 1.3.5
25+
- toegankelijkheid
1726
---
1827

1928
{/* @license CC0-1.0 */}
@@ -24,40 +33,272 @@ import { SpotlightSection } from "@utrecht/component-library-react/dist/css-modu
2433
import CTAGebruikersonderzoek from "./_cta_gebruikersonderzoek.md";
2534
import Disclaimer from "./_wcag-disclaimer.md";
2635
import WCAGFooterInfo from "./_wcag_footer_info.md";
36+
import { Guideline } from "@site/src/components/Guideline";
2737
import Summary from "./summaries/_1.3.5-summary.md";
2838

2939
<WcagHeadingGroup level={1} conformanceLevel="Niveau AA">
3040
{"WCAG-succescriterium 1.3.5 Identificeer het doel van de input"}
3141
</WcagHeadingGroup>
3242

33-
## Uitleg
34-
3543
<Summary />
3644

37-
## Gerelateerde NL Design System-richtlijn
45+
Automatisch invullen werkt alleen als het invoerveld een `autocomplete`-attribuut heeft met de juiste waarde. Zonder dat attribuut herkent de browser het veld niet en kan het niet automatisch worden ingevuld. Het `autocomplete`-attribuut maakt het ook mogelijk om iconen of labels bij velden te tonen die de bezoeker helpen begrijpen wat er wordt verwacht — onafhankelijk van de taal van de pagina.
3846

39-
Formulieren: [Autocomplete in een formulier](/richtlijnen/formulieren/voorkom-fouten/autocomplete).
47+
Dit succescriterium geldt voor invoervelden die persoonlijke gegevens van de bezoeker verzamelen. Bekijk de volledige [lijst van geldige waarden](https://www.w3.org/Translations/WCAG22-nl/#input-purposes).
4048

41-
## Bronnen
49+
## Veelgemaakte fouten
4250

43-
- WCAG bevat een volledige lijst van [waarden voor autocomplete](https://www.w3.org/Translations/WCAG22-nl/#input-purposes).
44-
- Jules Ernst van 200 OK heeft van deze lijst een [Nederlandse interpretatie van autocomplete](https://www.200ok.nl/tips/autocomplete/)gemaakt.
51+
### Invoerveld voor persoonlijke gegevens mist een autocomplete-attribuut
4552

46-
## Gebruikersonderzoek
53+
Een formulier vraagt om naam, adres, e-mailadres of andere persoonlijke gegevens, maar de velden hebben geen `autocomplete`-attribuut. De browser kan de velden niet automatisch invullen. De bezoeker moet alles handmatig typen, ook als de browser de gegevens al heeft opgeslagen.
4754

48-
<CTAGebruikersonderzoek />
55+
**Hoe te testen:** inspecteer het veld in de <span lang="en">DevTools</span> en controleer of het `autocomplete`-attribuut aanwezig is.
56+
57+
<Guideline appearance="dont" title="Adresvelden zonder autocomplete">
58+
```html
59+
<label for="naam">Volledige naam</label>
60+
<input type="text" id="naam" />
61+
62+
<label for="email">E-mailadres</label>
63+
<input type="email" id="email" />
64+
65+
<label for="straat">Straat en huisnummer</label>
66+
<input type="text" id="straat" />
67+
68+
<label for="postcode">Postcode</label>
69+
<input type="text" id="postcode" />
70+
```
71+
72+
</Guideline>
73+
74+
<Guideline appearance="do" title="Adresvelden met autocomplete">
75+
```html
76+
<label for="naam">Volledige naam</label>
77+
<input type="text" id="naam" autocomplete="name" />
78+
79+
<label for="email">E-mailadres</label>
80+
<input type="email" id="email" autocomplete="email" />
81+
82+
<label for="straat">Straat en huisnummer</label>
83+
<input type="text" id="straat" autocomplete="street-address" />
84+
85+
<label for="postcode">Postcode</label>
86+
<input type="text" id="postcode" autocomplete="postal-code" />
87+
```
88+
89+
</Guideline>
90+
91+
**Wie kan dit oplossen:** een developer voegt het juiste `autocomplete`-attribuut toe aan elk veld dat persoonlijke gegevens verzamelt. Bij sommige contentmanagementsystemen kan de webredactie dit attribuut toevoegen.
92+
93+
### Autocomplete-waarde is onjuist
94+
95+
Een veld heeft een `autocomplete`-attribuut, maar met een verkeerde waarde. Een veld voor het e-mailadres heeft `autocomplete="e-mail"`, of een veld voor de achternaam heeft `autocomplete="given-name"`. De browser vult dan de verkeerde gegevens in.
96+
97+
**Hoe te testen:** klik in een veld en accepteer de autocomplete-suggestie van de browser. Worden de juiste gegevens ingevuld? Inspecteer het veld in de <span lang="en">DevTools</span> en controleer of de `autocomplete`-waarde overeenkomt met wat het veld vraagt.
98+
99+
<Guideline appearance="dont" title="Verkeerde autocomplete-waarde">
100+
```html
101+
<!-- Veld vraagt om achternaam, maar autocomplete verwijst naar voornaam -->
102+
<label for="achternaam">Achternaam</label>
103+
<input type="text" id="achternaam" autocomplete="given-name" />
104+
```
105+
</Guideline>
106+
107+
<Guideline appearance="do" title="Correcte autocomplete-waarde">
108+
```html
109+
<label for="achternaam">Achternaam</label>
110+
<input type="text" id="achternaam" autocomplete="family-name" />
111+
```
112+
</Guideline>
113+
114+
**Wie kan dit oplossen:** een developer controleert de `autocomplete`-waarde van elk veld aan de hand van de [lijst met geldige waarden](https://www.w3.org/Translations/WCAG22-nl/#input-purposes).
115+
116+
### Autocomplete is uitgeschakeld op velden voor persoonlijke gegevens
117+
118+
Een formulier heeft `autocomplete="off"` op velden die persoonlijke gegevens vragen. De browser mag de velden niet automatisch invullen. De bezoeker moet alles handmatig typen. Developers doen dit vaak om beveiligingsredenen, maar voor de meeste velden is het niet nodig en het maakt het formulier onnodig moeilijk te gebruiken.
119+
120+
**Hoe te testen:** inspecteer de velden in de <span lang="en">DevTools</span>. Staat er `autocomplete="off"` op velden voor naam, adres, e-mail of telefoonnummer?
121+
122+
<Guideline appearance="dont" title="Autocomplete uitgeschakeld op een naamveld">
123+
```html
124+
<label for="naam">Volledige naam</label>
125+
<input type="text" id="naam" autocomplete="off" />
126+
```
127+
</Guideline>
128+
129+
<Guideline appearance="do" title="Autocomplete ingeschakeld met de juiste waarde">
130+
```html
131+
<label for="naam">Volledige naam</label>
132+
<input type="text" id="naam" autocomplete="name" />
133+
```
134+
</Guideline>
135+
136+
Bij wachtwoordvelden voor een nieuw wachtwoord gebruik je `autocomplete="new-password"`. Dat signaleert aan de browser en wachtwoordmanagers dat het om een nieuw wachtwoord gaat, niet om een bestaand wachtwoord dat moet worden ingevuld.
137+
138+
**Wie kan dit oplossen:** een developer vervangt `autocomplete="off"` door de juiste `autocomplete`-waarde.
139+
140+
### Betaalvelden missen autocomplete
141+
142+
Een betaalformulier vraagt om kaartnummer, vervaldatum en naam op de kaart. Zonder `autocomplete` moet de bezoeker de gegevens handmatig invoeren. Wachtwoordmanagers en browsers kunnen betaalgegevens automatisch invullen als de juiste `autocomplete`-waarden aanwezig zijn.
143+
144+
**Hoe te testen:** klik in het kaartnummerveld. Biedt de browser of wachtwoordmanager aan om de betaalgegevens in te vullen?
145+
146+
<Guideline appearance="dont" title="Betaalvelden zonder autocomplete">
147+
```html
148+
<label for="kaartnummer">Kaartnummer</label>
149+
<input type="text" id="kaartnummer" />
150+
151+
<label for="vervaldatum">Vervaldatum</label>
152+
<input type="text" id="vervaldatum" />
153+
154+
<label for="naam-kaart">Naam op de kaart</label>
155+
<input type="text" id="naam-kaart" />
156+
```
157+
158+
</Guideline>
159+
160+
<Guideline appearance="do" title="Betaalvelden met autocomplete">
161+
```html
162+
<label for="kaartnummer">Kaartnummer</label>
163+
<input type="text" id="kaartnummer" autocomplete="cc-number" />
164+
165+
<label for="vervaldatum">Vervaldatum</label>
166+
<input type="text" id="vervaldatum" autocomplete="cc-exp" />
167+
168+
<label for="naam-kaart">Naam op de kaart</label>
169+
<input type="text" id="naam-kaart" autocomplete="cc-name" />
170+
```
171+
172+
</Guideline>
173+
174+
**Wie kan dit oplossen:** een developer voegt de juiste `autocomplete`-waarden toe aan de betaalvelden.
175+
176+
### Inlogvelden missen autocomplete
177+
178+
Een inlogformulier vraagt om een e-mailadres en wachtwoord. De velden hebben geen `autocomplete`-attribuut. De browser en wachtwoordmanagers kunnen de opgeslagen inloggegevens niet automatisch invullen.
179+
180+
**Hoe te testen:** open een inlogpagina. Inspecteer de invoervelden in de <span lang="en">DevTools</span>.
181+
182+
<Guideline appearance="dont" title="Inlogvelden zonder autocomplete">
183+
```html
184+
<label for="email">E-mailadres</label>
185+
<input type="email" id="email" />
186+
187+
<label for="wachtwoord">Wachtwoord</label>
188+
<input type="password" id="wachtwoord" />
189+
```
190+
191+
</Guideline>
192+
193+
<Guideline appearance="do" title="Inlogvelden met autocomplete">
194+
```html
195+
<label for="email">E-mailadres</label>
196+
<input type="email" id="email" autocomplete="username" />
197+
198+
<label for="wachtwoord">Wachtwoord</label>
199+
<input type="password" id="wachtwoord" autocomplete="current-password" />
200+
```
201+
202+
</Guideline>
203+
204+
Bij een registratieformulier gebruik je `autocomplete="new-password"` voor het wachtwoordveld. Dat signaleert aan de browser dat het om een nieuw wachtwoord gaat en biedt aan om een sterk wachtwoord te genereren.
205+
206+
**Wie kan dit oplossen:** een developer voegt `autocomplete="username"` en `autocomplete="current-password"` toe aan het inlogformulier en `autocomplete="new-password"` aan het registratieformulier.
207+
208+
### Advies: Afwijkend afleveradres en factuuradres delen dezelfde autocomplete-waarden
209+
210+
Een bestelformulier heeft een afleveradres en een factuuradres. Beide secties gebruiken dezelfde `autocomplete`-waarden. De browser vult dan hetzelfde adres in bij beide secties.
211+
212+
**Hoe te testen:** vul een bestelformulier in met een afwijkend aflever- en factuuradres. Biedt de browser de juiste adressen aan bij de juiste secties?
213+
214+
<Guideline appearance="dont" title="Twee adressecties met dezelfde autocomplete-waarden">
215+
```html
216+
<!-- Afleveradres -->
217+
<label for="aflever-straat">Straat</label>
218+
<input type="text" id="aflever-straat" autocomplete="street-address" />
219+
220+
<!-- Factuuradres -->
221+
<label for="factuur-straat">Straat</label>
222+
<input type="text" id="factuur-straat" autocomplete="street-address" />
223+
```
224+
225+
</Guideline>
226+
227+
<Guideline appearance="do" title="Adressecties onderscheiden met shipping en billing">
228+
```html
229+
<!-- Afleveradres -->
230+
<label for="aflever-straat">Straat</label>
231+
<input type="text" id="aflever-straat" autocomplete="shipping street-address" />
232+
233+
<!-- Factuuradres -->
234+
<label for="factuur-straat">Straat</label>
235+
<input type="text" id="factuur-straat" autocomplete="billing street-address" />
236+
```
237+
238+
</Guideline>
239+
240+
De prefixen <span lang="en">`shipping`</span> en <span lang="en">`billing`</span> vertellen de browser welk adres bij welke sectie hoort.
241+
242+
**Wie kan dit oplossen:** een developer voegt de juiste prefix toe aan de `autocomplete`-waarden van de adresvelden.
49243

50244
## Hoe te testen
51245

52-
[Axe DevTools](https://www.deque.com/axe/browser-extensions/) kan controleren op ongeldige waarden (typefouten) voor autocomplete.
246+
### Voor iedereen
247+
248+
1. Open een formulier dat persoonlijke gegevens vraagt, zoals naam, adres, e-mail, telefoon en betaalgegevens. Klik in de velden. Biedt de browser aan om ze automatisch in te vullen? Dat de browser iets aanbiedt, betekent nog niet dat het attribuut aanwezig en correct ingesteld is.
249+
2. Accepteer de suggestie van de browser. Worden de juiste gegevens in de juiste velden ingevuld?
250+
3. Test een bestelformulier met een afwijkend aflever- en factuuradres. Worden de adressen bij de juiste secties ingevuld?
251+
4. Test een inlogpagina. Biedt de browser of wachtwoordmanager de opgeslagen gegevens aan?
252+
253+
### Voor developers
254+
255+
1. Inspecteer elk invoerveld dat persoonlijke gegevens verzamelt in de <span lang="en">DevTools</span>. Heeft het veld een `autocomplete`-attribuut met een geldige waarde?
256+
2. Controleer of de `autocomplete`-waarde overeenkomt met wat het veld vraagt. Vergelijk met de [lijst met geldige waarden](https://www.w3.org/Translations/WCAG22-nl/#input-purposes).
257+
3. Zoek in de broncode naar `autocomplete="off"` op velden voor persoonlijke gegevens. Vervang die door de juiste waarde.
258+
4. Advies: Controleer bestelformulieren met meerdere adressecties. Hebben de secties de juiste `shipping` of `billing` prefix?
259+
5. Gebruik <span lang="en">axe DevTools</span> of <span lang="en">Lighthouse</span> voor een eerste scan. Ontbrekende `autocomplete`-attributen op veelvoorkomende veldtypen worden automatisch gedetecteerd.
260+
261+
## Veelgebruikte autocomplete-waarden
262+
263+
| Waarde | Veld |
264+
| ------------------ | --------------------------------------------- |
265+
| `name` | Volledige naam |
266+
| `given-name` | Voornaam |
267+
| `family-name` | Achternaam |
268+
| `email` | E-mailadres |
269+
| `tel` | Telefoonnummer |
270+
| `street-address` | Straat en huisnummer |
271+
| `postal-code` | Postcode |
272+
| `country-name` | Land |
273+
| `organization` | Organisatie |
274+
| `username` | Gebruikersnaam of e-mailadres bij inlog |
275+
| `current-password` | Huidig wachtwoord bij inlog |
276+
| `new-password` | Nieuw wachtwoord bij registratie of wijziging |
277+
| `cc-number` | Creditcardnummer |
278+
| `cc-exp` | Vervaldatum creditcard |
279+
| `cc-name` | Naam op de creditcard |
280+
| `bday` | Geboortedatum |
281+
282+
## Gerelateerde succescriteria
53283

54-
Inspecteer daarna in de gegenereerde HTML-code van de webpagina de invoervelden, bijvoorbeeld met een [browser inspector](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools).
284+
- [1.3.1 Info en relaties](https://nldesignsystem.nl/wcag/1.3.1/): labels zijn programmatisch gekoppeld aan hun invoerveld. Autocomplete voegt daar het doel van het veld aan toe.
285+
- [3.3.2 Labels of instructies](https://nldesignsystem.nl/wcag/3.3.2/): zichtbare labels beschrijven wat er in een veld moet worden ingevuld. Autocomplete helpt de browser om het veld automatisch in te vullen op basis van die beschrijving.
286+
- [3.3.7 Overbodige invoer](https://nldesignsystem.nl/wcag/3.3.7/): informatie die de bezoeker eerder heeft ingevuld, wordt automatisch aangeboden. Autocomplete is een van de manieren om dit te realiseren.
55287

56-
Controleer of de invoervelden van formulieren een autocomplete-attribuut hebben met een juiste waarde.
288+
## Gerelateerde NL Design System-richtlijn
289+
290+
Formulieren: [Autocomplete in een formulier](/richtlijnen/formulieren/voorkom-fouten/autocomplete).
291+
292+
## Bronnen
57293

58-
**Let op:** dit geldt alleen voor invoervelden waarin persoonlijke gegevens worden uitgevraagd en niet voor bijvoorbeeld een formulier om op de website te zoeken.
294+
- WCAG bevat een volledige lijst van [waarden voor autocomplete](https://www.w3.org/Translations/WCAG22-nl/#input-purposes).
295+
- Jules Ernst van 200 OK heeft van deze lijst een [Nederlandse interpretatie van autocomplete](https://www.200ok.nl/tips/autocomplete/) gemaakt.
296+
297+
## Gebruikersonderzoek
298+
299+
<CTAGebruikersonderzoek />
59300

60-
## W3C referenties
301+
## W3C-referenties
61302

62303
- Engelse tekst van het WCAG-succescriterium: [<span lang="en">1.3.5 Identify Input Purpose</span>](https://www.w3.org/TR/WCAG22/#identify-input-purpose).
63304
- Nederlandse vertaling van het WCAG-succescriterium: [1.3.5 Identificeer het doel van de input](https://www.w3.org/Translations/WCAG22-nl/#identify-input-purpose).

‎docs/wcag/summaries/_1.3.5-summary.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
<!-- @license CC0-1.0 -->
22

3-
Zorg dat de browser (en andere software, zoals een password manager) kan begrijpen wat een gebruiker moet invoeren, zodat die kan helpen en het invoeren makkelijker kan maken.
4-
5-
Dit kan door gebruik te maken van het HTML-attribuut `autocomplete`.
3+
Een bezoeker die een formulier invult, krijgt velden voor naam, adres, e-mailadres en creditcardnummer aangeboden. De browser herkent die velden en biedt aan om ze automatisch in te vullen met opgeslagen gegevens. Dat scheelt tijd, voorkomt typefouten en is essentieel voor bezoekers die moeite hebben met typen of met het onthouden van gegevens.

0 commit comments

Comments
 (0)
⚡