I'd like to propose a new failure technique for SC 2.1.1 Keyboard and SC 3.2.2 On Input.
Failure description
When a keydown or keyup handler checks for the Enter key (or other keys used as IME shortcuts) without guarding against IME composition, users who rely on an IME — such as those in CJK regions — experience broken behavior. Pressing Enter to confirm an IME candidate fires keydown, which accidentally triggers the application's action (e.g., form submission) before the user has finished composing their input.
- SC 2.1.1: The keyboard interface becomes unreliable for IME users, as the IME's own keyboard shortcuts collide with the application's shortcuts.
- SC 3.2.2: An unexpected change of context (e.g., form submission) is triggered by input that the user intended solely for the IME.
Failure example
// ❌ Failure — triggers during IME composition
inputElement.addEventListener("keydown", (event) => {
if (event.key === "Enter") submit();
});
Sufficient techniques to avoid this failure
// ✅ Option 1 — guard with isComposing (+ keyCode 229 for Safari)
inputElement.addEventListener("keydown", (event) => {
if (event.isComposing || event.keyCode === 229) return;
if (event.key === "Enter") submit();
});
// ✅ Option 2 — use the form submit event instead
formElement.addEventListener("submit", (event) => {
event.preventDefault();
submit();
});
The keyCode === 229 check is necessary to cover a known Safari bug where compositionend fires before keydown, causing isComposing to be false on the final confirmation keypress. MDN also recommends this workaround.
note: This bug has been fixed in a recent Safari version, but users on older versions remain affected. Therefore, adding || event.keyCode === 229 as a fallback is still recommended to ensure correct behavior across the full range of Safari versions in use.
References
I'd like to propose a new failure technique for SC 2.1.1 Keyboard and SC 3.2.2 On Input.
Failure description
When a
keydownorkeyuphandler checks for the Enter key (or other keys used as IME shortcuts) without guarding against IME composition, users who rely on an IME — such as those in CJK regions — experience broken behavior. PressingEnterto confirm an IME candidate fireskeydown, which accidentally triggers the application's action (e.g., form submission) before the user has finished composing their input.Failure example
Sufficient techniques to avoid this failure
The
keyCode === 229check is necessary to cover a known Safari bug wherecompositionendfires beforekeydown, causingisComposingto befalseon the final confirmation keypress. MDN also recommends this workaround.note: This bug has been fixed in a recent Safari version, but users on older versions remain affected. Therefore, adding
|| event.keyCode === 229as a fallback is still recommended to ensure correct behavior across the full range of Safari versions in use.References
event.isComposingto support input method editor (IME) converters) – WordPress Trac