Succescriterium 3.2.2 Bij input

Niveau A

Lees de officiële tekst van succescriterium 3.2.2 Bij input

Bij input: zo test je het
Met een muis is deze fout nauwelijks te vinden: je klikt, kiest en bent klaar. Met het toetsenbord komt hij meteen boven.

Ga als volgt te werk:
- Tab naar een keuzelijst.
- Ga met de pijltoetsen omlaag door de opties, alsof je aan het kijken bent.
- Gebeurt er iets? Dan is dat de fout.
- Doe hetzelfde met vinkjes en keuzerondjes: spatie erop en kijken of de pagina blijft staan.
Vergeet de tekstvelden niet. Vul een veld in en druk op Tab om verder te gaan. Verandert er dan iets aan de pagina — een blok dat verschijnt, een sprong naar boven — dan valt dat ook onder dit criterium.

In de code is het ook op te zoeken:
```
document.querySelectorAll('[onchange], select, input[type=checkbox], input[type=radio]')
  .forEach(function (el) {
    if (el.getAttribute('onchange')) console.warn('onchange:', el);
  });
```
Zoek in de bronbestanden daarnaast naar form.submit() en addEventListener('change'. Niet elke treffer is fout, maar het zijn wel de plekken om te kijken.

Thema’s
Formulieren
Doelgroepen
Auditeur Ontwikkelaar
Wie het raakt
Je bent blind Je beweegt moeilijk Je leest of onthoudt moeilijk
Hulpmiddelen
Schermlezer Toetsenbord
Open dit onderwerp op een eigen pagina
Bij input: wat het criterium vraagt
Het bedienen van een onderdeel mag niet vanzelf de context veranderen: geen nieuwe pagina, geen ander venster en geen verplaatste focus. Tenzij vooraf is aangekondigd dat dat gebeurt. Een keuzelijst die zichzelf verstuurt verandert de pagina terwijl de bezoeker nog aan het kiezen is — wie met de pijltjestoetsen door een lijst met landen gaat, is al weg bij de tweede optie.

De drie klassiekers:
- Een keuzelijst die verstuurt. Van land, taal of sortering.
- Een veld dat de focus doorzet. Vier vakjes voor een pincode, en na elk cijfer springt de focus door. Bij een typefout is er geen weg terug.
- Een vinkje dat de pagina herlaadt, bijvoorbeeld een filter dat meteen zoekt.
Wie kijkt, ziet dat de pagina verandert. Wie luistert, hoort een schermlezer opnieuw beginnen zonder te weten waarom. Wie langzaam bedient, raakt in de knel omdat het gebeurt vóór hij klaar is.

Een filter dat de lijst eronder bijwerkt zonder de pagina te herladen en zonder de focus te verplaatsen is geen contextverandering. Dat is een resultaat. Meld de nieuwe stand wel met role="status".

Thema’s
Formulieren
Doelgroepen
Auditeur Ontwikkelaar
Wie het raakt
Je bent blind Je beweegt moeilijk Je leest of onthoudt moeilijk
Hulpmiddelen
Schermlezer Toetsenbord
Open dit onderwerp op een eigen pagina
Bij input: een knop ernaast
Er is één oplossing die altijd werkt en die in twee minuten is gebouwd: zet er een knop naast.
```

<select onchange="this.form.submit()">


<select id="sortering" name="sortering">…</select>
<button type="submit">Toon resultaten</button>
```
Dat kost één klik en voorkomt dat een bezoeker per ongeluk ergens anders belandt. Het werkt bovendien zonder JavaScript.

Wil je toch automatisch versturen, dan mag dat als je het vooraf aankondigt. Zet die aankondiging in het label en niet erachter, anders wordt hij pas gelezen als het al is gebeurd:
```
<label for="taal">Taal <span class="hint">(de pagina laadt opnieuw)</span></label>
<select id="taal" name="taal" onchange="this.form.submit()">
```
Bij een pincode in losse vakjes mag de focus doorspringen, zolang er een weg terug is. Werkt Backspace niet meer omdat de focus al weg is, dan zit de bezoeker vast. Eén veld voor de hele code is bijna altijd beter — en dan werkt een wachtwoordbeheerder ook.

Thema’s
Formulieren
Doelgroepen
Auditeur Ontwikkelaar
Wie het raakt
Je bent blind Je beweegt moeilijk Je leest of onthoudt moeilijk
Hulpmiddelen
Schermlezer Toetsenbord
Open dit onderwerp op een eigen pagina

Succescriterium 3.2.2 Bij input

Bij input: zo test je het

Bij input: wat het criterium vraagt

Bij input: een knop ernaast