Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Duplicate accesskey values (A11y Best Practice Violation)

If two or more accesskey values are the same, it can cause web accessibility issues for keyboard operability.

Keyboard - Lumar Accessibility Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Accessibility issue summary: Duplicate accesskey values

The HTML accesskey attribute specifies a shortcut key so users can use their keyboard to focus on an element on the web page. 

If two or more accesskey values are the same, it can cause issues in keyboard operability for users who cannot navigate a page through other means. 

Make sure your defined accesskey values also do not conflict with any pre-existing browser or screen reader shortcuts. 

Issue details
  • Best Practice
  • Severity: Serious
  • Category: Keyboard (BP)
  • Rule ID: accesskeys

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo
 

Example HTML violation: Duplicate accesskey values (A11y Best Practice Violation)

 <h1>Website Navigation</h1>
 <ul>
   <li>
     <a accesskey="1" href="#home">Home</a>
   </li>
   <li>
     <a accesskey="2" href="#about">About</a>
   </li>
   <li>
     <a accesskey="1" href="#services">Services</a>
   </li>
   <li>
     <a accesskey="4" href="#contact">Contact</a>
   </li>
 </ul>

The above HTML violates the accesskeys accessibility rule because it does not adhere to the proper guidelines — the third accesskey listed duplicates the same shortcut used in the first accesskey listed.

See below for the corrected HTML example and explanation.

 

How to fix "Duplicate accesskey values (A11y Best Practice Violation)" issue

 <h1>Website Navigation</h1>
 <ul>
   <li>
     <a accesskey="1" href="#home">Home</a>
   </li>
   <li>
     <a accesskey="2" href="#about">About</a>
   </li>
   <li>
     <a accesskey="3" href="#services">Services</a>
   </li>
   <li>
     <a accesskey="4" href="#contact">Contact</a>
   </li>
 </ul>

Explanation of corrections:

The third list item initially had an accesskey attribute value of "1" which was violating the "accesskeys" rule because it was not unique (the first list item also had the same accesskey value).

To remedy this, I have changed the accesskey value for the third list item to "3", thereby making it unique across the document.

In order to comply with accessibility best practices, each accesskey attribute value should be unique within a document.

Duplicated accesskey values can cause unexpected effects for keyboard users, ultimately making the page less accessible.

It's also important to ensure these values do not conflict with any browser or screen reader shortcut keys.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform