How to Add Keyboard Shortcut to Elements in HTML

How to Add Keyboard Shortcut to Elements in HTML

Ferenc Almasi β€’ Last updated 2021 July 13 β€’ Read time 1 min read
  • twitter
  • facebook
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.

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

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

Resources:

  • twitter
  • facebook
HTML
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.