If you use the accesskey attribute, specify unique values
The HTML accesskey attribute can be used to assign a keyboard shortcut to a link or form control. The intention is to let keyboard users quickly navigate to different parts of a web page or trigger links to other pages.
Whether or not the accesskey attribute should be used at all is a debate that has been going on for years. I’m not going to go there in this article (see Providing Keyboard Shortcuts Using accesskey for a good explanation), but will instead focus on something you need to be aware of if you do use accesskey—values must be unique.
When an accesskey is triggered, the browser follows a link, moves focus to a form control, or submits a form. When only a single element on the page has a particular accesskey value, the expected element is activated or receives focus. But what happens when two or more elements share the same accesskey value?
It depends.
- Firefox (tested in 3.6.3) steps through the elements that share the same value when you trigger the keyboard shortcut repeatedly. Elements that are normally activated (links and form buttons) only receive focus.
- Safari (tested in 4.0.5) activates the last of the elements that share the same value.
- Opera (tested in 10.53) activates the first of the elements that share the same value.
- Internet Explorer (tested in 8.0) steps through the elements that share the same value when you trigger the keyboard shortcut repeatedly. If one of the elements is a form button, it is activated when it is stepped to.
As you can see, browser behaviour is inconsistent and likely to lead to unexpected results.
It is worth noting that the HTML5 specification of the accesskey attribute does not mention how browsers should handle duplicate values. I think that would be worth specifying to ensure similar cross-browser behaviour, regardless of whether actually using the accesskey attribute is a good idea or not.
This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.