HTML accesskey Attribute

What You’ll Learn

The accesskey attribute provides a way to define keyboard shortcuts for accessing specific elements on a web page. By assigning a key to an element, users can quickly navigate to it, improving accessibility and user experience.

Purpose of accesskey

The primary purpose of the accesskey attribute is to enhance the accessibility of a web page by allowing users to navigate to important elements using keyboard shortcuts. This is particularly beneficial for users with mobility issues who may find it challenging to use a mouse for navigation.

📝 Syntax

Add accesskey to any focusable or activatable element with a single character value:

<button accesskey="h">Home</button>

Syntax Rules

• Value is a single character (letter, digit, or symbol where supported).
• Case usually does not matter—browsers treat keys case-insensitively.
• In JavaScript, use the camelCase property accessKey.
• Do not assign the same accesskey to multiple visible elements on one page.

💎 Values

The accesskey attribute accepts single-character values, typically a letter or a number. These values are used as the access key that, when combined with a browser-specific modifier key, triggers the associated element:

• accesskey="h" — Letter keys for navigation (Home, Help, etc.).
• accesskey="1" — Number keys for ordered shortcuts.
• accesskey="s" — Mnemonic keys matching the first letter of an action (Save, Search).

<button accesskey="h">Home</button>
<a href="/search" accesskey="s">Search</a>
<input type="submit" value="Go" accesskey="g">

Applicable Elements

accesskey is a global attribute and can be used on most HTML elements, especially those that receive focus or can be activated:

Examples Gallery

Navigation buttons, dynamic JavaScript shortcuts, and link access keys.

<button accesskey="h">Home</button>
<button accesskey="a">About</button>
<button accesskey="c">Contact</button>

<script>
  document.getElementById("dynamicElement").accessKey = "p";
</script>

<a href="#home" accesskey="1">Home</a>
<a href="#docs" accesskey="2">Docs</a>
<a href="#help" accesskey="3">Help</a>

♿ Accessibility

• Document shortcuts — List assigned access keys in help text or visible labels so users can discover them.
• Avoid conflicts — Do not use keys that clash with browser, OS, or screen reader shortcuts.
• Prefer semantic HTML — Use skip links, logical tab order, and native focus before relying on accesskey.
• Test across browsers — Modifier key behavior varies; verify on Windows, macOS, and Linux.
• Unique keys per page — Duplicate accesskey values cause unpredictable focus behavior.

💡 Best Practices