WCAG 2.1.4: Sneltoetsen met tekentoetsen

Wat Deze Regel Betekent

WCAG 2.1.4 — Sneltoetsen met teken-toetsen is een succescriterium op Niveau A dat is geïntroduceerd in WCAG 2.1. Het behandelt een specifiek maar ernstig toegankelijkheidsrisico: wanneer een webapplicatie sneltoetsen toewijst die bestaan uit één enkele afdrukbare teken-toets — een letter, cijfer, leesteken of symbool — zonder dat een modificatietoets zoals Ctrl, Alt, Meta of Shift tegelijk vereist is.

Het criterium stelt dat als een sneltoets in content wordt geïmplementeerd met slechts één enkele teken-toets, ten minste één van de volgende punten waar moet zijn:

• Uitschakelen: Er is een mechanisme beschikbaar waarmee de gebruiker de sneltoets volledig kan uitschakelen.
• Hertoewijzen: Er is een mechanisme beschikbaar waarmee de gebruiker de sneltoets kan hertoewijzen zodat één of meer niet-afdrukbare modificatietoetsen worden gebruikt (zoals Ctrl of Alt).
• Alleen actief bij focus: De sneltoets voor een gebruikersinterfacecomponent is alleen actief wanneer die component focus heeft.

Een sneltoets met één teken-toets is een sneltoets die wordt geactiveerd door het indrukken van één enkele toets die een afdrukbaar teken produceert — bijvoorbeeld het indrukken van G om een galerij te openen, het indrukken van / om een zoekbalk te focussen, of het indrukken van N om een nieuw bericht op te stellen. Deze verschillen fundamenteel van sneltoetsen zoals Ctrl+S of Alt+F4, die een niet-afdrukbare modificatietoets vereisen en daarom buiten de reikwijdte van dit criterium vallen.

Een sneltoets voldoet aan dit criterium als de applicatie ofwel: (1) een instellingen- of voorkeurenpagina biedt waar sneltoetsen met één toets kunnen worden uitgeschakeld of gewijzigd in combinaties met meerdere toetsen; (2) automatisch hertoewijst naar sneltoetsen op basis van modificatietoetsen; of (3) de sneltoets alleen activeert wanneer het triggerende element zelf toetsenbordfocus heeft — wat betekent dat het indrukken van de toets terwijl de focus elders is niets doet.

Een sneltoets voldoet niet als een toetsaanslag met één teken op elk moment een globale actie activeert, ongeacht welk element focus heeft, en er geen manier is voor de gebruiker om deze uit te schakelen of te wijzigen. Een veelvoorkomend praktijkvoorbeeld is een single-page applicatie die een navigatieactie uitvoert wanneer de gebruiker een lettertoets indrukt, zelfs terwijl die een tekstveld invult of tekst dicteert.

Het criterium bevat één belangrijke officiële uitzondering: het is niet van toepassing wanneer de sneltoets alleen actief is terwijl een specifieke component focus heeft. Een voorbeeld is een aangepaste dropdown-widget die naar lettertoetsen luistert alleen wanneer de dropdown zelf geopend en gefocust is; dit is acceptabel omdat focusbeperking het risico op onbedoelde activatie beperkt.

Waarom Het Belangrijk Is

Dit criterium bestaat primair om twee groepen gebruikers te beschermen, hoewel de voordelen verder reiken.

Gebruikers van spraakbesturing worden het meest direct getroffen. Mensen met motorische beperkingen bedienen hun computer vaak volledig via spraakherkenningssoftware zoals Dragon NaturallySpeaking (nu Dragon Professional). Bij het dicteren van tekst of geven van spraakcommando’s genereren deze tools toetsaanslagen die onbedoeld sneltoetsen met één teken op de actieve webpagina kunnen activeren. Stel je een gebruiker voor die een medisch formulier dicteert en “next” zegt — als de applicatie overal naar de letter N luistert, kan deze weg navigeren van het formulier, waardoor het werk van de gebruiker verloren gaat. Volgens de CDC leven ongeveer 61 miljoen volwassenen in de Verenigde Staten met een beperking, en een aanzienlijk deel is afhankelijk van alternatieve invoermethoden, waaronder spraakherkenning.

Motorisch beperkte gebruikers die gebruikmaken van schakelbediening, sip-and-puff-apparaten of uitsluitend toetsenbordnavigatie lopen ook risico. Deze gebruikers kunnen toetsen per ongeluk indrukken of langs meerdere toetsen rollen terwijl ze een doel proberen te bereiken. Een enkele verkeerde toetsaanslag die een onomkeerbare actie activeert — zoals het archiveren van een e-mail, het verwijderen van een bestand of het verzenden van een formulier — kan aanzienlijke frustratie en dataverlies veroorzaken.

Gebruikers met cognitieve beperkingen kunnen eveneens schade ondervinden. Gebruikers met aandachtsstoornissen of gebruikers die niet vertrouwd zijn met een interface kunnen toetsen experimenteel indrukken om de pagina te verkennen, zich er niet van bewust dat sneltoetsen met één teken actief zijn. Onverwachte navigaties of statuswijzigingen verhogen de cognitieve belasting en desoriëntatie.

Beschouw dit praktijkvoorbeeld: een Turkse e-commerceplatform implementeert sneltoetsen met één toets voor power users — het indrukken van C om naar het winkelwagentje te gaan, het indrukken van F om naar favorieten te gaan. Een gebruiker met spraakbesturing probeert het verzendadres in een formulierveld te dicteren. Terwijl die “Caddesi” (het Turkse woord voor “straat”) zegt, genereert de spraaksoftware de letter C voordat de focus volledig het invoerveld binnenkomt, waardoor navigatie naar de winkelwagenpagina wordt geactiveerd. Het gedeeltelijk ingevoerde adres gaat verloren. De gebruiker moet opnieuw beginnen, en als de ervaring zich herhaalt, kan die de site volledig verlaten.

Los van toegankelijkheid verbetert het oplossen van dit criterium de algemene bruikbaarheid. Het aanbieden van een UI voor het aanpassen van sneltoetsen is een signaal van een volwassen product dat de gebruiker respecteert. Het kan ook het aantal supporttickets verminderen van gefrustreerde gebruikers die per ongeluk sneltoetsen activeren.

Gerelateerde Axe-core Regels

WCAG 2.1.4 vereist handmatige tests omdat geautomatiseerde tools niet betrouwbaar alle sneltoetsen met één teken kunnen detecteren of kunnen verifiëren of er een mechanisme voor hertoewijzing/uitschakeling bestaat. Dit is waarom automatisering tekortschiet en waar testers handmatig op moeten letten:

• Geen speciale axe-core regel (handmatige controle vereist): Axe-core en Lighthouse hebben geen geautomatiseerde regel die specifiek sneltoetsen met één teken markeert. De reden is architectonisch: het gedrag van sneltoetsen wordt geïmplementeerd in JavaScript-eventlisteners (keydown, keyup, keypress), en statische DOM-analyse kan niet bepalen welke actie een bepaalde toetsaanslag zal activeren, of die actie globaal of focus-gebonden is, of dat er een gebruikersgericht mechanisme voor uitschakeling/hertoewijzing bestaat. Een tool zou toetsaanslagen voor alle mogelijke tekeninvoer moeten simuleren en de resulterende statuswijzigingen in de applicatie moeten observeren — een combinatorisch dure en contextafhankelijke taak die de huidige mogelijkheden van geautomatiseerd testen overstijgt.
• Inspectie van eventlisteners (gedeeltelijke automatisering): Browser DevTools kan eventlisteners opsommen die zijn gekoppeld aan elementen als document, window of body. Als een site een keydown-listener koppelt aan document en inspectie van de broncode onthult logica die op één teken matcht, is dat een sterk signaal dat handmatige verificatie vereist. De tool kan echter niet zelfstandig bepalen of het resulterende gedrag een sneltoets vormt of dat er een uitschakelmechanisme aanwezig is.
• Framework-specifieke sneltoetsbibliotheken: Veel React-, Vue- of Angular-applicaties gebruiken bibliotheken zoals react-hotkeys-hook, tinykeys of Mousetrap die globale sneltoetsen registreren. Een handmatige audit moet controleren op deze afhankelijkheden in de paginabron of het netwerk-tabblad en vervolgens elke geregistreerde sneltoets testen aan de hand van de eisen van het criterium.

Hoe te Testen

1. Controleer de applicatie op bekende sneltoetsen met één teken: Lees beschikbare documentatie, helppagina’s of dialoogvensters met sneltoetsoverzichten (vaak geopend met ? of toegankelijk via een Help-menu). Noteer alle gedocumenteerde sneltoetsen die één teken gebruiken zonder modificatietoets.
2. Inspecteer JavaScript-eventlisteners: Open Chrome DevTools of Firefox DevTools, ga naar het tabblad Elements of Sources en gebruik het tabblad Event Listeners om listeners op document, window en body te inspecteren. Zoek naar handlers voor keydown, keyup of keypress. Vouw de handler uit en lees de broncode om te zien of toetsen met één teken worden getest zonder controles op modificatietoetsen (d.w.z. de code controleert event.key === 'n' zonder ook event.ctrlKey || event.metaKey || event.altKey te controleren).
3. Test sneltoetsen terwijl de focus in een tekstinvoer staat: Klik in een tekstveld, zoekvak of textarea. Druk vervolgens op elke sneltoets met één teken die je hebt geïdentificeerd. Als de sneltoets wordt geactiveerd (navigatie vindt plaats, een actie wordt uitgevoerd, de status verandert), is dat een fout — de sneltoets is niet focus-gebonden en is actief zelfs wanneer de gebruiker typt.
4. Test met NVDA + Firefox: Schakel NVDA Browse-modus in (Insert+Spatie om te wisselen). In Browse-modus gebruikt NVDA navigatietoetsen met één letter (H voor headings, B voor buttons, enz.). Start de geteste webapplicatie. Schakel over naar Focus-modus (Insert+Spatie) en dicteer of typ tekst. Controleer dat de eigen sneltoetsen met één teken van de pagina niet conflicteren met de toetsaanslagen van NVDA in Browse-modus en dat er geen onbedoelde acties worden geactiveerd.
5. Test met JAWS + Chrome: JAWS gebruikt op vergelijkbare wijze snelnavigatie met één letter. Start de applicatie, navigeer via de virtuele cursor van JAWS en controleer dat de sneltoetsen van de applicatie niet onverwacht worden geactiveerd terwijl JAWS toetsaanslagen verwerkt.
6. Test met VoiceOver + Safari (macOS): Schakel VoiceOver in (Cmd+F5). Gebruik VO+Shift+Pijl-omlaag om met contentgebieden te interageren. Controleer dat lettertoets-sneltoetsen op de pagina niet interfereren met navigatiecommando’s van VoiceOver.
7. Simuleer spraakbesturing: Als Dragon NaturallySpeaking of Windows Speech Recognition beschikbaar is, dicteer tekst in een formulierveld terwijl de applicatie open is. Spreek veelvoorkomende woorden en zinnen die beginnen met letters die als sneltoets worden gebruikt. Controleer dat er geen onbedoelde acties worden geactiveerd.
8. Controleer het mechanisme voor uitschakelen of hertoewijzen: Als sneltoetsen met één teken bestaan, zoek dan de instellingen- of voorkeuren-UI waarmee ze kunnen worden uitgeschakeld of hertoewijzen. Bevestig dat deze uitsluitend met het toetsenbord bereikbaar is en correct functioneert. Test dat na het uitschakelen van een sneltoets het indrukken van het teken de actie niet langer activeert.

Hoe te Oplossen

Globale sneltoets met één teken zonder modificatiecontrole — Onjuist

<!-- JavaScript gekoppeld aan document wordt bij elke 'n'-toetsaanslag globaal geactiveerd -->
<script>
document.addEventListener('keydown', function(event) {
  if (event.key === 'n') {
    // Navigeer naar nieuw bericht opstellen
    openComposeWindow();
  }
});
</script>

Globale sneltoets met één teken — Juist: voeg vereiste modificatietoets en een uitschakelknop toe

<!-- Juiste aanpak 1: Vereis een modificatietoets (Ctrl+N) om onbedoelde activatie te voorkomen -->
<script>
document.addEventListener('keydown', function(event) {
  // Alleen activeren wanneer Ctrl of Meta (Cmd op Mac) ook is ingedrukt
  if ((event.ctrlKey || event.metaKey) && event.key === 'n') {
    openComposeWindow();
  }
});
</script>

<!-- Juiste aanpak 2: Als een sneltoets met één teken vereist is, bied een uitschakelknop -->
<button type='button' id='toggle-shortcuts' aria-pressed='true'>
  Keyboard shortcuts enabled
</button>
<script>
let shortcutsEnabled = true;
document.getElementById('toggle-shortcuts').addEventListener('click', function() {
  shortcutsEnabled = !shortcutsEnabled;
  this.setAttribute('aria-pressed', shortcutsEnabled.toString());
  this.textContent = shortcutsEnabled ? 'Keyboard shortcuts enabled' : 'Keyboard shortcuts disabled';
});

document.addEventListener('keydown', function(event) {
  if (!shortcutsEnabled) return; // Respecteer gebruikersvoorkeur
  if (event.key === 'n') {
    openComposeWindow();
  }
});
</script>

Sneltoets actief binnen een gefocuste widget — Onjuist

<!-- Sneltoets luistert op het volledige document, niet beperkt tot de widget -->
<div id='autocomplete-list' role='listbox'>
  <div role='option'>Istanbul</div>
  <div role='option'>Ankara</div>
</div>
<script>
// BUG: gekoppeld aan document, wordt geactiveerd zelfs wanneer autocomplete geen focus heeft
document.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') selectHighlightedOption();
});
</script>

Sneltoets actief binnen een gefocuste widget — Juist: scope de listener tot de widget

<!-- Juist: listener staat op het widgetelement; sneltoets wordt alleen geactiveerd wanneer het focus heeft -->
<div id='autocomplete-list' role='listbox' tabindex='0'>
  <div role='option'>Istanbul</div>
  <div role='option'>Ankara</div>
</div>
<script>
var widget = document.getElementById('autocomplete-list');
// Listener op de widget zelf: Enter wordt alleen geactiveerd wanneer de listbox focus heeft
widget.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') selectHighlightedOption();
});
</script>

Geen voor de gebruiker toegankelijke UI voor hertoewijzing — Onjuist

<!-- Applicatie registreert sneltoetsen met een bibliotheek maar biedt geen instellingenpagina -->
<!-- Gebruiker kan 'g' (ga naar galerij) of 'c' (ga naar winkelwagen) niet wijzigen of uitschakelen -->
<script src='hotkeys.min.js'></script>
<script>
hotkeys('g', function() { goToGallery(); });
hotkeys('c', function() { goToCart(); });
</script>

Geen voor de gebruiker toegankelijke UI voor hertoewijzing — Juist: voeg een toegankelijk instellingenpaneel toe

<!-- Instellingenpaneel toegankelijk via toetsenbord; laat gebruiker alle sneltoetsen met één teken in- of uitschakelen -->
<nav aria-label='Accessibility settings'>
  <button type='button' id='open-shortcut-settings'>Keyboard shortcut settings</button>
</nav>

<dialog id='shortcut-settings-dialog' aria-labelledby='dialog-title'>
  <h2 id='dialog-title'>Keyboard Shortcuts</h2>
  <label>
    <input type='checkbox' id='enable-single-char' checked />
    Enable single-character keyboard shortcuts (G, C, N...)
  </label>
  <p>Disable this if you use speech recognition software or experience accidental activations.</p>
  <button type='button' id='close-dialog'>Save and close</button>
</dialog>

<script src='hotkeys.min.js'></script>
<script>
var checkbox = document.getElementById('enable-single-char');

function applyShortcuts() {
  if (checkbox.checked) {
    hotkeys('g', function() { goToGallery(); });
    hotkeys('c', function() { goToCart(); });
  } else {
    hotkeys.unbind('g');
    hotkeys.unbind('c');
  }
}

applyShortcuts();
checkbox.addEventListener('change', applyShortcuts);

document.getElementById('open-shortcut-settings').addEventListener('click', function() {
  document.getElementById('shortcut-settings-dialog').showModal();
});
document.getElementById('close-dialog').addEventListener('click', function() {
  document.getElementById('shortcut-settings-dialog').close();
});
</script>

Veelvoorkomende Fouten

• Sneltoetsen registreren op document of window zonder te controleren of een invoerelement momenteel focus heeft: Zelfs als er een uitschakelmechanisme bestaat, vergeten veel implementaties document.activeElement te controleren en de sneltoets te onderdrukken wanneer de gebruiker zich in een <input>, <textarea> of contenteditable-element bevindt, wat leidt tot interferentie met normaal typen.
• De ?-sneltoets (help openen) als uitzondering behandelen: Het vraagteken is een afdrukbaar teken en een sneltoets met één teken. Het is niet uitgezonderd van dit criterium, tenzij het focus-gebonden is of er een mechanisme voor uitschakelen/hertoewijzing bestaat.
• Sneltoetsen alleen uitschakelen in tekstinvoervelden maar niet in contenteditable-regio’s of richtext-editors: Gebruikers van spraakbesturing dicteren vaak in contenteditable-elementen die door richtext-editors worden gebruikt (zoals in CMS-platforms). Het niet onderdrukken van globale sneltoetsen in deze contexten schendt het criterium nog steeds.
• De sneltoetsvoorkeur van de gebruiker alleen in sessiegeheugen opslaan: Als de gebruiker sneltoetsen uitschakelt en vervolgens de pagina ververst, moet de voorkeur worden bewaard (in localStorage of een gebruikersprofielinstelling), zodat die niet bij elk bezoek sneltoetsen opnieuw hoeft uit te schakelen.
• De UI voor sneltoetsinstellingen zelf ontoegankelijk maken: De optie voor uitschakelen/hertoewijzing diep in een menu plaatsen dat niet met het toetsenbord bereikbaar is, of een aangepaste schakelaar gebruiken zonder een correct role='switch' en aria-checked, betekent dat het oplossingsmechanisme onbruikbaar is voor de gebruikers voor wie het bedoeld is.
• Aannemen dat alleen lettertoetsen relevant zijn: Cijfertoetsen (1–9), leestekentoetsen (/, ., komma, puntkomma) en symbooltoetsen (#, @, !) zijn allemaal afdrukbare tekens. Sneltoetsen met één toets die deze tekens gebruiken vallen evenzeer onder het criterium.
• Niet documenteren welke sneltoetsen bestaan: Zelfs als er een uitschakelmechanisme aanwezig is, kunnen gebruikers het niet effectief gebruiken als ze niet weten welke sneltoetsen actief zijn. Het is sterk aan te bevelen een zichtbaar, via het toetsenbord toegankelijk sneltoetsoverzicht te bieden (zoals een dialoogvenster dat via een Help-knop wordt geopend).
• Een standaardconfiguratie van een sneltoetsbibliotheek gebruiken die globaal bindt zonder de documentatie te lezen: Bibliotheken zoals Mousetrap, Hotkeys.js en tinykeys binden standaard aan de globale scope. Ontwikkelaars gebruiken ze vaak zonder documentatie te lezen over het beperken van de scope of vereisten voor modificatietoetsen, en creëren zo onbedoeld schendingen van het criterium op grote schaal.
• Niet testen met spraakherkenning vóór lancering: Teams die Dragon NaturallySpeaking niet in hun QA-toolkit hebben, ontdekken conflicten met sneltoetsen met één teken vaak pas na livegang, wanneer gebruikers met spraakbesturing problemen melden.
• Denken dat de sneltoets is vrijgesteld omdat die “optioneel” is of “voor power users”: Het criterium is van toepassing op alle sneltoetsen met één teken, ongeacht of ze als geavanceerde functies worden gepresenteerd. De optionaliteit van de functie ontslaat niet van de conformiteitseis.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidential Circular 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte toegankelijkheidseisen voor web en mobiel vast die zijn afgestemd op WCAG 2.2. WCAG 2.1.4 — Sneltoetsen met teken-toetsen is een succescriterium op Niveau A, wat het in de hoogste prioriteitscategorie van verplichtingen onder de circulaire plaatst.

De circulaire bestrijkt een breed scala aan entiteiten die in Turkije actief zijn. Publieke instellingen — waaronder ministeries, gemeenten, staatsuniversiteiten, openbare ziekenhuizen en overheidsinstanties — moeten binnen één jaar na de publicatiedatum van de circulaire volledige conformiteit op Niveau A bereiken. Entiteiten in de private sector in de gedekte categorieën krijgen een tweejarige nalevingstermijn. Gedekte private entiteiten omvatten e-commerceplatforms, banken en financiële instellingen, ziekenhuizen en zorgaanbieders, telecombedrijven met 200,000 of meer abonnees, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die opereren onder autorisatie van het Ministry of National Education (MoNE).

Voor deze organisaties is het niet naleven van WCAG 2.1.4 niet slechts een kwestie van best practices — het is een wettelijke verplichting. Een Turks e-commercewebsite die sneltoetsen met één teken voor productnavigatie implementeert zonder een uitschakelmechanisme, of een onlineportaal van een Turkse bank dat lettertoets-sneltoetsen gebruikt in de transactiestroom, zou rechtstreeks in strijd zijn met de vereisten van de circulaire.

In de praktijk zouden compliance-teams bij gedekte entiteiten hun JavaScript-codebases en eventuele bibliotheken voor widgets van derden moeten auditen op globaal geregistreerde sneltoetsen met één teken als een afzonderlijke taak tijdens hun WCAG 2.2 Niveau A-herstelprojecten. Omdat dit criterium handmatige tests vereist, zullen geautomatiseerde toegankelijkheidsscans alleen geen schendingen aan het licht brengen — een gerichte testronde met toetsenbord en spraakbesturing is vereist. Organisaties die contentmanagementsystemen of front-endframeworks gebruiken, moeten naast eigen applicatiecode ook platformbrede implementaties van sneltoetsen beoordelen (bijvoorbeeld standaard sneltoetsen in CMS-beheer die zichtbaar zijn op klantgerichte pagina’s).

De overlay-SDK van Accsible ondersteunt gedekte entiteiten door een voor gebruikers toegankelijke toegankelijkheidsvoorkeurenpanel te bieden dat een schakelaar voor het uitschakelen van sneltoetsen aan eindgebruikers kan tonen, waardoor organisaties kunnen voldoen aan de eis van WCAG 2.1.4 voor een “mechanisme om uit te schakelen” zonder een volledige refactor van de codebase. Dit is bijzonder waardevol voor organisaties die legacy-applicaties beheren waarbij het wijzigen van onderliggende JavaScript-logica voor sneltoetsen veel middelen vergt. Organisaties moeten er echter rekening mee houden dat uitsluitend vertrouwen op een overlay voor naleving geen vervanging is voor het aanpakken van de onderliggende implementaties van sneltoetsen, en dat een gelaagde aanpak die overlaytools combineert met herstel in de broncode het meest robuuste pad naar conformiteit onder de presidentiële circulaire biedt.