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.
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.