Learn Measure Blog About

[accesskey] values are not unique

Updated

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.

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.

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.

Resources

Last updated: Improve article