Working with Character Key Shortcuts

Shawn Sandy (Ally.Cafe) ~ June 25, 2024

Web Content Accessibility Guidelines (WCAG) 2.2 provides comprehensive standards to make web content more accessible to people with disabilities. One of the key criteria under Guideline 2.1 is Success Criterion 2.1.4, which focuses on character key shortcuts. This criterion addresses the accessibility challenges posed by single-character shortcuts, which can interfere with assistive technologies and accidental keystrokes. Let’s delve into the details of this criterion and explore how to implement it effectively.

What is WCAG 2.1.4 Character Key Shortcuts?

Success Criterion 2.1.4 Character Key Shortcuts (Level A): If a keyboard shortcut is implemented using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

The user can turn off the shortcut.
The user can remap the shortcut to a non-printable key.
The keyboard shortcut for a user interface component is only active when that component has focus.

Purpose of This Criterion

The purpose of this criterion is to prevent unintended actions that can occur when single-character shortcuts are active. These shortcuts can be particularly problematic for users who rely on speech input or screen readers, as well as users with motor disabilities who may press keys accidentally.

Key Requirements

To conform to this criterion, your web content must ensure that single-character shortcuts meet one of the following conditions:

Turn Off: Provide a mechanism for users to disable the shortcut if it interferes with their use of the site.
Remap: Allow users to remap the shortcut to a key combination that is less likely to be activated accidentally.
Focus Activation: Ensure that the shortcut only activates when the relevant user interface component has focus.

Implementing WCAG 2.1.4: Best Practices

Here are best practices for implementing character key shortcuts in a way that conforms to WCAG 2.1.4:

1. Provide a Mechanism to Turn Off Shortcuts

Allow users to disable single-character shortcuts if they find them problematic. This can be done through an accessibility settings menu.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disable Shortcuts Example</title>
</head>
<body>
<button id="toggleShortcut">Press "s" to Submit</button>
<button onclick="toggleShortcut()">Disable Shortcut</button>
<script>
  let shortcutEnabled = true;

  document.addEventListener('keydown', function(event) {
    if (shortcutEnabled && event.key === 's') {
      event.preventDefault();
      document.getElementById('toggleShortcut').click();
    }
  });

  function toggleShortcut() {
    shortcutEnabled = !shortcutEnabled;
  }
</script>
</body>
</html>

2. Allow Users to Remap Shortcuts

Provide an option for users to customize their keyboard shortcuts according to their preferences.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Remap Shortcuts Example</title>
</head>
<body>
<button id="remapButton">Press Custom Shortcut to Submit</button>
<button onclick="changeShortcut()">Change Shortcut</button>
<script>
  let customShortcut = 's';

  document.addEventListener('keydown', function(event) {
    if (event.key === customShortcut) {
      event.preventDefault();
      document.getElementById('remapButton').click();
    }
  });

  function changeShortcut() {
    customShortcut = prompt('Enter new shortcut key:');
  }
</script>
</body>
</html>

3. Activate Shortcuts Only When Component Has Focus

Ensure that character key shortcuts only function when their associated UI component is in focus.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus Activation Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Press 's' when focused">
<script>
  document.getElementById('textInput').addEventListener('keydown', function(event) {
    if (event.key === 's') {
      alert('Shortcut activated');
    }
  });
</script>
</body>
</html>

Techniques and Failures for WCAG 2.1.4

Sufficient Techniques

G202: Ensuring keyboard control for all functionality.
C15: Using the user interface from the operating system or platform to reassign or remap a shortcut.
SCR35: Using client-side scripts to implement keyboard shortcuts.

Common Failures

F42: Failure due to using scripts that trap keyboard focus.
F58: Failure due to not providing a way to cancel or abort an action that was initiated through a keyboard interface.

Relevant Links and Resources

By adhering to the guidelines set out in WCAG 2.1.4, you can make your web content more accessible and usable for everyone, particularly those who rely on keyboard navigation.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue