[accesskey] values are not unique
Access keys let users quickly focus or activate an element on your page by pressing the specified key, usually in combination with the Alt key (or Control+Alt on Mac).
Duplicating accesskey values creates unexpected effects for users navigating via the keyboard.
Caution: Unless you're building a complex app (for example, a desktop publishing app), it's generally best to avoid access keys because of their limitations:
- Not all browsers support access keys.
- It's challenging to avoid conflicts with shortcut keys across all operating systems and browsers.
- Some access key values may not be present on all keyboards, particularly if your app is intended for an international audience.
- If users aren't aware of access keys, they may accidentally activate app functionality, causing confusion.
How the Lighthouse access key audit fails #
Lighthouse flags pages with duplicate access keys:
For example, these links both have g as their access key:
<a href="google.com" accesskey="g">Link to Google</a>
<a href="github.com" accesskey="g">Link to GitHub</a>The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.
How to fix duplicate access keys #
Evaluate the duplicate accesskey values flagged by Lighthouse and make each accesskey value unique. For example, to fix the example above, you can change the value for the GitHub link:
<a href="google.com" accesskey="g">Link to Google</a>
<a href="github.com" accesskey="h">Link to GitHub</a>For each defined accesskey, make sure the value doesn't conflict with any default browser or screen reader shortcut keys.
Resources #
- Source code for
[accesskey]values are not unique audit - accesskey attribute value must be unique (Deque University)