If you use the accesskey attribute, specify unique values
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
- 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.
- Previous post: Void (empty) elements and self-closing start tags in HTML
Subscribe / follow
- Digital Designer at Monocle (London, GB)
- User Experience Designer at HMS (Healthcare Management Systems) (Nashville, TN, Te, US)
- Web Developer
- Lead Rails dev for Awesome + Funded London Social Recruiting StartUp, (Full-time, Telecommute) at Likeminds
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost