Website Accessibility Guide Home

2.1.4 Character Key Shortcuts

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

LEVELA
Principle: Operable
User interface components and navigation must be operable.
Guideline: Keyboard Accessible
Make all functionality available from a keyboard.

If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

  • Turn off: A mechanism is available to turn the shortcut off;
  • Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc);
  • Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.

View Official WCAG 2.1 Compliance Techniques

Understanding 2.1.4 Character Key Shortcuts

"This criteria applies to elements on your site that provide single-character keyboard shortcuts."

If your site does not have any custom shortcuts, this guideline is taken care of by most design platforms, including HubSpot. 

This guideline aims to reduce accidental activation of single character shortcuts on web pages. Shortcuts are beneficial to all web users. however, it's important to implement them correctly in order to avoid frustrating and inconveniencing certain users.

Example:

  • Some websites may utilize a shortcut "s" to bring up a search box. This custom shortcut may interfere with user assistive devices when trying to type the letter "s".

The Problem:

  • Single character shortcuts can be problematic and frustrating for speech input users if their user agent interprets a word or sentence as the character shortcut.  
  • Keyboard users typing commands can be inconvenienced if the typing of their command includes the character that triggers the shortcut behavior.

Solutions

Ensure one of the following exists:

  • Allow a toggle button to turn off character shortcuts.
  • Allow remapping of shortcuts using a non-printable keyboard character such as ctrl, fn, cmd, alt, etc.
  • Ensure the shortcut is only active when the element is focused on.

For more information, please visit the official W3C article: Understanding 2.1.4 Character Key Shortcuts

Next Article: 2.2.1 Timing Adjustable

Questions?

Let us know if we can help you address this specific WCAG Recommendation.