Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.


Accesskeys - Assigning Shortcuts for your Web Pages

Accesskeys let the web developer assign shortcut keys to an element. This is very easy to do - just put accesskey="CHARACTER" attribute in the element which you wish to create a shortcut for. Pressing an access key assigned to an element gives focus to the element. For example, when a user activates a link defined by the A element, the user agent generally follows the link(IE just focus on the link - you will have to press enter to follow it). When a user activates a radio button, the user agent changes the value of the radio button.

The following elements support the accesskey attribute: A, AREA, BUTTON, INPUT, LABEL, and LEGEND, and TEXTAREA. Some examples...

<a href="" accesskey="g">Google</a>
<input type="text" name="name" accesskey="n" value="Binny" />


If this is so easy to do, why are people not using this? Unfortunately, there is some severe problems with accesskeys. A few are given below.

  • Conflicts with the Browser's shortcuts.
  • Visitors don't know which accesskeys are assigned to an element.


Fortunately the second issue, can be solved in the following ways...


Use some common accesskeys everywhere - this is how it is done in application development. In any application, the shortcut for saving a file will be Ctrl+S. Copy will be Ctrl+C. Due to the repeated use of the same shortcuts, the users will be able to wade through different applications without much trouble. Unfortunately, in the web there is no such conventions. Even if some sites suggest some conventions, the keys they suggest will be different from the keys suggested in other pages. For example, see a tutorial on accesskeys and W3C's recommendations on accesskeys.

I will always recommend that we use W3C's recommendations - so here we use W3C's conventions.

  1. Home: access key "1" leads back to the service's home page.
  2. Skip Navigation: access key "2"
  3. Documentation: access key "3" leads to the documentation index for the service.
  4. Feedback: access key "4" leads to the feedback instructions.


We can show the available Access keys using CSS - there is an excellent write up on how to do this at A List Apart. From the article...

The first problem is that visitors to your website have no way of knowing that you’ve assigned accesskey attributes to your linked elements. Even if they suspect you have, they would have to guess which accesskeys assignments you’ve created. In this article, we’ll look at how to solve this problem, enabling you to clearly but unobtrusively let your visitors know which accesskeys correspond with the links on a page.