WCAG 3.2.2: Bij invoer

Wat Deze Regel Betekent

WCAG 3.2.2 On Input maakt deel uit van het principe Begrijpelijk en valt onder Richtlijn 3.2 Voorspelbaar. De richtlijn stelt dat het wijzigen van de instelling van een gebruikersinterfacecomponent niet automatisch een contextwijziging mag veroorzaken, tenzij de gebruiker vooraf is geïnformeerd dat dergelijk gedrag zal optreden.

Een contextwijziging is een grote verandering in de inhoud van een webpagina die gebruikers kan desoriënteren die niet de hele pagina in één keer kunnen overzien. Volgens de WCAG-specificatie omvatten contextwijzigingen: wijzigingen van user agent (browser), wijzigingen van viewport, wijzigingen van focus en wijzigingen van inhoud die de betekenis van de pagina aanzienlijk veranderen. Het verzenden van een formulier, het openen van een nieuw venster of het navigeren naar een andere pagina zijn allemaal contextwijzigingen. Het enkel tonen van extra inhoud, zoals een uitklappende accordeon, is dat niet.

Het criterium is specifiek van toepassing op het wijzigen van de instelling van een UI-component — bijvoorbeeld het selecteren van een keuzerondje, het aanvinken van een selectievakje of het kiezen van een optie in een <select>-dropdown — in tegenstelling tot het activeren van een bedieningselement (zoals het klikken op een knop). Als een handeling een expliciete activeringsstap vereist (Enter indrukken, op Verzenden klikken), valt deze in het algemeen niet onder dit criterium. Het problematische patroon is wanneer de enkele handeling van het selecteren van een waarde onmiddellijk navigatie of een significante herlaadbeurt van de pagina triggert zonder enige waarschuwing.

Wat telt als een voldoende oplossing: Een formulier dat een verzendknop gebruikt om gebruikersselecties te verwerken, zelfs als die selecties dropdowns of selectievakjes omvatten, voldoet aan dit criterium. Een dropdown die resultaten op dezelfde pagina filtert zonder te herladen of de focus aanzienlijk te verplaatsen, voldoet. Een pagina die gebruikers vooraf informeert — bijvoorbeeld met een zichtbare melding zoals "Het selecteren van een taal zal de pagina herladen" — dat een bepaalde invoer een contextwijziging zal triggeren, voldoet ook.

Wat telt als een onvoldoende oplossing: Een land- of taalkeuze die de gebruiker automatisch omleidt naar een nieuwe URL zodra een optie is gekozen, voldoet niet. Een formulier dat automatisch wordt verzonden en weg navigeert wanneer een keuzerondje wordt geselecteerd, zonder enige verzendknop, voldoet niet. Een autocomplete-widget die de toetsenbordfocus zonder waarschuwing verplaatst naar een nieuw gebied van de pagina bij selectie, voldoet evenmin.

Officiële uitzonderingen: De WCAG-specificatie merkt op dat als de gebruiker vooraf wordt geïnformeerd over het gedrag voordat hij de component gebruikt, de automatische contextwijziging acceptabel is. Deze waarschuwing moet aanwezig zijn voordat de interactie plaatsvindt, niet erna.

Waarom Het Belangrijk Is

Onverwachte contextwijzigingen behoren tot de meest desoriënterende ervaringen op het web, en de impact wordt voor gebruikers met een beperking sterk vergroot. Wanneer een pagina plotseling navigeert, herlaadt of de focus verplaatst zonder waarschuwing, verliezen gebruikers die niet de volledige visuele lay-out van de pagina kunnen zien hun oriëntatie volledig.

Schermlezersgebruikers zijn bijzonder kwetsbaar. Wanneer een blinde gebruiker die NVDA of JAWS gebruikt een optie in een dropdown selecteert en de pagina onmiddellijk herlaadt of navigeert, kondigt de schermlezer de nieuwe paginacontext vanaf nul aan. De gebruiker raakt kwijt waar hij was, wat hij aan het doen was, en moet de hele pagina opnieuw doorlopen om zijn positie terug te vinden. Dit is geen klein ongemak — het kan de taak volledig onmogelijk maken om zelfstandig te voltooien.

Gebruikers die uitsluitend het toetsenbord gebruiken, waaronder mensen met motorische beperkingen die geen muis kunnen gebruiken, hebben een vergelijkbaar probleem. Zij kunnen een formulier doorlopen met Tab en pijltjestoetsen en per ongeluk een contextwijziging triggeren die niet de bedoeling was. Zonder fijne motoriek kan het herstellen van een onbedoelde paginanavigatie aanzienlijke inspanning vergen.

Cognitieve beperkingen verergeren het probleem verder. Gebruikers met aandachtsstoornissen, leerstoornissen of geheugenproblemen zijn afhankelijk van voorspelbare, stabiele interfaces om te begrijpen wat er gebeurt. Plotselinge contextwijzigingen doorbreken het mentale model dat zij tijdens de sessie hebben opgebouwd, waardoor zij vaak opnieuw moeten beginnen of de taak opgeven.

Gebruikers met evenwichtsstoornissen kunnen fysieke ongemakken of desoriëntatie ervaren wanneer pagina's onverwacht veranderen, vooral als de verandering animatie of verschuivingen in de scrollpositie omvat.

Een concreet scenario uit de praktijk: stel je een e-commerce-afrekenpagina in Turkije voor waar een gebruiker zijn provincie selecteert uit een dropdown. Als die selectie de pagina onmiddellijk herlaadt om verzendopties bij te werken, kan een schermlezersgebruiker zich plotseling bovenaan de pagina bevinden zonder enige aanwijzing wat er is gebeurd. Die moet dan alle formuliervelden opnieuw doorlopen om te vinden waar hij was, zonder te weten of eerdere invoer bewaard is gebleven. Dit soort frictie kan ertoe leiden dat gebruikers de aankoop volledig afbreken.

Vanuit een bruikbaarheids- en SEO-perspectief hebben pagina's die voorspelbaar gedrag vertonen lagere bouncepercentages. Gebruikers zijn minder geneigd om gefrustreerd te vertrekken, en zoekmachinecrawlers kunnen de inhoud betrouwbaarder indexeren zonder dat onverwachte redirects de crawl-paden verstoren.

Gerelateerde Axe-core-regels

WCAG 3.2.2 On Input vereist handmatige tests. Geautomatiseerde tools zoals axe-core kunnen schendingen van dit criterium niet betrouwbaar detecteren omdat het problematische gedrag contextafhankelijk is en afhangt van de intentie achter een interactie, niet simpelweg van de aanwezigheid of afwezigheid van een specifiek HTML-attribuut of -structuur. Een tool kan vaststellen dat een <select>-element een onchange-eventhandler heeft, maar kan niet bepalen of die handler een contextwijziging triggert, of de gebruiker hierover is gewaarschuwd, of dat het resulterende gedrag in de praktijk desoriënterend is.

• Handmatige test vereist — onchange-navigatiepatronen: Geautomatiseerde scanners kunnen <select>-, <input type='radio'>- en <input type='checkbox'>-elementen markeren die JavaScript-eventhandlers hebben (met name onchange), maar ze kunnen niet bepalen of die handlers een contextwijziging veroorzaken. Een menselijke tester moet met elk van deze bedieningselementen interageren en observeren of de pagina navigeert, herlaadt, de focus verplaatst naar een sterk afwijkend gebied of een nieuw venster opent zonder een expliciete activeringsstap van de gebruiker.
• Handmatige test vereist — Aanwezigheid en toereikendheid van voorafgaande waarschuwing: Zelfs als een contextwijziging wordt gedetecteerd, kan een geautomatiseerde tool niet bepalen of de gebruiker er vooraf voldoende over is geïnformeerd voordat hij met het bedieningselement interageert. Een mens moet verifiëren dat elke voorafgaande melding zichtbaar is voordat de component wordt bereikt, duidelijk geformuleerd is en daadwerkelijk het gedrag beschrijft dat zal optreden.
• Handmatige test vereist — Focusbeheer na invoer: Sommige schendingen uiten zich als focus die naar een onverwachte locatie wordt verplaatst na een invoerwijziging in plaats van als expliciete navigatie. Geautomatiseerde tools kunnen de focusbestemming die door onchange-events wordt getriggerd niet betrouwbaar volgen en niet bevestigen of de resulterende focusplaatsing een desoriënterende contextwijziging vormt.

Hoe te Testen

1. Geautomatiseerde scan als basislijn: Voer axe DevTools of Lighthouse uit op de pagina om eventuele gemarkeerde problemen onder WCAG 3.2 te identificeren. Hoewel 3.2.2 zelf handmatige tests vereist, kan axe gerelateerde problemen aan het licht brengen (zoals ontbrekende labels of focusbeheerproblemen) die een startpunt vormen. Noteer alle formulierelementen — vooral <select>-dropdowns, keuzerondjes en selectievakjes — voor handmatige opvolging.
2. Identificeer alle invoerbedieningselementen met change-handlers: Inspecteer in de browser DevTools de JavaScript van de pagina of gebruik het paneel Event Listeners om alle <select>-, <input type='radio'>-, <input type='checkbox'>- of aangepaste widgets te identificeren die een onchange-, oninput- of gelijkwaardige eventlistener hebben.
3. Handmatige toetsenbordinteractietest: Gebruik uitsluitend een toetsenbord (Tab om te navigeren, pijltjestoetsen voor radio/select-opties) om met elk geïdentificeerd bedieningselement te interageren. Observeer of het selecteren van een optie ertoe leidt dat de pagina navigeert, herlaadt, een nieuw venster opent of de focus verplaatst naar een aanzienlijk ander deel van de pagina. Bevestig, als dat zo is, of er een zichtbare waarschuwing werd weergegeven voordat het bedieningselement werd bereikt.
4. NVDA + Firefox-test: Start Firefox met NVDA actief. Navigeer naar elk formulierelement met de virtuele cursor van NVDA (pijltjestoetsen) en interageer vervolgens met de formulierenmodus (Enter of Spatie). Selecteer opties in dropdowns en keuzerondjes en luister naar onverwachte aankondigingen die duiden op een paginalaadactie, navigatie of grote contextverschuiving. Noteer of NVDA een nieuwe paginatitel of een sterk afwijkend gebied voorleest.
5. VoiceOver + Safari-test (macOS/iOS): Schakel VoiceOver in en navigeer naar elk bedieningselement met VO+pijltje rechts. Interageer met dropdowns en selectievakjes. Als een contextwijziging optreedt, kondigt VoiceOver doorgaans de nieuwe pagina of focusverschuiving aan. Bepaal of de gebruiker vooraf is gewaarschuwd.
6. JAWS + Chrome-test: Gebruik JAWS in virtuele cursormodus om door de pagina te navigeren. Interageer met formulierelementen en controleer of JAWS een contextwijziging aankondigt (wijziging van paginatitel, nieuwe URL, verschoven leespositie) onmiddellijk na invoer — zonder dat een verzendknop is geactiveerd.
7. Visuele observatietest: Voor ziende gebruikers zonder ondersteunende technologie: selecteer opties in elke dropdown en keuzerondjegroep en observeer of de pagina onverwacht navigeert of herlaadt. Controleer, als dat zo is, of er vóór het bedieningselement zichtbare instructietekst aanwezig was die voor dit gedrag waarschuwde.

Hoe te Herstellen

Automatisch verzendende select-dropdown — Onjuist

<!-- BAD: Selecting a country immediately redirects the page -->
<label for='country'>Select Country</label>
<select id='country' name='country' onchange='window.location.href="/region/" + this.value'>
  <option value='tr'>Turkey</option>
  <option value='de'>Germany</option>
  <option value='us'>United States</option>
</select>

Automatisch verzendende select-dropdown — Juist

<!-- GOOD: Selection is confirmed via a submit button; no automatic navigation -->
<form action='/region/' method='get'>
  <label for='country'>Select Country</label>
  <select id='country' name='country'>
    <option value='tr'>Turkey</option>
    <option value='de'>Germany</option>
    <option value='us'>United States</option>
  </select>
  <!-- Explicit submit button gives the user control over when navigation occurs -->
  <button type='submit'>Go</button>
</form>

Keuzerondje met automatisch verzendpatroon — Onjuist

<!-- BAD: Selecting a payment method immediately submits the form -->
<fieldset>
  <legend>Payment Method</legend>
  <label>
    <input type='radio' name='payment' value='card' onchange='this.form.submit()'>
    Credit Card
  </label>
  <label>
    <input type='radio' name='payment' value='bank' onchange='this.form.submit()'>
    Bank Transfer
  </label>
</fieldset>

Keuzerondje met automatisch verzendpatroon — Juist

<!-- GOOD: onchange can update UI state without navigating; submit requires user action -->
<fieldset>
  <legend>Payment Method</legend>
  <label>
    <input type='radio' name='payment' value='card' onchange='showPaymentDetails(this.value)'>
    Credit Card
  </label>
  <label>
    <input type='radio' name='payment' value='bank' onchange='showPaymentDetails(this.value)'>
    Bank Transfer
  </label>
</fieldset>
<!-- showPaymentDetails() reveals additional fields inline — no context change -->
<div id='payment-details' aria-live='polite'></div>
<button type='submit'>Confirm Payment</button>

Taalwisselaar met voorafgaande waarschuwing — Juist

<!-- ACCEPTABLE: User is warned before interacting that selecting will reload the page -->
<p id='lang-notice'>Selecting a language will immediately reload the page.</p>
<label for='lang-select'>Language</label>
<select
  id='lang-select'
  name='lang'
  aria-describedby='lang-notice'
  onchange='window.location.href="/" + this.value + "/"'
>
  <option value='en'>English</option>
  <option value='tr'>Türkçe</option>
  <option value='de'>Deutsch</option>
</select>
<!-- The aria-describedby links the warning to the control for screen reader users -->

Veelvoorkomende Fouten

• Het direct koppelen van window.location.href-toewijzingen aan het onchange-attribuut van een <select>-element zonder verzendknop, waardoor de pagina onmiddellijk navigeert zodra de gebruiker een optie kiest.
• Het gebruik van this.form.submit() in de onchange-handler van een keuzerondje, waardoor het hele formulier wordt verzonden en weg navigeert zodra een radio-optie is geselecteerd — voordat de gebruiker zijn keuzes kan controleren.
• Het plaatsen van de voorafgaande waarschuwing ná het bedieningselement in de DOM, waardoor schermlezersgebruikers en toetsenbordnavigators het bedieningselement tegenkomen voordat zij de waarschuwing over het gedrag dat het triggert horen of lezen.
• Het tonen van de voorafgaande waarschuwing uitsluitend als een tooltip of placeholdertekst die niet betrouwbaar wordt blootgesteld aan ondersteunende technologieën, waardoor schermlezersgebruikers geen enkele aanwijzing hebben dat een contextwijziging zal volgen op hun invoer.
• Het bouwen van aangepaste dropdown-widgets met <div>- en <ul>-elementen die via JavaScript navigatie uitvoeren bij selectie, maar die de semantische structuur missen die testers of toegankelijkheidsoverlays in staat zou stellen ze te identificeren als interactieve bedieningselementen die onder 3.2.2 nader onderzocht moeten worden.
• Het triggeren van een automatische formulierverzending op het laatste veld in een formulier (bijvoorbeeld een PIN- of OTP-invoer) wanneer het vereiste aantal tekens is bereikt, zonder de gebruiker te informeren dat dit zal gebeuren.
• Het openen van een modaal dialoogvenster of een nieuw browservenster als reactie op het aanvinken van een selectievakje, zonder enige voorafgaande waarschuwing — dit vormt een contextwijziging omdat het de viewport en focus van de gebruiker aanzienlijk verplaatst.
• Het verwarren van voorspelbare in-page-inhoudsupdates met contextwijzigingen en het toevoegen van onnodige verzendknoppen rond interacties die al acceptabel zijn (zoals een live zoekfilter), wat de UI kan vervuilen — teams moeten begrijpen dat inline, niet-desoriënterende updates geen verzendstap vereisen.
• Uitsluitend vertrouwen op geautomatiseerde toegankelijkheidsscans en 3.2.2 als behaald markeren omdat geen enkele geautomatiseerde regel het heeft gemarkeerd, zonder de verplichte handmatige toetsenbord- en schermlezertests uit te voeren die dit criterium vereist.
• Het toepassen van een contextveranderende onchange-handler op een <select> die wordt gebruikt voor sorteren of filteren in een resultatenlijst, waardoor een volledige paginaherlaadactie plaatsvindt in plaats van een AJAX-update, en het nalaten gebruikers te waarschuwen dat deze herlaadactie zal plaatsvinden bij selectie.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidential Circular 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte webtoegankelijkheidseisen vast op basis van WCAG 2.2. WCAG 3.2.2 On Input is een criterium op Niveau A, wat het minimale basisniveau van conformiteit onder de circulaire vertegenwoordigt — wat betekent dat naleving niet optioneel is maar wettelijk verplicht voor alle betrokken entiteiten.

De circulaire definieert een implementatietijdlijn met twee niveaus. Publieke instellingen — waaronder ministeries, gemeenten, staatsuniversiteiten en overheidsinstanties — moeten binnen één jaar na publicatie van de circulaire volledige conformiteit op Niveau A bereiken. Entiteiten in de private sector die onder de regelgeving vallen, hebben een termijn van twee jaar om te voldoen.

De volgende typen entiteiten vallen expliciet onder de circulaire en moeten er daarom voor zorgen dat hun digitale diensten voldoen aan WCAG 3.2.2: e-commerceplatforms, publieke instellingen op alle bestuursniveaus, banken en financiële instellingen, ziekenhuizen en zorgaanbieders, telecombedrijven met 200,000 of meer abonnees, erkende reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministry of National Education (MoNE).

Voor deze entiteiten vormt een schending van WCAG 3.2.2 — zoals een taalkeuze op een bankportaal die automatisch omleidt bij selectie, of een ziekenhuisafspraakformulier dat automatisch wordt verzonden wanneer een afdelingskeuzerondje wordt gekozen — een directe niet-naleving van de regelgeving. Gezien het feit dat Turkije een aanzienlijk aantal gebruikers met een beperking heeft en dat digitale overheidsdiensten in toenemende mate het primaire kanaal zijn voor burgers om toegang te krijgen tot publieke diensten, zijn de praktische gevolgen van het negeren van dit criterium aanzienlijk.

Organisaties die onder de circulaire vallen, moeten het testen van WCAG 3.2.2 behandelen als een verplichte auditstap tijdens QA. Omdat geautomatiseerde tools schendingen van dit criterium niet kunnen detecteren, moet handmatig testen door getrainde toegankelijkheidsspecialisten — inclusief toetsenbordinteractie, schermlezergedrag met NVDA en JAWS, en expliciete beoordeling van alle door onchange aangestuurde interacties — worden ingebouwd in het nalevingsproces. Het documenteren van testresultaten en eventuele geaccepteerde uitzonderingen (met voorafgaande waarschuwingen) is aan te bevelen om aan regelgevende instanties aan te tonen dat men de nodige zorgvuldigheid heeft betracht.