Success Criterion 2.1.4 Character Key Shortcuts ensures that if a keyboard shortcut is implemented using single characters, there must be a way to turn it off, remap it, or ensure it is only active when the component has focus. This is crucial for users who rely on assistive technologies or have motor disabilities.
To avoid conflicts between assistive technologies and a website's custom shortcuts, provide users with control over single-character key shortcuts, ensuring they can either turn them off, remap them, or activate them only when the component is focused.
When users using assistive technologies navigate the website, their assistive technologies offer shortcuts to operate the software better. For example, using the 'H' key allows blind users utilizing screen readers to move directly through all headings of the website. If a website uses the 'H' key for hiding specific content, a conflict will occur. The screen reader user may not be able to use the navigation shortcut and may instead hide specific elements, causing confusion.
The same issue may occur when users with motor disabilities utilize their speech-to-text software. As they may spell out characters to opt for specific actions on the page, they may accidentally trigger an embedded customized command installed by the website, causing confusion and a complicated experience.
Avoid single-character key shortcuts: Avoid using single-character key shortcuts if possible.
Provide a mechanism to turn off single-character key shortcuts: Provide a mechanism to turn off single-character key shortcuts.
Design shortcuts using non-printable key combinations: Design keyboard shortcuts using combinations of non-printable keys (e.g., Ctrl + K, Alt + N).
Ensure shortcuts are focus-specific: Ensure that shortcuts are only active when the relevant component has keyboard focus.
Example: Ensuring a user can navigate out of an interactive map using a keyboard
An email client uses single-character shortcuts such as 'R' to reply, 'D' to delete, and 'S' to send emails. These shortcuts are always active, regardless of whether the user is in the inbox or composing an email.
Explanation: Users with motor disabilities who utilize text-to-speech software may accidentally trigger shortcuts while composing emails by speech. If they spell the letter 's', they may accidentally send an email while still composing it.
<button id="toggle-shortcuts">Turn on Shortcuts</button>
<div id="email-client">
<!-- Email client content -->
</div>
<script>
let shortcutsEnabled = true;
document.getElementById('toggle-shortcuts').addEventListener('click', () => {
shortcutsEnabled = !shortcutsEnabled;
});
document.addEventListener('keydown', (e) => {
if (shortcutsEnabled) {
if (e.key === 'R') {
// Reply action
} else if (e.key === 'D') {
// Delete action
} else if (e.key === 'S') {
// Star action
}
}
});
</script>
Explanation: The toggle button allows users to enable or disable single-character shortcuts, preventing accidental triggers when they are not desired. When a user utilizing text-to-speech software navigates the page, they will notice the button and can deactivate the shortcut mechanism, allowing them to compose an email without any barrier or conflict. This approach ensures that shortcuts are only active when the user intends to use them.