What This Rule Checks
The accesskey attribute allows users to navigate a webpage using keyboard shortcuts. However, if two or more elements share the same accesskey, it can create conflicts, making it difficult for users to know which element will be activated. Ensuring that each accesskey is unique across the document avoids this confusion and improves accessibility for keyboard users.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Duplicate accesskeys cause only the first element to be activated, making subsequent elements unreachable via their shortcut. This confuses keyboard users who expect consistent shortcut behavior across the page.
How to Fix
Identify Duplicate Access Keys: Look for elements that share the same accesskey value and update one of them to ensure uniqueness.
Change Access Key Values: Modify duplicate accesskey values so that each element has a unique one.
Code Examples
<!-- Duplicate accesskey values -->
<button accesskey="s">Save</button><button accesskey="s">Search</button>
Copy
<!-- Unique accesskey values -->
<button accesskey="s">Save</button><button accesskey="r">Search</button>
Copy
Common Mistakes to Avoid
- Assigning the same accesskey to multiple elements.
- Using accesskeys that conflict with browser or screen reader shortcuts.
- Not documenting which accesskeys are available on the page.
Tip: Keyboard navigation is essential for users who cannot use a mouse. Ensure all interactive elements are reachable via the Tab key and operable via Enter or Space. Test focus visibility and focus order on every page.