accesskey (HTML attribute)

Spec
Depr. Version
No HTML 4
Browser support (more…)
IE6+ FF3.5 SA4 OP10 CH2
Partial None None None None

Syntax

accesskey="key"

Description

The accesskey attribute allows the user to activate a control on a page using a keyboard shortcut. This may save time for users who would otherwise need to tab through a series of form controls or move the mouse to get to the desired link. The key combination that activates the link to which the accesskey is applied varies depending on the platform and browser combination. For IE/Windows, users press Alt + accesskey, while Firefox/Windows users press Alt + Shift + accesskey; users of most Mac browsers press Ctrl + accesskey; in Opera, pressing Shift + Esc displays a list of links for which accesskey attributes are defined, allowing users to choose the key they want to use.

Generally speaking, browsers don’t indicate that an accesskey attribute is defined for a form control, and this lack of discoverability is a problem. The most common method for indicating the accesskey value is to place it in a title attribute of the element to which it’s applied. However, for this approach to work, the user must mouse over the element in question. You may want to state the accesskey value in some other way—for example:

 <legend accesskey="1">Friendship [access key = 1]</legend>

Admittedly, this may not be practical or cosmetically pleasing, but without this hint, the user may never realize that an accesskey is available.

Example

The accesskey for this group of controls is assigned to "1":

<form>
  <fieldset>
    <legend accesskey="1">Friendship</legend>
    <input type="radio" name="radFriendship" value="Not_Applicable"
        id="radFriendNot_Applicable"/>
    <label for="radFriendNot_Applicable">Not_Applicable</label>
    <input type="radio" name="radFriendship" value="acquaintance"
        id="radFriendaquaintence"/>
    <label for="radFriendaquaintence">acquaintance</label>
    <input type="radio" name="radFriendship" value="friend"
        id="radFriendfriend"/>
    <label for="radFriendfriend">friend</label>
  </fieldset>
</form>

Value

This attribute takes as its value a single character, which can be numerical, alphabetical, or even a symbol.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None Partial Partial Partial None None None None None None None None None None None None None

There is some variety in the way that the accesskey is activated. The biggest problem with this attribute is that the keystrokes you’ve defined may clash with other technologies. For example, a user may have assistive technology (such as a screen reader or screen magnifier) that shares keystrokes with those that you’ve defined in the accesskey attribute. In addition, different language browsers use different “accelerator keys” for their own menu options, and these may also clash with the access keys you’ve defined. In such cases, the accesskey may not work as you intended for all users, and as such, many web standards advocates strongly discourage its use. However, accesskey can have a role in documents that are used in controlled environments, such as intranets or for point-of-sale environments, in which you know exactly which browsers and languages the users can access. In such cases, using a standard set of accesskey attributes may be of great benefit.

User-contributed notes

There are no comments yet.

Related Products