Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Assigns a keyboard shortcut to activate or focus an element. Useful for power-user interfaces, but comes with significant discoverability and conflict challenges.
The accesskey attribute assigns a keyboard shortcut to an element. When the user presses the platform-specific modifier key combination plus the assigned key, the browser either activates the element (buttons, links) or focuses it (inputs, textareas).
Applies to: Any HTML element, though it is most useful on interactive elements like <button>, <a>, <input>, and <select>
| Value | Behavior |
|---|---|
| Single character | A case-insensitive letter or digit that serves as the shortcut key |
| Space-separated characters | Multiple fallback keys. The browser picks the first one it can use without conflict. |
<!-- Keyboard shortcut to focus the search field --><label for="search">Search</label><input type="text" id="search" accesskey="s" placeholder="Press Alt+S to focus" /> <!-- Shortcut to activate a button --><button accesskey="n">New Item</button> <!-- Shortcut on a link --><a href="/dashboard" accesskey="d">Dashboard</a>
The modifier key combination varies by platform and browser. For an accesskey="s":
| Platform | Modifier | Full Shortcut |
|---|---|---|
| Windows (Chrome, Edge) | Alt | Alt+S |
| Windows (Firefox) | Alt+Shift | Alt+Shift+S |
| macOS (Chrome, Edge) | Ctrl+Alt | Ctrl+Alt+S |
| macOS (Firefox) | Ctrl+Alt | Ctrl+Alt+S |
| macOS (Safari) | Ctrl+Alt | Ctrl+Alt+S |
| Linux (Chrome) | Alt | Alt+S |
| Linux (Firefox) | Alt+Shift | Alt+Shift+S |
This inconsistency is one of the biggest challenges with accesskey. Users must know their platform's modifier, and documentation must account for all variants.
Internal tools and admin dashboards are the strongest use case. Users interact with the same interface daily and benefit from keyboard shortcuts to common actions.
<nav aria-label="Admin shortcuts"> <a href="/admin/orders" accesskey="o">Orders</a> <a href="/admin/products" accesskey="p">Products</a> <a href="/admin/users" accesskey="u">Users</a> <a href="/admin/settings" accesskey="t">Settings</a></nav> <main> <label for="admin-search">Search</label> <input type="search" id="admin-search" accesskey="s" /> <button accesskey="n">New Order</button></main>
Because there is no standard browser UI to show available access keys, you must document them yourself. A footer, help dialog, or tooltip can list the available shortcuts.
<footer> <p>Keyboard shortcuts: press <kbd>Alt+S</kbd> to search, <kbd>Alt+N</kbd> for new item, <kbd>Alt+D</kbd> for dashboard. </p></footer>
You can provide space-separated characters. The browser uses the first one that does not conflict with an existing shortcut.
<!-- Multiple keys: browser picks the first available one --><button accesskey="s n">Save</button>
Access keys share keyboard shortcut space with the browser and the operating system. Common conflicts include:
When a conflict occurs, browser behavior varies: some prioritize the access key, others prioritize the browser shortcut, and some require pressing the key twice. Test thoroughly on target platforms.
For public-facing websites, the discoverability gap and conflict risks typically outweigh the benefits. Consider visible keyboard hints or a dedicated shortcut system instead.
accesskey.data-hotkey — VB keyboard shortcut system with conflict detectiontabindex — control focus order for keyboard navigation