← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 1 of 20

HTML Keyboard Shortcuts

Imagine using a computer without a mouse. To click a button, open a menu, or type inside a search box, you have to press keys on your keyboard in a specific sequence. For many people with motor impairments, this is how they navigate the web every day. HTML keyboard shortcuts are those navigation routes. By coding accessibility features natively, you allow users to navigate your page, jump between fields, and activate tools using only their keyboard. This keeps your website accessible to everyone, and lets advanced users run tools much faster using custom hotkey shortcuts.

In this page:

  1. Standard Tab Key Navigation
  2. Custom Hotkeys with accesskey
  3. Focus Management with tabindex
  4. Custom Event Hotkeys in JavaScript
  5. Designing Clear Focus Indicators

Standard Tab Key Navigation

Webpages can be navigated chronologically using the Tab key. Modern browsers automatically include interactive elements (like buttons, links, and inputs) in the tab sequence natively.

Note: Use native interactive tags like button and anchor links to inherit built-in keyboard focus support automatically.

Warning: Styling non-clickable tags to look like buttons makes them completely unreachable for keyboard-only users.

Example: Standard Tab Key Navigation

markup 
<a href="/home">Home</a>
<button>Click me</button>
<input type="text">

Custom Hotkeys with accesskey

The global accesskey attribute allows you to define custom keyboard shortcuts for specific elements, letting users trigger actions or place focus inside input fields using simple key combinations.

Note: Assign easy, memorable letters as accesskey shortcuts for your primary navigation links.

Warning: Accesskey shortcuts require different modifier keys depending on the browser and operating system being used.

Example: Custom Hotkeys with accesskey

markup 
<a href="/home" accesskey="h">Home</a>

Focus Management with tabindex

The global tabindex attribute allows you to manually control the chronological keyboard tab sequence. Set tabindex="0" to include custom elements in the sequence, or tabindex="-1" to remove them.

Note: Only use tabindex="0" or tabindex="-1"; avoid using positive numbers as they can disrupt the logical tab navigation flow.

Warning: Hiding focus outlines using CSS (outline: none) without replacing them with custom styles makes keyboard navigation impossible.

Example: Focus Management with tabindex

markup 
<div tabindex="0">Focusable custom element</div>
<div tabindex="-1">Not in tab order</div>

Custom Event Hotkeys in JavaScript

You can write custom JavaScript scripts to listen for keypress events (like Keydown or Keyup) and trigger specific actions on your page, allowing you to create rich, application-specific hotkey shortcuts.

Note: Use keyboard events to let users submit calculations quickly by pressing the Enter key.

Warning: Make sure your custom shortcuts do not conflict with standard browser or screen-reader navigation shortcuts.

Example: Custom Event Hotkeys in JavaScript

markup 
<input type="text" onkeydown="if (event.key === 'Enter') console.log('submitted')">

Designing Clear Focus Indicators

Keyboard users need a visible focus indicator to see which element is currently selected as they navigate. You can use CSS pseudo-classes to customize the style of this indicator and make it look clean.

Note: Use a high-contrast outline color for your focus indicators to make them easily visible.

Warning: Never use CSS outline: none to hide browser focus outlines without replacing them with custom focus styles.

Example: Designing Clear Focus Indicators

markup 
<style>
  a:focus {
    outline: 2px solid orange;
  }
</style>
<a href="/home">Home</a>
Common Mistakes
  1. Hiding browser focus outlines using CSS (outline: none) without replacing them with custom focus styles.
  2. Using positive tabindex values (like tabindex="1"), which disrupts the logical tab navigation flow.
  3. Designing keyboard shortcuts that conflict with standard browser or screen-reader commands.
Chapter Summary
  • Use native interactive tags like button and anchor links to inherit built-in keyboard focus support automatically.
  • Define custom hotkey shortcuts using the accesskey attribute, and control tab sequences using tabindex.
  • Never remove browser focus outlines without replacing them with high-contrast, custom focus styles.
Browser Support

Standard HTML keyboard attributes and CSS focus selectors are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Deprecated Tags Next Lesson → HTML Browser Support

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.