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

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

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:

Remove ads
Remove ads

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
πŸŽ‰ Thank you for subscribing to our newsletter. x