Standards, BEST PRACTICE, accessibility, usability, XML
Use first letter as ACCESSKEY
The traditional way of implementing the HTML accesskey attribute using unique letters does not work. I propose always to use the first letter of the link name as access key. The first letter can be generated by code. We badly need are more accessible Internet.
We all love the idea of universal web design and more accessible web pages. A major issue is the reintroduction of the keyboard for navigating web sites. For years the mouse has almost ruled alone on the web and for good reasons. Surfing the web is synonymous with clicking the mouse, because the mouse is second to none when it comes to exploring virtual worlds. You click yourself forward by trial and error, almost as an adventurer with a machete in one hand and a gun in the other.
The mouse is a stroke of genius but the mouse is never the best solution acting alone. It is always faster and more efficient to combine the mouse with the keyboard's shortcut keys. I use Ctrl+N for new windows, Alt+F4 to close windows, Ctrl+P for print and many other shortcut keys hundreds of times a day, not only in traditional office applications but also on the Internet.
Many people have physical disabilities and motor impairments but still want to use the Internet. They need to rely less on the mouse and more on the keyboard and similar more robust devices for navigation. People with functional limitations as a result of computer related RSI (Repetitive Strain Injury) and other mouse injuries also need to use the mouse less. The mouse is great for most of us but we will all benefit by making the web easier to navigate with the keyboard as a supplement to the mouse or even with the keyboard alone.
1. Accesskey
The keyboard jumps from link to link by pressing TAB and SHIFT+TAB to move forward and backward. In order to advance the use of shortcut keys to navigate the Internet, the use of the ACCESSKEY attribute in links and form elements was introduced by W3C in the HTML 4.0 specification. The access key letter works together with the ALT key.
Many web developers have tried to use the ACCESSKEY attribute at least for the major menu items but with very poor results. The reason for this is obvious. The traditional way to implement the ACCESSKEY is inherited from the office applications. In the classical world of computers underscoring a letter signals the access key letter of an item in the menu bar.
This is not a good approach on the Internet, where the whole link is usually underscored. We could use bold as indicator or remove the underlining of links with CSS. But there are many other problems with the traditional approach to the ACCESSKEY.
The menu bar of the traditional office application only has a handful of headings. On the Internet we can have hundreds of links on each web page. We soon run out of unique access key letters and the poor web designer or coder has a hell of a time figuring out what letter to assign to each link.
Unique letters as access keys to links on the Internet fail for another good reason. We can't automate the process of assigning access key letters. A human being has to decide what letter to use for each single link one by one, page by page. Each accesskey has to be coded by hand. Fortunately there is a much better approach solving all our problems.
2. First letter
I propose that web developers always use the first letter of a link name as ACCESSKEY. The users are already acquainted with the first letter principle from lists in the Windows environment. In "My documents", in dialog boxes like "Open" and in Windows Explorer the first letter always takes you to the first item in the list beginning with that letter. If there are several items beginning with the same letter, you just press the same key again, and it will take you to the next item on the list, etc.
The principle of the first letter as ACCESSKEY has three tremendous advantages compared to the traditional approach to ACCESSKEY borrowed from the menu bar in applications. Firstly, you don't have to visually indicate which letter to use as access key. It is always the first. Secondly, you can have access keys to hundreds of links on the same web page because many links can share the same letter. Thirdly, first letter as ACCESSKEY can be generated from databases or your XML data store by code. You don't have do it by hand.
When you generate links server-side with ASP.NET, classic ASP, JSP, PHP, XSLT or any other server-side technology, you just have to generate the link name twice: The first time as ACCESSKEY to the link inside a string function returning the first letter, the second time as link name.
The traditional approach to ACCESSKEY using unique letters had all reasons to fail and it did. Hardly anybody is using access keys to his or her links today except the most enthusiastic accessibility freaks. The principle of the first letter as access key on the other hand has all reasons to proliferate and become a winner.
3. No conflict
It is a common misunderstanding that access keys to links conflicts with access keys to the menu bar in the browser if they use the same letters. The access key assigned to a link on the web page overrules the same letter assigned to the menu bar in the browser. But you can still use both! Pressing the ALT key in different ways in the two situations can solve the problem.
Pressing the ALT key activates the menu bar in the browser. You can then remove your finger from the ALT key and press the access key letter to the item in the menu bar in the browser. When using the ALT key together with the access keys to links on the web page, you have to keep the ALT key pressed down when pressing the access key. Power users should have no problems using the ALT key both ways in order to use the same access key letters to links and to items in the menu bar of the browser if necessary.
Some users will probably have to learn the two different ways of using the ALT key in a classroom. Some users might even benefit from the fact that the F10 key since ancient times also activates the menu bar. If some users have problems using two different techniques for pressing the ALT key, they could use F10 for the menu bar in the browser and ALT for accessing links on the web page.
4. Other browsers
The first letter as access key to links on the Internet works in Microsoft's many different versions of Internet Explorer on the Windows platform that is in more than 90 percent of the browsers in most countries. The minority browser, Opera, though great when it comes to shortcut keys to it's own functionality, has never supported the ACCESSKEY attribute. Very strange considering that the ACCESSKEY attribute is part of the W3C's HTML recommendation (standard).
In the Netscape breed of browsers, the ACCESSKEY has been implemented in a different way. The ACCESSKEY attribute is supported but it takes you not only to the link, it also follows the link bringing you to the new page. This is bad, bad behaviour when we want to use the same access key letter to many links on the same page. We need to be able to check if we land on the right link before following it, and if necessary we need to be able to continue to the next link by pressing the access key as many times as needed in order to get there.
The irony is, that the Netscape implementation of the ACCESSKEY attribute probably is more to the letter of the wording of the W3C specification, if we read it carefully. But Microsoft is without doubt doing it right, if the ACCESSKEY attribute ever is going to make sense. We need to be able to use hundreds of access keys on each page, to generate them without effort based on the first letter, and to be able to move on to he next link with the same access key. W3C needs to clarify the specification in order to remove any doubts.
5. FIRST LETTER ACCESSKEY
FIRST LETTER ACCESSKEY is great not only because of all the mentioned benefits and because it already works in more than 90 pct. of the browsers, but also because it is to the disadvantage of none. If a web designer wants to use the ACCESSKEY attribute the old way, he or she can do it without problems. The few websites using accesskeys in the past, does not have to be upgraded, they still work. Organisations wanting to assign unique access key letters or numbers to special pages or functionality can still do that, though it is VERY BAD PRACTICE.
The HTML ACCESSKEY should be used primarily to links, because the web consists of billions of billions of links. This is where the ACCESSKEY can make a difference and make the web more accessible. Secondarily the ACCESSKEY could be used for form elements. In form elements the accesskey could be generated by code by putting the label-name inside the string function returning the first letter. Accesskey should never be used for the submit button the way it works today. Even in Internet Explorer selecting the submit button using access keys submits the form instead of just selecting the button. Individual letters should never be degraded to meaning just one thing like "H" for "Homepage" and "S" for "Search". This is the job the F-KEYS, the function keys, are supposed to do. Use them!
We need FIRST LETTER ACCESSKEY, if the ACCESSKEY is ever going to be of any real value. Should the principle of FIRST LETTER ACCESSKEY interfere with a few browsers or some assistive devices, then they must change the way they work. They most comply to the accessibility revolution of the Internet or die!
Example (1)
The Danish Parliament, www.folketinget.dk, uses tooltips to indicate what access key to use. Why Alt+Q is used for "documents" is anybody's quess! Tooltips are better than nothing, and could work if you use the website on a regular basis. But it is a bit of a joke to point the mouse to a link in order to reveal the tooltip and then use the shortcut key!
Example (2)
The Danish National IT and Telecom Agency, www.itst.dk, uses bold to indicate the access keys since the links are already underscored. This method is a much better solution than the previous one, but just as impracticle in the real world. No wonder that access keys are only used for five links in the menu bar. In the English version of the website the access keys are not even indicated.
Both the Danish Parliament and The Danish National IT and Telecom Agency uses the old approach assigning unique letters. This implementation of the ACCESSKEY attribute can only be done manually and has no chance of ever becoming popular on the Internet.
Example (3)
Www.azero.dk, a small Danish host of web hotels, is doing it right. The first letter of the link name is underscored and since hundreds of links on the website are marked the same way, we most conclude that the access keys are generated in an automatic manner when the web pages are generated from a relational database.
If the use of the first letter as accesskey becomes the order of the day, there will be no need to indicate the access keys in the link name. It is always the first letter. This is how I do it on SmackTheMouse.com, try the Danish version of the web site. All my access keys are generated without effort at the time of the XSLT transformation of my XML data store.
6. Conclusion
The use of the first letter as access key generated automatically is so powerfull an approach that it will work reasonable on all existing web sites without any other changes to the layout or to the coding of the web pages. There will always be cases where it works less than perfect, but then the web developer can optimize the implementation by hand, if it is not too much trouble.
You have three good choices for indicating the first letter as access key in each link name. 1) Underline the first letter, 2) use bold and/or color for the first letter, 3) or do what I am doing: Just use the first letter as access key without any indication in the link name. But tell your users what you are doing in some sort of HELP-file.
7. Perspective
First letter as access key should be implemented already today by the authors of web pages. But in the long run, it is also an issue for browsers and other user agents. One day the browsers should by default generate first letter of the link name as access key to the link for all links encountered on a web page.
The author of a web page should still be able to overrule the browser by using the ACCESSKEY attribute explicitly. By setting the ACCESSKEY = "", the author tells the browser not to generate an access key for that link. ACCESSKEY = "letter or digit" tells the browser to use the access keys assigned by the author.
In CSS(4?) the author of web pages should be able to turn the default behaviour of the browser off on all web pages using the style sheet. It could be done by some syntax like: A{accesskey: none}. The author also needs to be able to turn the default behaviour back on with syntax like: A{accesskey: auto}. It is up to W3C to give us better recommendations for the use of the ACCESSKEY attribute in the proper specifications for HTML, XHTML, CSS, user agents and WAI.
Copyright © Jesper Tverskov, 2002
Last updated 2006-08-28
[+] Appendix