accesskey attribute value should be unique
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every accesskey must be unique and conflict-free.
Overview
Why this matters
Single-character shortcuts can conflict with browser, OS, and assistive technology commands. Duplicate mappings add ambiguity, so users may trigger the wrong control or fail to trigger any control reliably.
How to fix this issue
Prefer app-managed keyboard shortcuts over `accesskey`. If shortcuts are required, avoid duplicate mappings, use safe modifier combinations, and meet SC 2.1.4 by allowing users to disable, remap, or scope single-character shortcuts to focused regions.
Developer Guidance
Implement shortcuts via a centralized keymap service rather than ad-hoc handlers. Validate uniqueness at build time and reserve browser, OS, and AT combinations. For SC 2.1.4 compliance, provide at least one strategy for single-character shortcuts: disable, remap, or activate only when focus is inside the relevant component.
Code Examples
Incorrect Implementation
<button accesskey="s">Save</button>
<a href="/settings" accesskey="s">Settings</a>Correct Implementation
<!-- App-managed shortcuts with unique mappings -->
<button data-shortcut="Ctrl+Shift+S">Save</button>
<a href="/settings" data-shortcut="Ctrl+,">Settings</a>Real-World Implementation
Before
<div class="editor">
<button accesskey="S">Save draft</button>
<button accesskey="S">Send</button>
</div>
<!-- One key maps to two actions; behavior differs by browser and user setup -->After
<div class="editor">
<button data-shortcut="Ctrl+Shift+S">Save draft</button>
<button data-shortcut="Ctrl+Enter">Send</button>
</div>
<!-- Unique shortcuts managed by app keymap with conflict checks -->CSS Example (Guidance)
.status-banner {
padding: 0.75rem 1rem;
border: 1px solid #b91c1c;
background: #fef2f2;
color: #7f1d1d;
}
@media (prefers-reduced-motion: reduce) {
.status-banner {
animation: none !important;
transition: none !important;
}
}Manual Testing
- 1. Enumerate all shortcut mappings and confirm no duplicates exist.
- 2. Verify single-character shortcuts can be disabled, remapped, or are focus-scoped.
- 3. Validate no conflicts with browser, OS, or AT reserved commands in target platforms.
- 4. Execute each shortcut in at least two browser/AT combinations and verify one deterministic action.
- 5. Confirm users can discover and edit shortcut mappings from an accessible settings/help surface.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance