Making Your HubSpot Website WCAG 2.1 Compliant

2.1.4 Character Key Shortcuts

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELA
Success Criteria

2.1.4 Character Key Shortcuts

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
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

  • This criteria is partially resolved with accessiBe or HubSpot but requires some manual intervention.

Understanding

"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

accessiBe cannot alter the javascript or html that implements a single character shortcut, however there are three options for satisfying this guideline.

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


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles