How can I use accessible Keyboard shortcuts?

Question

I want to include keyboard shortcuts for users to move around the page easier. How can I use keyboard shortcuts while still meeting accessibility guidelines?

Answer

Keyboard shortcuts can be useful when there is a lot of content on a page. However, they can impact users of accessible technology negatively. People who use speech-input devices may accidentally activate single-character shortcuts while talking with their microphone on. Screen reader users utilize hot keys to move through the page content quickly. Introducing additional shortcuts may cause issues with the way they move through page content.

If keyboard shortcuts use more than one key (using "alt" or "ctrl" + another key), then no change is needed, though an explanation of each shortcut should be available to users. If  keyboard shortcuts only use one key, users should be able to rework the shortcut. Users should be able to turn off, remap, or only activate shortcuts when a component is in focus. Meeting any of these three requirements will allow the shortcuts to be accessible to all users.

Turning off keyboard shortcuts is as simple as including a checkbox or toggle in the content. this way users can choose if they want to interact with the shortcuts. Remapping shortcuts allows users to change what keys activate the shortcut. This includes adding non-printable keys to the shortcut, like "alt" or "ctrl". Finally, shortcuts can be implemented so they are only active when a user is focused on a certain component. For example, if there is a text input that has a shortcut for adding an image, the shortcut is only available to users when they have focus on the text input.

For help with specific keyboard shortcut questions, contact our team of specialists for personalized Accessibility Remediation Support.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.