[accesskey] values are not unique

[accesskey] values are not unique

Appears in: Accessibility audits

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:

Lighthouse: Access keys are not unique

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 #

Last updated: Improve article