Standards, BEST PRACTICE, accessibility, usability, XML
Access key, HTML accesskey generated by JavaScript
One of the great advantages of using first letter of the link text as access key is that it can be generated by code. Conventional wisdom states that it should be done server-side. Bad that it is much easier with JavaScript.
- First letter in Internet Explorer
- First letter in Mozilla
- Access keys generated by code
- Access keys generated server-side
- Access keys generated by JavaScript
- Degrading gracefully
- Common sense accessibility
Always to use the first letter of the link text as access key to the link has many advantages:
- Users don't have to learn the access keys used at a particular web page or web site. It is always the first letter of the link text.
- Authors of web pages don't have to ruin the look of their pages by having to indicate the access keys with contrasting color, bold, underlining or parentheses.
- Authors don't have to waste their time inventing consistent systems of access keys across a web site. It is always the first letter.
- The number of access keys are not limited. The same key can be used many times on the same page if necessary.
- Authors don't have to waste their time assigning unique letters to each link by hand. First letter access keys can be generated by code.
In my article, Use first letter as ACCESSKEY, you can read about the basics of using access keys.
1. First letter in Internet Explorer
Using first letter as access key only works in Internet Explorer. IE is the only browser, as far as I know, that have implemented HTML accesskey in a way that could make the Internet more accessible for keyboard users.
Internet Explorer allows for many links to have the same access key if necessary. The access key only move the cursor to the link, it does not follow it. If you don't land on the right link, you just press the same access key again, and the cursor moves to the next link using that access key.
This IE implementation of HTML accesskey is a great beginning. IE is used by more than 90 percent of the users in most countries. In a country like Denmark the percentage of IE users are almost 99 percent. If just a handful of influential web sites implement first letter of the link text as access key, marginal browsers with completely unworkable implementations of HTML accesskey would have to change their ways over night or die.
2. First letter in Mozilla
Using first letter as access key is such a powerful concept that a browser like Mozilla has adopted it as a browser feature. It is called Find As You Type. Just press an ordinary key and the browser (Mozilla 1.6b) takes you to the first link containing the character of the key. If the same key is pressed again it takes you to the next link beginning with that character. Actually it is a little more complicated with a lot of options, but the feature has a setup file. The default should be first letter of links only.
All browsers should implement "Find As You Type". It could reduce the need for HTML accesskey to almost nothing or to special cases. All browsers should also implement HTML accesskey like IE making first letter HTML access keys possible. In this way we get all the access key tools we need to be able to cope with all situations.
3. Access keys generated by code
Conventional wisdom would say that access keys should be part of the markup in order to be available for all users. If access keys are generated client-side by JavaScript, a few users don't get the access keys, if they use browsers or other user agents where JavaScript is not available or turned off.
Best Practice is to generate first letter access keys server-side, but only as a rule of thumb. Second best practice is often the best in the real world or in most situations or more than good enough after all. There are many advantages using HTML accesskeys client-side. Let us first indicate the problems server-side.
4. Access keys generated server-side
In theory it is easy to generate first letter access keys server-side. But it is a lot more work server-side than client-side. Let us use the web pages of www.SmackTheMouse.com as example.
On some of my asp.net pages, in the so-called CODEBEHIND files, we find a few links made by hand. Here I most remember to put in the access keys, and I most remember to change them, if I for some reason change the link texts.
Some of the CODEBEHIND files also have many links generated from my XML data store. Then it is easy also to generate the access keys to the links. It just takes a little string manipulation to take the first letter out of every link text and to use that letter as access key. But I must remember to add the code to generate the access keys.
Most of my web pages primarily use asp.net and C# to generate XHTML from XML by the use of XSLT. Here it is also easy to generate the access keys, but I most remember to add the code, and it does not make the code easier to read or to maintain. Some of my links exist already in the XML data store and is copied out of it. Here I most remember to put in access keys by hand, and to change them if I for some reason change the link texts.
It is easy to understand how an access key can be lost or forgotten in the whole process, or why some access keys are just plain wrong. This is especially true at an experimental web site constantly under remake and construction.
5. Access keys generated by JavaScript
Now consider the beauty of generating first letter access keys using JavaScript.
All you need is these few lines of code. Copy and paste them into your existing external JavaScript your files are already using for other reasons. When the pasting is done, all your access key worries for all your existing links and for all your future links are gone for ever.
function accesskeys()
{
if (document.getElementsByTagName)
{
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++)
{
var anchor = anchors[i];
anchor.accessKey = anchor.innerHTML.substring(0,1);
}
}
}
window.onload = accesskeys;
When ever you add a page or a link to a page, the first letter access key is already there. When ever you change a link text the new first letter access key is already assigned. Even if you have an old web site with hundreds of links without access keys today, it will only take a few minutes to add access keys to all the links if an external JavaScript is already in place.
The access keys are only generated if the browser supports JavaScript and the support is turned on and only if it is a standards compliant browser supporting W3C DOM. This is tested with the expression: "if getElementsByTagName". The "for"-loop finds all anchors, the expression "anchor.innerHTML.substring(0,1)" takes the first letter out of the link text, and the expression "anchor.accessKey =" assigns the letter as access key to the link.
6. Degrading gracefully
It is Best Practice not to let anybody down. There should also be room for a text browser like Lynx (no JavaScript), for lazy or inexperienced users with old technology and even for crazy mislead virus-scared users turning JavaScript off in the world's best browser.
But it is also Best Practice to encourage users to upgrade to the newest technology. If we work for usability and accessibility we should always encourage users to upgrade. It gives the user a much better experience. Nothing is letting weak users more down than to keep them going on outdated technology. Weak users deserve the best to be able to cope.
It is newer wrong to make web pages a living argument for users to upgrade. Up-to-date standards compliant browsers are great for all users and even more for weak users, great for web designers, great for helpdesks, great for browser vendors, and great for security.
7. Common sense accessibility
What about users with browsers not supporting first letter of the link text as access key the way Internet Explorer does? Or the way Mozilla does in it's own indirect way with the unique "Find As You Type" feature? Let these users petition their browser vendor for a new and better browser.
That's the way users can fight for a more accessible Internet: Always go for the best browsers, always demand better browsers, and always leave bad browsers behind.
Copyright © Jesper Tverskov, 2003
Last updated 2006-08-30