WCAG 2.2.1: Timing aanpasbaar

Wat Deze Regel Betekent

WCAG 2.2.1 Timing Adjustable is een succescriterium op Niveau A onder Principe 2: Bedienbaar. Het stelt dat voor elke tijdslimiet die door content wordt ingesteld, ten minste één van de volgende zaken waar moet zijn: de gebruiker kan de tijdslimiet uitschakelen voordat hij ermee wordt geconfronteerd; de gebruiker kan de tijdslimiet aanpassen binnen een brede marge (ten minste tien keer de standaardinstelling); of de gebruiker kan de tijdslimiet verlengen met een eenvoudige handeling — zoals het indrukken van een toets of het klikken op een knop — voordat de tijd verstrijkt, en wordt ten minste 20 seconden van tevoren gewaarschuwd, met de mogelijkheid om de tijd ten minste tien keer te verlengen.

In praktische termen is dit criterium van toepassing op elke webinterface die een sessietime-out oplegt, een automatisch doorschuivende carrousel met getimede dia’s, een formulier dat automatisch wordt geleegd of verzonden, een afteltimer op een afrekenpagina, een mediaspeler met getimede ondertitels die niet gepauzeerd kunnen worden, of elk ander mechanisme dat de tijd beperkt die een gebruiker heeft om een taak te voltooien. Als je pagina of applicatie een timer instelt die, zodra deze is verlopen, content verwijdert, de gebruiker uitlogt of hem zonder zijn toestemming naar een nieuwe status brengt, moet je een manier bieden om die limiet aan te passen of te verlengen.

Het criterium definieert ook drie belangrijke uitzonderingen die kunnen toestaan dat een tijdslimiet blijft bestaan zonder de hierboven beschreven aanpassingsmechanismen. Ten eerste de real-time-uitzondering: als de tijdslimiet een vereist onderdeel is van een real-time gebeurtenis (zoals een live veiling of een synchroon online examen), zou het aanpassen van de tijd de activiteit zelf ongeldig maken en is geen alternatief haalbaar. Ten tweede de essentiële uitzondering: als de tijdslimiet essentieel is en het verlengen ervan de activiteit ongeldig zou maken — bijvoorbeeld een getimede vaardigheidstest waarbij het meten van reactiesnelheid het doel is. Ten derde de 20-uur-uitzondering: als de tijdslimiet langer is dan 20 uur, wordt de belasting voor gebruikers als minimaal beschouwd en zijn aanpassingsmogelijkheden niet vereist.

Een pass treedt op wanneer een tijdgebonden interactie een duidelijke mogelijkheid biedt — idealiter gepresenteerd voordat de limiet wordt bereikt — waarmee de gebruiker de tijdsbeperking kan uitschakelen, verlengen of aanpassen. Een fail treedt op wanneer content automatisch verloopt, doorstuurt, de gebruiker uitlogt of verder gaat zonder een van de drie bovenstaande aanpassingsopties te bieden, en geen van de drie uitzonderingen van toepassing is.

Waarom Het Belangrijk Is

Tijdslimieten treffen mensen met een beperking onevenredig zwaar. Gebruikers die afhankelijk zijn van schermlezers navigeren vaak langzamer door pagina’s dan ziende gebruikers, omdat zij content lineair beluisteren en onbekende interfaces sequentieel moeten verkennen. Gebruikers met motorische beperkingen — waaronder mensen die schakelbediening, oogvolgsoftware, mondstokken of spraakbesturingssoftware gebruiken — kunnen aanzienlijk meer tijd nodig hebben om een formulierveld in te vullen, een aankoop te bevestigen of naar de volgende stap te navigeren. Gebruikers met cognitieve of leerstoornissen, waaronder dyslexie, aandachtsstoornissen of geheugenproblemen, hebben mogelijk extra tijd nodig om instructies te lezen, te begrijpen en erop te reageren. Ook oudere volwassenen hebben vaak meer tijd nodig voor dezelfde taken, en zij vormen een snel groeiend segment van de wereldwijde internetpopulatie.

Denk aan een concreet scenario uit de echte wereld: een persoon met cerebrale parese is bezig met het boeken van een vlucht op de website van een Turkse luchtvaartmaatschappij. De afrekensessie verloopt automatisch na vijf minuten inactiviteit. De gebruiker, die langzaam typt met een hoofdaanwijsapparaat, heeft zijn naam, paspoortnummer en betaalgegevens ingevoerd — en dan wordt de pagina opnieuw geladen, waarbij alle gegevens worden gewist en hij terugkeert naar de homepage. Niet alleen is zijn inspanning verloren gegaan, maar ook zijn vertrouwen in de site is aangetast, en mogelijk is hij helemaal niet in staat de aankoop te voltooien. Dit is een directe barrière voor gelijke deelname aan digitale handel.

De impact reikt verder dan individuele gebruikers. Volgens de Wereldgezondheidsorganisatie leven wereldwijd ongeveer 1,3 miljard mensen met een vorm van significante beperking. Alleen al in Turkije geven officiële statistieken van TÜİK aan dat meer dan 8,5 miljoen mensen een beperking hebben die dagelijkse activiteiten beïnvloedt. Interfaces met tijdslimieten sluiten een meetbaar deel uit van de potentiële gebruikersbasis van elke webapplicatie.

Los van toegankelijkheid komt het verwijderen van willekeurige tijdslimieten of het instelbaar maken ervan ook ten goede aan gebruikers in omgevingen met lage bandbreedte, gebruikers met tijdelijk beperkte motorische functies (zoals een gebroken arm), en gebruikers die simpelweg worden onderbroken tijdens een taak. De gebruiksvriendelijkheid verbetert breed en kan het aantal afgebroken formulieren verminderen, de conversieratio’s op e-commercesites verhogen en het volume aan klantondersteuning verlagen.

Gerelateerde Axe-core-regels

WCAG 2.2.1 vereist handmatige tests. Geautomatiseerde tools — waaronder axe-core, Lighthouse en vergelijkbare engines — kunnen timingovertredingen niet betrouwbaar detecteren, omdat tijdslimieten vaak worden geïmplementeerd in server-side sessielogica, JavaScript dat asynchroon draait, of integraties van derden. De tool heeft geen manier om waar te nemen dat een pagina over vijf minuten zal verlopen, of dat een carrousel zonder gebruikersinvoer zal doorschuiven, enkel door de DOM te inspecteren of statische analyse uit te voeren. De volgende overwegingen leggen uit wat testers handmatig moeten beoordelen.

• Sessietime-outs (handmatig): Testers moeten wachten op of een sessietime-out simuleren om vast te stellen of de pagina een voorafgaande waarschuwing toont, een verlengingsoptie biedt en ten minste 20 seconden geeft voor de gebruiker om te reageren. Geen enkele geautomatiseerde regel kan de sessieduur bepalen of vaststellen of een waarschuwingsdialoog op tijd verschijnt zonder daadwerkelijk de time-out af te wachten.
• Automatisch doorschuivende carrousels en sliders (handmatig): Testers moeten observeren of carrousels automatisch doorschuiven en, zo ja, of er een pauze- of stopknop aanwezig is die met het toetsenbord bereikbaar is. Axe-core kan sommige ontbrekende ARIA-attributen op carrouselcomponenten detecteren, maar kan niet bepalen of de getimede voortgang zelf aanpasbaar is.
• Automatisch verzendende of automatisch leegmakende formulieren (handmatig): Als een formulier zijn inhoud verzendt of wist na een periode van inactiviteit, moet een tester dit gedrag identificeren door observatie of code-review. Alleen de DOM onthult dit gedrag niet aan een geautomatiseerde scanner.
• Afteltimers in transactionele flows (handmatig): Afrekenpagina’s, ticketboekingsflows en examenomgevingen bevatten vaak afteltimers. Of deze timers essentieel zijn (en dus zijn uitgezonderd) of dat ze een verlengingsmechanisme vereisen, is een beoordelingskwestie die menselijke evaluatie van zowel de implementatie als de zakelijke context vereist.

Hoe te Testen

1. Geautomatiseerde scan als basislijn: Voer axe DevTools of Lighthouse uit op de pagina om bekende ARIA- of interactieve elementovertredingen te identificeren die timingproblemen kunnen verergeren. Merk op dat deze tools de tijdslimiet zelf niet zullen markeren, maar ze helpen een basislijn van andere toegankelijkheidsproblemen vast te stellen. Open in Chrome DevTools het Lighthouse-paneel, selecteer Accessibility en voer de audit uit. Activeer in axe DevTools de browserextensie, klik op Analyze en bekijk de resultaten — er zal geen timing-specifieke regel verschijnen, wat bevestigt dat handmatig testen nodig is.
2. Identificeer alle tijdslimieten: Bekijk de JavaScript-bron van de pagina, netwerkverzoeken en server-side sessieconfiguratie om elke tijdslimiet te identificeren. Veelvoorkomende locaties zijn setTimeout- en setInterval-aanroepen in JavaScript, instellingen voor sessieverloop in backendframeworks, cookie-vervalwaarden en configuraties van widgets van derden, zoals betalingsverwerkers of chatwidgets.
3. Test sessietime-outwaarschuwing met NVDA + Firefox: Open de site in Firefox met NVDA actief. Navigeer door een meerstapsformulier of een geauthenticeerd gedeelte. Wacht op de sessiewaarschuwingsdialoog (of op de time-out zelf als er geen waarschuwing verschijnt). Controleer of NVDA de waarschuwing automatisch aankondigt — idealiter via een live-regio — en dat de gebruiker de sessie kan verlengen door Enter of Spatie in te drukken op een gefocuste knop zonder formuliergegevens te verliezen.
4. Test sessietime-outwaarschuwing met VoiceOver + Safari (macOS/iOS): Herhaal bovenstaande test in Safari met VoiceOver ingeschakeld. Gebruik de rotor om naar interactieve elementen te navigeren en controleer of de time-outwaarschuwing wordt aangekondigd en of de verlengingsknop binnen het venster van 20 seconden bereikbaar is.
5. Test sessietime-outwaarschuwing met JAWS + Chrome: Herhaal de test met JAWS in Chrome. Controleer of de focus naar de waarschuwingsdialoog wordt verplaatst, of JAWS de resterende tijd en de verlengingsoptie voorleest, en of het activeren van de verlengingsknop de sessie in stand houdt zonder dat een paginavernieuwing nodig is.
6. Test alleen met toetsenbord (zonder schermlezer): Schakel je muis uit en navigeer uitsluitend met Tab, Shift+Tab, Enter en Spatie. Controleer of een waarschuwingsdialoog met het toetsenbord bereikbaar is, of de verlengingsknop focus kan krijgen en of de focus na het verlengen van de sessie terugkeert naar de juiste locatie in het formulier.
7. Test carrousel- en mediatiming: Identificeer automatisch doorschuivende carrousels. Navigeer met Tab naar de carrousel. Controleer of er een pauze- of stopknop aanwezig is die zonder muis bereikbaar is. Activeer deze en controleer of het doorschuiven stopt. Als de carrousel na gebruikersinteractie hervat, controleer dan dat dit niet automatisch gebeurt.
8. Controleer toepasbaarheid van uitzonderingen: Bepaal voor elke gevonden tijdslimiet of de real-time-, essentiële of 20-uur-uitzondering van toepassing is. Documenteer je redenering. Als geen van de uitzonderingen van toepassing is en er geen aanpassingsmechanisme bestaat, noteer dit dan als een schending van WCAG 2.2.1.

Hoe te Herstellen

Sessietime-out Zonder Waarschuwing — Onjuist

<!-- Session expires silently after 5 minutes; page reloads with no warning -->
<script>
  setTimeout(function() {
    window.location.href = '/session-expired';
  }, 300000);
</script>

Sessietime-out Met Waarschuwing en Verlenging — Juist

<!-- Warn user 60 seconds before expiry; offer extension; announce via live region -->
<div
  id='session-warning'
  role='alertdialog'
  aria-modal='true'
  aria-labelledby='warning-title'
  aria-describedby='warning-desc'
  hidden
>
  <h2 id='warning-title'>Your session is about to expire</h2>
  <p id='warning-desc'>
    Your session will expire in <span id='countdown'>60</span> seconds.
    Select "Stay logged in" to continue your session.
  </p>
  <button id='extend-btn' type='button'>Stay logged in</button>
  <button id='logout-btn' type='button'>Log out now</button>
</div>

<script>
  var SESSION_DURATION = 300000; // 5 minutes
  var WARNING_BEFORE   = 60000;  // warn 60 seconds before
  var sessionTimer, warningTimer, countdownInterval;

  function startSessionTimer() {
    warningTimer = setTimeout(showWarning, SESSION_DURATION - WARNING_BEFORE);
    sessionTimer = setTimeout(expireSession, SESSION_DURATION);
  }

  function showWarning() {
    var dialog = document.getElementById('session-warning');
    dialog.hidden = false;
    document.getElementById('extend-btn').focus(); // move focus to dialog
    var seconds = 60;
    countdownInterval = setInterval(function() {
      seconds--;
      document.getElementById('countdown').textContent = seconds;
      if (seconds <= 0) clearInterval(countdownInterval);
    }, 1000);
  }

  function extendSession() {
    clearTimeout(sessionTimer);
    clearTimeout(warningTimer);
    clearInterval(countdownInterval);
    document.getElementById('session-warning').hidden = true;
    startSessionTimer();
    // Return focus to last active element
  }

  function expireSession() {
    window.location.href = '/session-expired';
  }

  document.getElementById('extend-btn').addEventListener('click', extendSession);
  document.getElementById('logout-btn').addEventListener('click', expireSession);
  startSessionTimer();
</script>

Automatisch Doorschuivende Carrousel Zonder Bediening — Onjuist

<!-- Slides advance every 4 seconds; no pause control; no keyboard access -->
<div class='carousel'>
  <div class='slide active'>Slide 1 content</div>
  <div class='slide'>Slide 2 content</div>
  <div class='slide'>Slide 3 content</div>
</div>

Automatisch Doorschuivende Carrousel Met Pauzeknop — Juist

<!-- Pause button stops auto-advance; button label updates to reflect state -->
<section aria-roledescription='carousel' aria-label='Featured announcements'>
  <div aria-live='off' aria-atomic='true'>
    <div class='slide active' role='group' aria-roledescription='slide' aria-label='Slide 1 of 3'>
      Slide 1 content
    </div>
    <div class='slide' role='group' aria-roledescription='slide' aria-label='Slide 2 of 3'>
      Slide 2 content
    </div>
    <div class='slide' role='group' aria-roledescription='slide' aria-label='Slide 3 of 3'>
      Slide 3 content
    </div>
  </div>
  <button id='carousel-pause' type='button' aria-pressed='false'>
    Pause slideshow
  </button>
</section>

<script>
  var paused = false;
  var btn = document.getElementById('carousel-pause');
  btn.addEventListener('click', function() {
    paused = !paused;
    btn.setAttribute('aria-pressed', paused.toString());
    btn.textContent = paused ? 'Play slideshow' : 'Pause slideshow';
    // toggle the carousel's auto-advance logic accordingly
  });
</script>

Getimede Afreken-aftelling Zonder Verlenging — Onjuist

<!-- 10-minute checkout lock; no extension offered; not an essential exception -->
<p>Your items are reserved for: <span id='timer'>10:00</span></p>
<!-- Timer expires, cart is cleared silently -->

Getimede Afreken-aftelling Met Verlengingsoptie — Juist

<!-- Warn before expiry and offer a one-click extension -->
<p>
  Your items are reserved for:
  <span id='timer' aria-live='polite' aria-atomic='true'>10:00</span>
</p>
<div id='extend-notice' hidden role='alert'>
  <p>Your reservation expires in 2 minutes.</p>
  <button type='button' id='extend-checkout'>Give me more time</button>
</div>
<!--
  When timer reaches 2:00, reveal #extend-notice.
  Clicking the button resets the reservation timer via an API call.
  aria-live='alert' ensures screen readers announce the warning immediately.
-->

Veelvoorkomende Fouten

• Een time-outwaarschuwing tonen zonder toetsenbordfocus te beheren: De waarschuwingsdialoog verschijnt visueel, maar de focus wordt er nooit naartoe verplaatst, waardoor gebruikers die alleen het toetsenbord of een schermlezer gebruiken nooit ontdekken dat ze de sessie kunnen verlengen voordat deze verloopt.
• Minder dan 20 seconden geven om op een time-outwaarschuwing te reageren: Een waarschuwing “Session expiring” slechts 10 seconden voor het uitloggen tonen voldoet niet aan het criterium, dat vereist dat er ten minste 20 seconden beschikbaar zijn voor de verlengingsactie.
• role='alert' gebruiken op een time-outdialoog die interactie vereist: Een alert-rol is bedoeld voor aankondigingen alleen-lezen; een dialoog die gebruikersinvoer vereist, moet role='alertdialog' gebruiken met aria-modal='true' en aria-labelledby, zodat schermlezers deze behandelen als een modal die een reactie vereist.
• De essentiële uitzondering claimen voor een standaard e-commerce-winkelmandtimer: Het reserveren van items in een winkelmand voor 10 minuten is een zakelijke gemaksoverweging, geen werkelijk essentiële activiteit waarbij het meten van snelheid het doel is. De essentiële uitzondering hier toepassen is onjuist; een verlengingsmechanisme is vereist.
• Een carrousel automatisch laten doorschuiven zonder zichtbare, met het toetsenbord bereikbare pauzeknop: Een pauzeknop toevoegen die alleen zichtbaar is bij hover, of die ontbreekt in de Tab-volgorde, voldoet niet aan het criterium. De bediening moet bereikbaar zijn zonder aanwijsapparaat.
• De time-outklok resetten bij elke muisbeweging maar niet bij toetsenbordgebeurtenissen: JavaScript dat de inactiviteitstimer verlengt bij mousemove-gebeurtenissen maar keydown- of focus-gebeurtenissen negeert, laat sessies stilletjes verlopen voor gebruikers die uitsluitend het toetsenbord gebruiken en actief op de pagina werken.
• De sessie verlengen via een volledige paginavernieuwing: Wanneer een gebruiker op “Stay logged in” klikt, wist het herladen van de pagina alle gegevens die de gebruiker in formulieren had ingevoerd. De verlenging moet plaatsvinden via een API-aanroep of cookie-vernieuwing op de achtergrond, waarbij de DOM-status behouden blijft.
• setTimeout-waarden gebruiken die niet configureerbaar zijn of niet aan de gebruiker worden aangeboden: Een sessieduur van vijf minuten hardcoderen zonder UI-bediening waarmee de gebruiker een langere duur kan kiezen, schendt het criterium tenzij een van de drie aanpassingsmechanismen (uitschakelen, aanpassen of verlengen) beschikbaar is.
• Verzuimen de time-outflow met echte ondersteunende technologieën te testen vóór lancering: Ontwikkelaars die alleen met een muis testen, merken mogelijk niet dat de waarschuwingsdialoog ontoegankelijk is voor schermlezergebruikers, omdat testen met zicht niet onthult dat de focus niet goed wordt beheerd.
• Aannemen dat ingesloten widgets van derden automatisch voldoen: Betalingsverwerkers, livechat-widgets en boekingsengines die via iframes of scripts zijn ingesloten, leggen vaak hun eigen tijdslimieten op. De verantwoordelijkheid voor WCAG-conformiteit van de volledige pagina — inclusief ingesloten content die je beheert — ligt bij de eigenaar van de pagina.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidentiële Circulaire 2025/10, gepubliceerd in Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte webtoegankelijkheidseisen vast die zijn afgestemd op WCAG 2.2 Niveau AA voor een brede reeks publieke en private entiteiten die digitale diensten in Turkije aanbieden. WCAG 2.2.1 Timing Adjustable is een criterium op Niveau A, wat betekent dat het zich op de fundamentele laag van conformiteit bevindt — het is een van de eerste vereisten waaraan betrokken entiteiten moeten voldoen.

Volgens de circulaire moeten publieke instellingen en agentschappen — waaronder ministeries, gemeenten, universiteiten en staatsbedrijven — binnen één jaar na de publicatiedatum van de circulaire volledige conformiteit bereiken. Entiteiten in de private sector die onder de regeling vallen, hebben een termijn van twee jaar om te voldoen. De reikwijdte voor de private sector is expliciet breed: deze omvat e-commerceplatforms, banken en financiële instellingen, particuliere ziekenhuizen en zorgaanbieders, telecombedrijven met 200,000 of meer abonnees, reisbureaus, particuliere personenvervoerders en particuliere scholen die opereren onder een vergunning van het Ministry of National Education (MoNE).

Voor organisaties in deze categorieën is een schending van WCAG 2.2.1 niet slechts een tekortkoming ten opzichte van best practices — het is een juridische non-conformiteit die kan leiden tot toezicht door toezichthouders, klachten via officiële kanalen en reputatieschade. Denk aan de specifieke bedrijfsflows die deze overtreding het meest waarschijnlijk veroorzaken: een e-commerce-afrekenproces met een getimede winkelmandreservering, een online bankiersessie die stilletjes verloopt terwijl een klant een betalingsformulier invult, een ziekenhuisafsprakensysteem dat verloopt voordat een gebruiker met motorische beperking zijn registratie kan voltooien, of een selfserviceportaal van een telecomaanbieder dat gebruikers automatisch uitlogt tijdens een contractbeheerflow. Elk van deze is een plausibel faalscenario binnen een entiteitstype dat expliciet in de circulaire wordt genoemd.

Organisaties moeten naleving van WCAG 2.2.1 niet zien als een technisch afvinkvakje, maar als een ontwerpeis die op architectuurniveau moet worden aangepakt — in sessiebeheerbeleid, inkoopvereisten voor widgets van derden en standaarden voor UI-componenten — in plaats van achteraf te worden aangebracht. Auditprogramma’s moeten handmatige tests van alle getimede interacties omvatten, niet alleen geautomatiseerde scans, juist omdat geautomatiseerde tools deze categorie overtredingen niet kunnen detecteren zonder menselijke observatie.