πŸŽ‰ We just launched our new React course! Get it with 20% off! πŸŽ‰
How to Add Keyboard Shortcut to Elements in HTML

How to Add Keyboard Shortcut to Elements in HTML

Ferenc Almasi β€’ πŸ”„ 2021 July 13 β€’ πŸ“– 1 min read
  • twitter
  • facebook

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>
shortcut.html
Copied to clipboard!

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 Matters
How to Add Keyboard Shortcut to Elements in HTML
If you would like to see more Webtips, follow @flowforfrank
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Resources:

JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended