Skip to content
html.sh

The accesskey Attribute

The accesskey Attribute

Section titled “The accesskey Attribute”
Global Attribute

The accesskey attribute specifies a keyboard shortcut to activate or focus an element. While it provides quick keyboard access to elements, it should be used cautiously due to potential conflicts with browser and assistive technology shortcuts.

Syntax

Section titled “Syntax”
<element accesskey="character">Content</element>

Values

Section titled “Values”
ValueDescription
Single characterAny single character (letter, number, or symbol)
Multiple charactersSpace-separated list for alternative shortcuts

Activation Keys by Browser

Section titled “Activation Keys by Browser”

The actual key combination varies by browser and operating system:

Browser/OSActivation
Chrome (Windows/Linux)Alt + accesskey
Chrome (Mac)Ctrl + Option + accesskey
Firefox (Windows/Linux)Alt + Shift + accesskey
Firefox (Mac)Ctrl + Option + accesskey
Safari (Mac)Ctrl + Option + accesskey
Edge (Windows)Alt + accesskey

Examples

Section titled “Examples”

Basic Access Keys

Section titled “Basic Access Keys”
Result
Section titled “Navigation Menu with Access Keys”
Result

Form with Access Keys

Section titled “Form with Access Keys”
Result

Multiple Alternative Keys

Section titled “Multiple Alternative Keys”
Result

Best Practices

Section titled “Best Practices”

1. Avoid Common Conflicts

Section titled “1. Avoid Common Conflicts”

Be aware of reserved shortcuts:

<!-- AVOID: Conflicts with browser shortcuts -->
<button accesskey="f">Find</button>      <!-- Ctrl+F = Browser find -->
<button accesskey="t">New Tab</button>   <!-- Ctrl+T = New tab -->
<button accesskey="w">Close</button>     <!-- Ctrl+W = Close tab -->
<button accesskey="r">Refresh</button>   <!-- Ctrl+R = Reload -->


<!-- BETTER: Use less common keys -->
<button accesskey="1">Home</button>
<button accesskey="2">Search</button>
<button accesskey="s">Save</button>

2. Provide Visual Indicators

Section titled “2. Provide Visual Indicators”

Show users which keys are available:

<style>
  /* Underline the access key character */
  button u {
    text-decoration: underline;
    text-decoration-color: #3b82f6;
    text-decoration-thickness: 2px;
  }
</style>


<button accesskey="s"><u>S</u>ave</button>

3. Document Available Shortcuts

Section titled “3. Document Available Shortcuts”

Always inform users about available shortcuts:

<div class="keyboard-shortcuts-help">
  <h3>Keyboard Shortcuts</h3>
  <ul>
    <li><kbd>Alt+S</kbd> - Save document</li>
    <li><kbd>Alt+H</kbd> - Go to home</li>
    <li><kbd>Alt+?</kbd> - Show help</li>
  </ul>
</div>

4. Consider Internationalization

Section titled “4. Consider Internationalization”

Access keys may not work well for all languages:

<!-- English: "Save" = S -->
<button accesskey="s"><u>S</u>ave</button>


<!-- German: "Speichern" = S -->
<button accesskey="s"><u>S</u>peichern</button>


<!-- French: "Enregistrer" = E -->
<button accesskey="e"><u>E</u>nregistrer</button>

5. Use Sparingly

Section titled “5. Use Sparingly”

Only assign access keys to frequently used elements:

<!-- Good: Essential actions -->
<button accesskey="s">Save</button>
<button accesskey="Enter">Submit</button>
<input type="search" accesskey="/">


<!-- Avoid: Every single element -->
<!-- Don't make every button/link have an accesskey -->

Common Pitfalls

Section titled “Common Pitfalls”

Accessibility Considerations

Section titled “Accessibility Considerations”

Screen Reader Compatibility

Section titled “Screen Reader Compatibility”

Access keys work with screen readers, but can cause issues:

<!-- Screen readers announce the access key -->
<button accesskey="s">
  Save
</button>
<!-- Announced as: "Save button, access key S" -->

Potential issues:

  • May conflict with screen reader shortcuts (JAWS, NVDA use many key combinations)
  • Not all screen readers announce access keys consistently
  • Users may not know how to use them

Prefer tabindex for Navigation

Section titled “Prefer tabindex for Navigation”

For keyboard navigation, tabindex is often better:

<!-- Access key: Quick activation -->
<button accesskey="s" onclick="save()">Save</button>


<!-- Tabindex: Keyboard navigation -->
<div tabindex="0" role="button" onclick="action()">
  Custom Control
</div>

Title Attribute for Hints

Section titled “Title Attribute for Hints”

Add hints about how to use access keys:

<button
  accesskey="s"
  title="Save (Alt+S on Windows, Ctrl+Option+S on Mac)">
  <u>S</u>ave
</button>

JavaScript Interaction

Section titled “JavaScript Interaction”

Detecting Access Key Events

Section titled “Detecting Access Key Events”

You can detect when an access key is triggered:

document.getElementById('saveBtn').addEventListener('click', (e) => {
  // Check if triggered by access key
  if (e.detail === 0) {
    console.log('Triggered by keyboard');
  } else {
    console.log('Triggered by mouse');
  }
});

Programmatically Get Access Keys

Section titled “Programmatically Get Access Keys”
// Get all elements with access keys
const elementsWithAccessKeys = document.querySelectorAll('[accesskey]');


elementsWithAccessKeys.forEach(el => {
  console.log(`${el.textContent}: ${el.accessKey}`);
});

Dynamic Access Key Assignment

Section titled “Dynamic Access Key Assignment”
// Assign access keys dynamically
const buttons = document.querySelectorAll('button');
const keys = ['1', '2', '3', '4', '5'];


buttons.forEach((btn, index) => {
  if (keys[index]) {
    btn.accessKey = keys[index];
    btn.innerHTML = `<u>${keys[index]}</u>${btn.textContent}`;
  }
});

When to Use accesskey

Section titled “When to Use accesskey”

Good Use Cases

Section titled “Good Use Cases”

✓ Web applications with power users who will learn shortcuts ✓ Data entry forms where speed is critical ✓ Admin interfaces with repeated actions ✓ Custom keyboard shortcuts that complement tabindex navigation

When to Avoid

Section titled “When to Avoid”

✗ Public websites where users won’t learn shortcuts ✗ Mobile devices where keyboard shortcuts don’t apply ✗ Content-heavy sites where Tab navigation is sufficient ✗ Sites with many languages where key mnemonics don’t translate

Alternatives to Consider

Section titled “Alternatives to Consider”

1. Keyboard Event Handlers

Section titled “1. Keyboard Event Handlers”
// More control over keyboard shortcuts
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    save();
  }
});

2. WAI-ARIA Patterns

Section titled “2. WAI-ARIA Patterns”
<!-- Use standard ARIA keyboard patterns -->
<div role="toolbar">
  <button>Bold</button>
  <button>Italic</button>
</div>

3. Focus Management with tabindex

Section titled “3. Focus Management with tabindex”
<!-- Better for navigation -->
<nav>
  <a href="#" tabindex="0">Home</a>
  <a href="#" tabindex="0">About</a>
</nav>

Browser Support

Section titled “Browser Support”
BrowserSupportNotes
ChromeFullAlt + key (Win/Linux), Ctrl+Option+key (Mac)
FirefoxFullAlt+Shift+key (Win/Linux), Ctrl+Option+key (Mac)
SafariFullCtrl+Option+key
EdgeFullAlt + key
MobileLimitedVirtual keyboards don’t support access keys
Section titled “Related Attributes”

Specifications

Section titled “Specifications”