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="http://www.google.com/" accesskey="g">Google</a>
OR
<input type="text" name="name" accesskey="n" value="Binny" />
Problems
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.
Solutions
Fortunately the second issue, can be solved in the following ways...
Convention
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.
- Home: access key "1" leads back to the service's home page.
- Skip Navigation: access key "2"
- Documentation: access key "3" leads to the documentation index for the service.
- Feedback: access key "4" leads to the feedback instructions.
Display
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.
0 Comments:
Post a Comment