WCAG 2.1.4: Kortkommandon med teckenknappar

Vad den här regeln innebär

WCAG 2.1.4 — Character Key Shortcuts är ett framgångskriterium på nivå A som introducerades i WCAG 2.1. Det tar upp en specifik men allvarlig tillgänglighetsrisk: när en webbapplikation tilldelar tangentbordsgenvägar som består av ett enda utskrivbart tecken — en bokstav, siffra, skiljetecken eller symbol — utan att kräva en modifierartangent som Ctrl, Alt, Meta eller Shift tillsammans med den.

Kriteriet anger att om en tangentbordsgenväg implementeras i innehåll med endast en enda teckentangent, måste minst ett av följande vara sant:

• Stäng av: En mekanism finns tillgänglig som gör det möjligt för användaren att stänga av genvägen helt.
• Omtilldela: En mekanism finns tillgänglig som gör det möjligt för användaren att tilldela om genvägen så att den använder en eller flera icke utskrivbara modifierartangenter (som Ctrl eller Alt).
• Aktiv endast vid fokus: Tangentbordsgenvägen för en användargränssnittskomponent är endast aktiv när den komponenten har fokus.

En tangentbordsgenväg med en enda teckentangent är en som aktiveras genom att trycka på en enda tangent som producerar ett utskrivbart tecken — till exempel att trycka på G för att öppna ett galleri, trycka på / för att fokusera en sökruta eller trycka på N för att skriva ett nytt meddelande. Dessa skiljer sig i grunden från genvägar som Ctrl+S eller Alt+F4, som kräver en icke utskrivbar modifierare och därför ligger utanför detta kriteriums räckvidd.

En genväg uppfyller detta kriterium om applikationen antingen: (1) tillhandahåller en sida för inställningar eller preferenser där enstaka tangentgenvägar kan inaktiveras eller ändras till fler-tangentkombinationer; (2) tilldelar om automatiskt till modifierarbaserade genvägar; eller (3) endast utlöser genvägen när det utlösande elementet självt har tangentbordsfokus — vilket innebär att om man trycker på tangenten medan fokus är någon annanstans händer ingenting.

En genväg misslyckas om ett enstaka teckentryck utlöser en global åtgärd när som helst oavsett vilket element som har fokus, och det inte finns något sätt för användaren att stänga av eller ändra den. Ett vanligt exempel i verkligheten är en single-page-applikation som utlöser en navigeringsåtgärd när användaren trycker på en bokstavstangent, även medan hen fyller i ett textfält eller dikterar text.

Kriteriet innehåller ett viktigt officiellt undantag: det gäller inte när genvägen endast är aktiv medan en specifik komponent har fokus. Till exempel är en anpassad rullgardinswidget som lyssnar efter bokstavstangenter endast när själva rullgardinsmenyn är öppen och har fokus acceptabel, eftersom fokusbegränsningen minskar risken för oavsiktlig aktivering.

Varför det är viktigt

Detta kriterium finns främst för att skydda två grupper av användare, även om dess fördelar sträcker sig längre.

Användare av röststyrning är de mest direkt påverkade. Personer med motoriska funktionsnedsättningar styr ofta sina datorer helt via röstigenkänningsprogram som Dragon NaturallySpeaking (numera Dragon Professional). När de dikterar text eller ger röstkommandon genererar dessa verktyg tangenttryckningar som oavsiktligt kan utlösa enstaka teckengenvägar på den aktiva webbsidan. Föreställ dig en användare som dikterar ett medicinskt formulär och säger ”next” — om applikationen lyssnar globalt efter bokstaven N kan den navigera bort från formuläret och förstöra användarens arbete. Enligt CDC lever cirka 61 miljoner vuxna i USA med en funktionsnedsättning, och en betydande andel är beroende av alternativa inmatningsmetoder, inklusive röstigenkänning.

Motoriskt funktionsnedsatta användare som använder switch-styrning, sug-och-blås-enheter eller enbart tangentbordsnavigering löper också risk. Dessa användare kan trycka på tangenter av misstag eller rulla över flera tangenter när de försöker nå ett mål. Ett enda feltryck som utlöser en oåterkallelig åtgärd — såsom att arkivera ett e‑postmeddelande, radera en fil eller skicka in ett formulär — kan orsaka betydande frustration och dataförlust.

Användare med kognitiva funktionsnedsättningar kan också skadas. Användare med uppmärksamhetsstörningar eller användare som är ovana vid ett gränssnitt kan trycka på tangenter experimentellt för att utforska sidan, utan att veta att enstaka teckengenvägar är aktiva. Oväntade navigeringar eller tillståndsändringar ökar den kognitiva belastningen och desorienteringen.

Överväg följande scenario från verkligheten: en turkisk e‑handelsplattform implementerar enstaka tangentgenvägar för avancerade användare — tryck på C för att gå till varukorgen, tryck på F för att gå till favoriter. En användare av röststyrning försöker diktera sin leveransadress i ett formulärfält. När hen säger ”Caddesi” (det turkiska ordet för ”gata”) genererar röstprogramvaran bokstaven C innan fokus helt har gått in i inmatningsfältet, vilket utlöser navigering till varukorgssidan. Den delvis ifyllda adressen går förlorad. Användaren måste börja om, och om upplevelsen upprepas kan hen överge webbplatsen helt.

Utöver tillgänglighet förbättrar åtgärder för detta kriterium den övergripande användbarheten. Att tillhandahålla ett användargränssnitt för anpassning av genvägar signalerar en mogen produkt som respekterar användaren. Det kan också minska supportärenden från frustrerade användare som oavsiktligt utlöser genvägar.

Relaterade Axe-core-regler

WCAG 2.1.4 kräver manuell testning eftersom automatiska verktyg inte pålitligt kan upptäcka alla tangentbordsgenvägar med enstaka tecken eller verifiera om en mekanism för ommappning/inaktivering finns. Här är varför automatisering inte räcker och vad testare måste leta efter manuellt:

• Ingen dedikerad axe-core-regel (manuell kontroll krävs): Axe-core och Lighthouse har ingen automatisk regel som specifikt flaggar tangentbordsgenvägar med enstaka tecken. Anledningen är arkitektonisk: beteendet för tangentbordsgenvägar implementeras i JavaScript-händelselyssnare (keydown, keyup, keypress), och statisk DOM-analys kan inte avgöra vilken åtgärd ett visst tangenttryck kommer att utlösa, om den åtgärden är global eller fokusbegränsad, eller om en användarvänd mekanism för inaktivering/ommappning finns. Ett verktyg skulle behöva simulera tangenttryckningar för alla möjliga teckeninmatningar och observera resulterande tillståndsändringar i applikationen — en kombinatoriskt kostsam och kontextberoende uppgift som överstiger nuvarande automatiserade testkapaciteter.
• Inspektion av händelselyssnare (delvis automatisering): Webbläsarens DevTools kan lista händelselyssnare som är kopplade till elementen document, window eller body. Om en webbplats kopplar en keydown-lyssnare till document och en inspektion av dess källkod avslöjar logik som matchar enstaka tecken, är detta en stark signal som kräver manuell verifiering. Verktyget kan dock inte på egen hand avgöra om det resulterande beteendet utgör en genväg eller om en inaktiveringsmekanism finns.
• Ramverksspecifika genvägsbibliotek: Många React-, Vue- eller Angular-applikationer använder bibliotek som react-hotkeys-hook, tinykeys eller Mousetrap som registrerar globala genvägar. En manuell granskning bör kontrollera om dessa beroenden finns i sidans källkod eller i nätverksfliken och sedan testa varje registrerad genväg mot kriteriets krav.

Hur man testar

1. Granska applikationen efter kända genvägar med enstaka tecken: Läs tillgänglig dokumentation, hjälpsidor eller referensdialoger för tangentbordsgenvägar (som ofta öppnas med ? eller är tillgängliga via en Hjälp-meny). Lista alla dokumenterade genvägar som använder ett enda tecken utan modifierartangent.
2. Inspektera JavaScript-händelselyssnare: Öppna Chrome DevTools eller Firefox DevTools, gå till panelen Elements eller Sources och använd fliken Event Listeners för att inspektera lyssnare på document, window och body. Leta efter keydown-, keyup- eller keypress-hanterare. Expandera och läs hanterarens källkod för att se om tangenter med enstaka tecken testas utan kontroll av modifierare (dvs. om koden kontrollerar event.key === 'n' utan att också kontrollera event.ctrlKey || event.metaKey || event.altKey).
3. Testa tangentbordsgenvägar när fokus är i en textinmatning: Klicka i ett textfält, en sökruta eller en textarea. Tryck sedan på varje genväg med enstaka tecken som du har identifierat. Om genvägen utlöses (navigering sker, en åtgärd triggas, tillstånd ändras) är det ett fel — genvägen är inte fokusbegränsad och är aktiv även när användaren skriver.
4. Testa med NVDA + Firefox: Aktivera NVDA Browse-läge (Insert+Space för att växla). I Browse-läge använder NVDA navigering med enstaka bokstäver (H för rubriker, B för knappar osv.). Starta den testade webbapplikationen. Växla till Focus-läge (Insert+Space) och diktera eller skriv text. Verifiera att sidans egna genvägar med enstaka tecken inte står i konflikt med NVDA:s tangenttryckningar i Browse-läge och att inga oavsiktliga åtgärder utlöses.
5. Testa med JAWS + Chrome: På liknande sätt använder JAWS snabbnavigering med enstaka bokstäver. Starta applikationen, navigera via JAWS virtuella markör och verifiera att applikationens genvägar inte utlöses oväntat medan JAWS bearbetar tangenttryckningar.
6. Testa med VoiceOver + Safari (macOS): Aktivera VoiceOver (Cmd+F5). Använd VO+Shift+Nedåtpil för att interagera med innehållsområden. Verifiera att bokstavstangentsgenvägar på sidan inte stör VoiceOver-navigeringskommandon.
7. Simulera röstinmatning: Om Dragon NaturallySpeaking eller Windows Speech Recognition finns tillgängligt, diktera text i ett formulärfält medan applikationen är öppen. Säg vanliga ord och fraser som börjar med bokstäver som används som genvägar. Verifiera att inga oavsiktliga åtgärder utlöses.
8. Verifiera mekanismen för att inaktivera eller tilldela om: Om genvägar med enstaka tecken finns, lokalisera inställnings- eller preferensgränssnittet som gör det möjligt att stänga av eller tilldela om dem. Bekräfta att det kan nås enbart med tangentbord och fungerar korrekt. Testa att efter att en genväg har inaktiverats utlöser inte längre tecknet åtgärden.

Hur man åtgärdar

Global genväg med enstaka tecken utan modifierarkontroll — Felaktig

<!-- JavaScript kopplat till document utlöses vid varje globalt 'n'-tryck -->
<script>
document.addEventListener('keydown', function(event) {
  if (event.key === 'n') {
    // Navigera till nytt meddelande
    openComposeWindow();
  }
});
</script>

Global genväg med enstaka tecken — Korrekt: lägg till krav på modifierare och en avstängningsknapp

<!-- Korrekt tillvägagångssätt 1: Kräv en modifierartangent (Ctrl+N) för att förhindra oavsiktlig aktivering -->
<script>
document.addEventListener('keydown', function(event) {
  // Utlös endast när Ctrl eller Meta (Cmd på Mac) också hålls ned
  if ((event.ctrlKey || event.metaKey) && event.key === 'n') {
    openComposeWindow();
  }
});
</script>

<!-- Korrekt tillvägagångssätt 2: Om en genväg med enstaka tecken krävs, tillhandahåll en avstängningsknapp -->
<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; // Respektera användarens preferens
  if (event.key === 'n') {
    openComposeWindow();
  }
});
</script>

Genväg aktiv inuti en fokuserad widget — Felaktig

<!-- Genvägen lyssnar på hela document, inte begränsad till widgeten -->
<div id='autocomplete-list' role='listbox'>
  <div role='option'>Istanbul</div>
  <div role='option'>Ankara</div>
</div>
<script>
// BUGG: kopplad till document, utlöses även när autocomplete inte har fokus
document.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') selectHighlightedOption();
});
</script>

Genväg aktiv inuti en fokuserad widget — Korrekt: begränsa lyssnaren till widgeten

<!-- Korrekt: lyssnaren sitter på widgetelementet; genvägen utlöses endast när det har fokus -->
<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');
// Lyssnare på widgeten själv: Enter utlöses endast när listboxen har fokus
widget.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') selectHighlightedOption();
});
</script>

Ingen användartillgänglig UI för ommappning — Felaktig

<!-- Applikationen registrerar genvägar med ett bibliotek men erbjuder ingen inställningssida -->
<!-- Användaren har inget sätt att ändra eller inaktivera 'g' (gå till galleri) eller 'c' (gå till varukorg) -->
<script src='hotkeys.min.js'></script>
<script>
hotkeys('g', function() { goToGallery(); });
hotkeys('c', function() { goToCart(); });
</script>

Ingen användartillgänglig UI för ommappning — Korrekt: lägg till en tillgänglig inställningspanel

<!-- Inställningspanel som kan nås via tangentbord; låter användaren slå av/på alla genvägar med enstaka tecken -->
<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>

Vanliga misstag

• Registrera genvägar på document eller window utan att kontrollera om ett inmatningselement för närvarande har fokus: Även om en inaktiveringsmekanism finns glömmer många implementationer att kontrollera document.activeElement och undertrycka genvägen när användaren befinner sig i ett <input>-, <textarea>- eller contenteditable-element, vilket leder till störningar i normal textinmatning.
• Behandla genvägen ? (öppna hjälp) som undantagen: Frågetecknet är ett utskrivbart tecken och en genväg med ett enda tecken. Det är inte undantaget från detta kriterium om det inte är fokusbegränsat eller om en mekanism för inaktivering/ommappning finns.
• Endast inaktivera genvägar i textinmatningar men inte i contenteditable-områden eller rich text-redigerare: Användare av röststyrning dikterar ofta i contenteditable-element som används av rich text-redigerare (som de i CMS-plattformar). Att inte undertrycka globala genvägar i dessa sammanhang bryter fortfarande mot kriteriet.
• Lagra användarens genvägspreferens endast i sessionsminnet: Om användaren inaktiverar genvägar och sedan uppdaterar sidan bör preferensen bevaras (i localStorage eller en användarprofilsinställning) så att hen inte behöver inaktivera genvägar vid varje besök.
• Göra själva gränssnittet för genvägsinställningar otillgängligt: Att placera alternativet för inaktivering/ommappning djupt i en meny som inte kan nås med tangentbord, eller använda en anpassad växlingswidget utan korrekt role='switch' och aria-checked, innebär att åtgärdsmekanismen är oanvändbar för just de användare den är avsedd att hjälpa.
• Anta att endast bokstavstangenter spelar roll: Siffer­tangenter (1–9), skiljetecken (/, ., komma, semikolon) och symboltangenter (#, @, !) är alla utskrivbara tecken. Genvägar med enstaka tangenter som använder dessa tecken omfattas lika mycket av kriteriet.
• Underlåta att dokumentera vilka genvägar som finns: Även om en inaktiveringsmekanism finns kan användare inte effektivt använda den om de inte vet vilka genvägar som är aktiva. Det rekommenderas starkt att tillhandahålla en synlig, tangentbordsåtkomlig referens för genvägar (till exempel en dialogruta som öppnas via en Hjälp-knapp).
• Använda standardkonfigurationen i ett genvägsbibliotek som binder globalt utan att läsa dess dokumentation: Bibliotek som Mousetrap, Hotkeys.js och tinykeys binder till globalt omfång som standard. Utvecklare använder dem ofta utan att läsa dokumentationen om begränsning av omfång eller krav på modifierare, och skapar därmed oavsiktligt kriterieöverträdelser i stor skala.
• Inte testa med röstigenkänning före lansering: Team som inte har Dragon NaturallySpeaking i sin QA-verktygslåda upptäcker ofta konflikter med genvägar med enstaka tecken först efter driftsättning, när användare av röststyrning rapporterar problem.
• Tro att eftersom genvägen är ”valfri” eller ”för avancerade användare” är den undantagen: Kriteriet gäller alla genvägar med enstaka tecken oavsett om de marknadsförs som avancerade funktioner. Att funktionen är valfri undantar den inte från kravet på överensstämmelse.

Relation till Turkiets tillgänglighetsreglering

Turkiets Presidential Circular 2025/10, publicerad i den officiella tidningen nr 32933 den 21 juni 2025, fastställer obligatoriska tillgänglighetskrav för webb och mobil i linje med WCAG 2.2. WCAG 2.1.4 — Character Key Shortcuts är ett framgångskriterium på nivå A, vilket placerar det i den högst prioriterade kategorin av skyldigheter enligt cirkuläret.

Cirkuläret omfattar ett brett spektrum av aktörer som är verksamma i Turkiet. Offentliga institutioner — inklusive ministerier, kommuner, statliga universitet, offentliga sjukhus och myndigheter — måste uppnå full överensstämmelse med nivå A inom ett år från cirkulärets publiceringsdatum. Privata aktörer i omfattade kategorier får ett tvåårigt fönster för efterlevnad. Omfattade privata aktörer inkluderar e‑handelsplattformar, banker och finansiella institutioner, sjukhus och vårdgivare, telekommunikationsföretag med 200,000 eller fler abonnenter, resebyråer, privata transportföretag och privatskolor som verkar med tillstånd från Ministry of National Education (MoNE).

För dessa organisationer är underlåtenhet att följa WCAG 2.1.4 inte bara en fråga om bästa praxis — det är en rättslig skyldighet. En turkisk e‑handelssajt som implementerar genvägar med enstaka tecken för produktbläddring utan en inaktiveringsmekanism, eller en turkisk banks nätportal som använder bokstavstangentsgenvägar i sitt transaktionsflöde, skulle stå i direkt strid med cirkulärets krav.

I praktiken bör efterlevnadsteam hos omfattade aktörer granska sina JavaScript-kodbaser och eventuella tredjepartswidgetbibliotek efter globalt registrerade genvägar med enstaka tecken som en separat uppgift under sina WCAG 2.2-nivå A-åtgärdsprojekt. Eftersom detta kriterium kräver manuell testning kommer automatiserade tillgänglighetsskanningar ensamma inte att avslöja överträdelser — en dedikerad testomgång med tangentbord och röstinmatning krävs. Organisationer som använder innehållshanteringssystem eller front-end-ramverk bör granska genvägsimplementationer på plattformsnivå (till exempel standardtangentbordsgenvägar i CMS-administration som exponeras på kundvända sidor) utöver egen applikationskod.

Accsible:s overlay-SDK hjälper omfattade aktörer genom att tillhandahålla en användartillgänglig panel för tillgänglighetspreferenser som kan exponera en avstängningsknapp för genvägar för slutanvändare, vilket hjälper organisationer att uppfylla kravet på en ”mekanism för att stänga av” i WCAG 2.1.4 utan att kräva fullständig omstrukturering av kodbasen. Detta är särskilt värdefullt för organisationer som hanterar äldre applikationer där det är resurskrävande att ändra underliggande JavaScript-logik för genvägar. Organisationer bör dock notera att enbart förlita sig på en overlay för efterlevnad inte ersätter behovet av att åtgärda underliggande genvägsimplementationer, och att en lagerbaserad strategi som kombinerar overlay-verktyg med åtgärder i källkoden ger den mest robusta vägen till överensstämmelse enligt presidentcirkuläret.