HTML accesskey Attribute
The accesskey attribute is a global attribute and specifies a shortcut key for activating a specific element. Read and find out on what elements you can use it.
The HTML accesskey attribute is a global attribute that defines a keyboard shortcut for activating or focusing a specific element. When the user presses the browser's modifier key(s) plus the assigned character, that element is focused (and, for links and buttons, activated). The attribute value should consist of one or more printable characters separated by spaces — the browser uses the first one it can support.
In HTML 4.01, accesskey could only be used with a small set of elements: <a>, <area>, <button>, <input>, <label>, <legend>, and <textarea>.
In HTML5, accesskey is a global attribute, so it can be set on any element. Note that putting it on a non-interactive element (such as a <div> or <p>) only moves keyboard focus to that element — it does not perform a click — so it is most meaningful on interactive controls.
Syntax
<tag accesskey="single_character">...</tag>For example, <button accesskey="s">Save</button> assigns the s key.
How the shortcut is triggered
There is no single, standardized key combination for accesskeys — it depends on the browser and operating system. The user holds the modifier keys below and presses the assigned character:
| Browser | Windows / Linux | macOS |
|---|---|---|
| Chrome | Alt + key | Control + Option + key |
| Edge | Alt + key | Control + Option + key |
| Firefox | Alt + Shift + key | Control + Option + key |
| Safari | — | Control + Option + key |
When more than one element shares the same accesskey, modern browsers typically cycle focus through those elements on repeated presses rather than activating just one.
When accesskey is (and isn't) a good fit
accesskey is best reserved for controlled, single-purpose environments where you know the browser and the audience, and where a documented shortcut adds real value:
- Internal / intranet tools where power users repeat the same actions all day (e.g. "Alt+S to save a record").
- Kiosks and embedded apps running a known browser, where you control the full keyboard environment.
- Single-page utilities with a handful of well-advertised shortcuts.
Avoid accesskey on public, multi-purpose websites and web apps, for these reasons:
- Collisions. A chosen key may clash with a built-in browser or operating-system shortcut, or with an assistive-technology command.
- Discoverability. There is no visual indication that a shortcut exists, so users rarely find them.
- Keyboard variation. A character may be unavailable on some keyboard layouts, which is a real internationalization problem.
- Cognitive load. Numeric accesskeys (
1,2,3) carry no meaning and can confuse users with cognitive disabilities. - Focus management. Overlapping shortcuts can interfere with the natural
tabindexand tab-order behavior of the page.
For these reasons, it is generally recommended not to use accesskey on general-purpose public websites. Prefer it only in controlled environments, and always document the shortcuts you provide.
Accessibility considerations
Single-character shortcuts are governed by WCAG 2.1 Success Criterion 2.1.4 — Character Key Shortcuts. The concern is that a shortcut bound to a single character can be triggered accidentally — most critically by screen-reader and speech-input users, whose tools generate keystrokes as they navigate. An unexpected accesskey activation can move focus, submit a form, or trigger an action the user never intended.
To satisfy SC 2.1.4 you should let users turn the shortcut off, remap it, or have it active only when the relevant component has focus.
Because accesskey has no visible affordance, expose the shortcut to assistive technology with the aria-keyshortcuts attribute. It documents the keystroke for screen readers without changing behavior:
<button accesskey="s" aria-keyshortcuts="Alt+S">Save</button>Example on a button and an input
accesskey is most defensible on interactive form controls, where focusing the element is exactly what the user wants:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="search" accesskey="f">Search (Alt+F):</label>
<input id="search" type="text" accesskey="f" />
<br />
<button type="submit" accesskey="s" aria-keyshortcuts="Alt+S">
Save
</button>
</form>
<p>Press the modifier keys for your browser plus the letter, e.g. <strong>Alt + F</strong> to focus the search field or <strong>Alt + S</strong> to reach Save.</p>
</body>
</html>Example on links
The same attribute can assign shortcuts to navigation links:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/learn-html.html" accesskey="h">HTML online tutorial</a>
<br />
<a href="https://www.w3docs.com/learn-css.html" accesskey="c">CSS online tutorial</a>
<br />
<a href="https://www.w3docs.com/learn-git.html" accesskey="g">GIT online tutorial</a>
</body>
</html>