How to Add Keyboard Shortcut to Elements in HTML

You can add keyboard shortcuts to your page through HTML with the global accesskey attribute and trigger it with Alt + Shift + key in Chrome and Firefox on Windows, or use Control + Alt + key on Mac.

<!-- Add keyboard shortcut with the `accesskey` attribute (access it with Alt + Shift + key in Firefox) -->
<button accesskey="g">Get focus</button>

Note that adding keyboard shortcuts in the following way, you may introduce a couple of problems:

• Shortcuts may conflict with the browser's default shortcuts. This can cause confusion to your visitors.
• If internalization is a concern for you, an accesskey may not be present on all types of keyboards.

In any case, be sure to inform the user about the ability to use keyboard shortcuts on the page to avoid confusion. Learn more about accessibility with the following article:

Why Web Accessibility MattersAnd how to ensure your site is accessible to anyoneWhy accessibility is so important? According to the WHO, 15% of the world’s population lives with some kind of disability, that’s over 1 billion people...Read More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The global accesskey attribute in HTML