Accesskeys: Unlocking Hidden Navigation

by
Published in Accessibility, Browsers, CSS, HTML

Who can use your website? People with limited mobility may have a hard time controlling a mouse to click on links, and tabbing through menus can be slow going. The W3C introduced the accesskey attribute to enable users to select the appropriate key on their keyboards and navigate to a particular link.

Article Continues Below
Article Continues Below

Accesskeys can also be useful to people who have no trouble controlling the mouse and clicking on links. Experienced users of desktop applications learn to use keyboard short-cuts to save files, open new windows, or copy and paste text. Assigning accesskeys to menu items adds “Hot-Key” functions to a website, letting frequent users spend less time less time moving and clicking the mouse. This solution, however, has been largely underused because it almost always fails due to two major flaws.

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.

A further problem that has delayed the adoption of accesskeys, is that several otherwise excellent, standards-compliant browsers still do not support accesskeys at all. (See “Accesskey Denied” for a list of non-accesskey browsers.) We can’t solve that problem here, but by pointing it out, hope to encourage browser makers to improve their support for this important web standard.

Command and Control#section2

Windows users can navigate with the accesskey feature by typing ALT+Accesskey. On the Mac, you would use CTRL+Accesskey (not COMMAND+Accesskey, which can produce undesired effects). Internet Explorer users may also need to hit the “enter” key to activate a link.

Windows users will find that accesskeys take precedence over application commands, which can still be accessed from the keyboard by first typing the menu shortcut key (usually ALT) followed by the letter corresponding to the desired menu item.

Public Access#section3

The accesskey is a useful feature, but most web browsers lack a standard way of presenting the letter assignments. Users could view the source code for a page to see assignments, but that defeats the purpose of making a website more accessible and user friendly. If people don’t know which accesskeys are associated with each link, they are of limited value.

The most straightforward way of letting users know which accesskeys are available and which links they correspond with is to create a help or reference page. This approach requires users to visit this page to learn how your site works before they can use the accesskeys. Anyone who doesn’t like to read manuals might be inclined to ignore this page. Unless they visit your site regularly, many users will also forget the accesskey assignments between visits.

The accesskey can be explicitly displayed, appearing in brackets immediately after each link. This is very easy to implement, and doesn’t require users to refer to a reference section before being able to use the accesskeys. However, It does force you to change both the content and design of your pages to accommodate this information. Displaying the accesskey assignments might not be relevant or useful to everyone, and some people might prefer that it not appear onscreen at all times.

Link ’Em Up#section4

This brings us to consider less-obtrusive but still informative methods of hinting at accesskey information. Since the accesskey feature is similar to the keyboard commands in a desktop application, we can look to these interfaces for other ideas for how to display this information to users.

Menus in applications often have a single letter underlined that corresponds to the keyboard shortcut for that item. Since many users will be familiar with this convention, we can use it to indicate the accesskey assignment for a link. By underlining a single letter and setting it as a link element’s accesskey attribute, users will know which accesskeys correspond with each link.

While there is an underline tag, it became deprecated in HTML 4.0 and should no longer be used. Instead, we’ll place emphasis tags around the first letter of each link:

Home

We can then use a CSS contextual selector to define that emphasized text within a link will be underlined, while the text in the rest of the link will not. We can also set the style and weight of the emphasized text so that aside from the underlining, it matches the rest of the link. A rollover effect could also be added to underline the entire link by using the :hover pseudo-class:

a {
text-decoration: none;
   }a em {
font-style: normal;
font-weight: normal;
text-decoration: underline;
    }a:hover {
text-decoration: underline;
    }

This technique is relatively easy to implement, works with most modern web browsers and allows you to underline any letter within a link to indicate the accesskey attribute. However, it does require you to add <em> tags to all the links with accesskeys in your documents.

(Jeff McCartney suggested that I consider underlined characters to indicate accesskeys, and has since implemented this technique for The Ontario Ministry of Energy.)

First Impressions#section5

The next method we’ll look at uses a CSS 2 pseudo-element to specify that the first letter in our links is underlined, while the remainder of the text is not. This approach doesn’t require you to change the actual content of the document, allowing you to keep style and content separate:

a { text-decoration: none;}a:hover { text-decoration: underline;}a:first-letter { text-decoration: underline;}

The :first-letter pseudo-element controls the style of the first rendered character of a block element. Since links are normally inline elements, this wouldn’t apply to the first letter of any regular links on a page. The only links that would have their first letter underlined would be those that were also set to display:block.

By using a custom class we can underline the first letter in our menu items while not affecting the rest of the content on the page. we’ll use this code a little later in the article to build a pure css menu:

.menu a {
display: block;
width: 150px;
   }

Web Browser Blues#section6

Netscape 7 supports the :first-letter pseudo-element being applied to a link quite well, but Internet Explorer’s support is somewhat buggy. To work, it must be applied directly to the link element, without use of custom classes or IDs. Furthermore, once applied to a link element it seems to interfere with Internet Explorer’s ability to use the :hover pseudo-class to create rollover effects.

The fix, strangely enough, is to make sure there is a style for a link within a custom class included somewhere in your style sheet. Something like this:

.content a {
color: #f30;
background-color: transparent;
   }

The actual attributes you set don’t seem to matter — the very existence of a rule for a link within a custom class seems to be enough to fix this bug. If your style sheet doesn’t normally include this type of rule, just add this extra one to fix the bug:

.ie_fix a { text-decoration: none; }

Using the first-letter pseudo-element with a link element doesn’t work for some Opera and Gecko-based browsers. The first letter of your links won’t be underlined in these browsers, but we can use another technique to display accesskey information to these users.

Pseudo Generation#section7

The CSS 2 :before and :after pseudo-elements can create content and insert it into the document. The content created in this manner can include counters, embeddable objects, images, and strings of text. This text can be dynamically generated from the content of one or more of the parent element’s attributes. When applied to a link these attributes include the URL, title, language, link-type, and the one we’re focusing on: accesskey.

This code will insert the accesskey assignments in parentheses immediately after each link on a page without changing the underlying content of the document:

a:after {
content: " [" attr(accesskey) "] ";
   }

Displaying this information makes accesskey more useful, but as we mentioned earlier, many people would prefer that it not appear onscreen at all times. Fortunately, we can give users some control over when to include this information.

Selective Display#section8

We can selectively display CSS-generated content by using a style sheet switcher to change the CSS files used to display the page. People will then have the option of choosing a style with enhanced accessibility options, including the display of the accesskey attribute after each link. If they don’t want to see this information onscreen, they can select a style sheet that doesn’t include the CSS generated content. The ability to use the accesskey feature will still be available all users, regardless of the style sheet they are using to view the page.

A second method for selectively displaying accesskey information, is to make use of a contextual selector to specify that the generated content is only displayed when the user rolls over a link. The :after pseudo-element is added to the the :hover pseudo-class in the selector chain that is applied to the link element.

We’re looking at ways to improve support for keyboard navigation, so we’ll also use the :focus pseudo-class, which changes the appearance of a link when a user tabs onto it, rather than moving over it with their mouse. We can set the CSS properties for both :hover and :focus at the same time by using a comma to group the two contextual selectors together:

 
a:hover:after, a:focus:after {
content: " [" attr(accesskey) "] ";
  }

The generated accesskey text that appears when a link is tabbed or rolled over may cause the surrounding elements and text to shift to accommodate the changing length of the link. This can create an undesirable visual disruption as lines of text change their position on the page. Displaying accesskey information during a rollover works best when the link element has a fixed width, as might be the case with menu items.

CSS Menu with Accesskey Info#section9

we’ll use both of the CSS techniques we’ve covered to create a menu that displays accesskey information. You can refer to CSS Design: Taming Lists for more detailed instructions on using style sheets to create menus from bulleted lists. Some browsers such as Internet Explorer will display these menu items with the first letter underlined. Other browsers, such as Mozilla will display the accesskey when the the menu item is rolled over or focused. Some browsers, like Safari, will display both types of accesskey hints. All browsers that support this feature will be able to use the accesskeys regardless of the manner in which they are displayed.

<!– The ALA template already has a div with id=”menu” so we’ll use “akmenu” instead. –>

Our menu was created using the following markup:

We’ll place our list within a DIV given the ID “menu”. Our style sheet rules can then use this ID to apply to this specifc list, while leaving any other lists on the page unaffected:

a { text-decoration: none;}a:hover { text-decoration: underline;}a:first-letter { text-decoration: underline;}
 
.ie_fix a { text-decoration: none; }  #menu {
width: 8em;
border: 1px solid #000;
border-top: none;
padding: 0;
color: #333;
   }#menu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
   }
  
#menu li {
border-top: 1px solid #333;
margin: 0;
   }#menu li a {
color: #003366;
background-color: #fff;
display: block;
padding: 5px 5px 5px 0.5em;
text-decoration: none;
width: 100%;
   }html>body #menu li a {
width: auto;
   }
    
#menu li a:hover {
background-color: #003366;
color: #fff;
   }
    
 #menu li a:hover:after, #menu li a:focus:after {
content: " [" attr(accesskey) "] ";
   }

{Ed. Note: Since this article was first published, a few color and size values have been changed to better match the ALA 3.0 template.}

Accesskey Denied#section10

The accesskey attribute is currently supported by the following web browsers:

Other web browsers including Camino, Galeon, Konqueror, Omniweb, and Safari have otherwise excellent support for web standards, but have yet to include this W3C-recommended feature.

Moving Forward#section11

Providing support for keyboard navigation makes a website easier for everyone to use. Browser manufacturers can help by ensuring their products include better support the accesskey attribute. I hope some of these suggestions will encourage you to begin experimenting with accesskeys.

126 Reader Comments

  1. Hello all, never knew there was a forum here so I’ll copy a post I just made in another forum. :), I hope someone here can help.

    Hello all once again.
    Ok, I have been playing about with css and looking around many different sites till I found an article from ‘a list apart’: Click here to view

    So, Here is the page I want two be able to change: click here

    I have this in the Head :

    quote:
    ——————————————————————————–
    ——————————————————————————–

    and these are the links in the page:

    quote:
    ——————————————————————————–
    change style to default

    change style to red
    ——————————————————————————–

    The .js files contains this:
    function setActiveStyleSheet(title) {
    var i, a, main;
    for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
    if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”)) {
    a.disabled = true;
    if(a.getAttribute(“title”) == title) a.disabled = false;
    }
    }
    }

    function getActiveStyleSheet() {
    var i, a;
    for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
    if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”) && !a.disabled) return a.getAttribute(“title”);
    }
    return null;
    }

    function getPreferredStyleSheet() {
    var i, a;
    for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
    if(a.getAttribute(“rel”).indexOf(“style”) != -1
    && a.getAttribute(“rel”).indexOf(“alt”) == -1
    && a.getAttribute(“title”)
    ) return a.getAttribute(“title”);
    }
    return null;
    }

    function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = “; expires=”+date.toGMTString();
    }
    else expires = “”;
    document.ignore = name+”=”+value+expires+”; path=/”;
    }

    function readCookie(name) {
    var nameEQ = name + “=”;
    var ca = document.cookie.split(‘;’);
    for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); } window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); } var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title);[/QUOTE] So I have it all uploaded but when I try to change to the red theme nothing happens and when I try to open the .js file I get an error. Can someone plz help Once again: click here to see the page I am working on. Thank you

  3. As well as pressing and releasing Alt to activate the Windows menu bar, the following also works in both Windows 95/98/XP AND Linux/Unix (I haven’t checked Macx recently)

    Just press the F10 function key, and the file menu will be highlighted…

    And to answer somebody above, Yes, Wap/WML does support accesskeys, where they are actually much more important considering many people will be using a mobile phone!

    Anyway, I fully support the numerical scheme as suggested by the UK government. You can’t go far wrong with numbers, and I can only hope that this becomes an international standard on every site. After all, Ctrl+C is ALWAYS copy in every application, isn’t it?

  8. If you are on a web page with, for example, the accesskey F it usually (IE NS Moz I’ve tried- but I have no Mac) is no problem to chose whether you want the file menu: Press and RELEASE [Alt] then [F]-viola you have file menu, or the accesskey: Press and HOLD [Alt] and press [F] you get the page element connected to F. Works fine.

    There can be some problems if you have frames. Ctrl + Tab can change the focus so you get to the right frame. It can also be a way to activate the page (w its accesskeys) without having to “click” in the page.

    Having info about accesskeys in title for a link can be useful if it is a common link that the persoen may use again later. (Otherwise it is rather unnnecessary since you already have the mouse there when you see the title).

  9. My experience (IE NS Moz on Windows) has been that there is no big problem with browser shortcuts and acceskeys. For example if I have a page with an accesskey F going to link “Fun and Games” but I want to open the File menu. In that case I press and RELEASE [Alt] and then press [F] and get the File menu. If I want the acceskey I press and HOLD the [Alt] and press [F].

    I like the IE variant with [Enter] to confirm, which makes it possible to handle situations with a) two or more identical accesskey on a page with sevaral frames b) actually wanting to jump to a link next to one with an accesskey.

    Another problem can be choosing which frame I want to be in. Ctrl + Tab can change the focus. I believe this can also solve the problem of not reaching the accesskey before “mouse click”ing on the page, which is not very consistent with keyboard steering.

    I would like to warn against schemes that just can mark the first character. If several choices have the same first letter, it should be easy to choose another.

    Since I prefer underlined links to “hard to find” ones I was happy to find that “overline” with stylesheet gave a (rather) familar marking way that was compatible with “classic” underlined links. (Interesting that Linux Konqueror browser didn’t underline the overlined character in an underlined link, tho IE NS did both. No problem tho.)

  10. Why don’t people just use this type of Java Script to make one-touch hotkeys? I am not sure if they work on all or even many browsers, but they work well in IE.

    ——————————-


    This site equipped with Key Launcher!

The following launcher keys are available:

Press the letter 'h' for: Home Page
Press the letter 'f' for: Feedback Page
Press the letter 'n' for: What's New Page
Press the letter 's' for: Site Contents


    Free JavaScripts provided
    by The JavaScript Source

    ———————————

    This is puplished with a working demo at
    http://javascript.internet.com/navigation/key-launcher.html

  11. http://javascript.internet.com/navigation/key-launcher.html

    has a working Java Script that allows one-key hotkeys. Look Ma, NO ALT KEY! I have modified a version of this to launch both scripts ( many based on my favorite bookmarklets such as a CSS file switcher ) an links ( such as the link to the index, help page, or NEXT page in a browsable catalog. ) IS anyone interested in such a .js file? Post here if you are. I will past my site’S URL if interest is demonstred here.

    my e-mail account is winjapan on y*hoo.com

  12. Does anyone use, like, or distrust the Java Script found on
    http://javascript.internet.com/navigation/key-launcher.html
    that launches links at the touch of a single key? This does not require Alt or Control keys! With modification, I use it to launch Java Script functions at the touch of single keys. Imagine running a bookmarklet for your user when she types a single keystroke! I have used this to toggle table grid css files on and off for debugging in the design stage of my site. I also use it for zoom and NEXT/BACK keys in an on-line catalog containing a series of pages. KNow a better script or method to do this? Let everyone know. Let me know.

    Post comments here or write to me at winjapan on my com.yahoo account. (reversed to block spam)

  14. Access keys are only valuable if there is a standard set across applications or if the same user frequents your site/application very often and has time to learn your accesskeys. Users don’t want to think about learning how to use your site, they just want to use it, and quickly. I develop web and windows applications and the majority of my daily users stick with the mouse even when accesskeys are available. Even after training only a very small percentage start using accesskeys, and then they only use the common ones they remember. They typically don’t search out any other accesskeys to use, that takes time and energy. Unless the user has a true need, such as a disability or repetative tasks, accesskeys will rarely be used by most of your users. As a develper, you perform the same repetative tasks day after day and quickly adapt to accesskeys to speed things up. Don’t make the mistake of comparing your skills and needs of those of the average user.

  15. In one of the websites we built, we used the First letter approach to indicate the accesskey, just as your first suggestion. The only disadvantage you mention is that this requires you to add to all your accesskeys.

    I have found another major disadvantage: some speech browsers will mispronounce the word, splitting it into two: “F” “irst”. Especially when indicating an accesskey that is _not_ the first key, this can be very co n fusing (if you see what I mean).

  16. Gareth Plevin wrote you shouldn’t use “F,E,V,A,T,H,G,B,W,N,M” as accesskeys since these are used in standard browsers to access the menus. I totally agree with him on that point.

    I want to point out however, that I don’t know what language my visitor’s browser uses. I’m Dutch myself, and most people here use a Dutch operating system where the File menu is called “Bestand” with accesskey B. This means in a Dutch Internet Explorer, you get a completely different set of accesskeys to exclude.

    Since I cannot predict what language the browser of my visitor is in, I cannot predict what letters will already be in use. And that’s just the browser. Who knows what other tools or assistive technology users have installed and attached accesskeys to which will be hijacked by accesskeys defined in a page…

    Unless and until user agents will disallow overwriting of the browsers accesskeys (or make this an option), I think it’s safer to stick to numerical accesskeys…

  17. As mentioned earlier: why not using W3C’s HTML4-defined Link-types more often?

    Why can’t they make the function-keys available for using with accesskeys?

  18. it seems to me tab is a better way to go for easy link access than access keys. unless you have a ton of links. access keys are limited too right? what happens if you have more than 100 links and wish to use access keys for all?

  20. On an intranet-wep-application I wrote the accesskey-feature were only added in release 2 and not surprisingly: The user-experience increased quite a lot on release 2.

    On feature I like very much is to underline the letter of the accesskey, but my application uses buttons to submit web-forms.

    Up until now I haven’t been able to figure out a way to underline one letter of the text of a button. For now I add (x) behind the text on the button.

    I still have to look in to the full CSS2-specs if it’s possible, but if someone has any suggestion, ……

  22. DiveIntoAccessibility.org suggests using some common access keys. By standardizing on a few, it’s easier to find the rest. They suggest:
    Access Key 1 = Home page
    Access Key 2 = Skip navigation link
    Access Key 9 = Contact us form
    Access Key 0 = Accessibility statement where, among other things, you can describe the rest of the access keys.
    Another link that suggests standardizing on some common access keys: http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

  23. This prototype usage of one-touch access keys links next and back to the present page.
    (+, -)

    For me, the developer, it can call report making scripts to list
    1. estimated download time.(q)
    2. images and alt properies.(m)
    3. all link href values. (l)

    I can also zoom the page of main gif. (i, o)

    Text is Japanese
    – look in html code for list of hotkeys in English.

    What are people’s thoughts on this? It does not seem to interfere with Alt-F of Alt-E. IT DOES not make any sense to use on any page with an input textbox since input becomes impossible. THE JS file will be updated and reanemed… so do not link your site to it, folks! If anyone would like to use the JS file, please write to me at my yahoo.com address about it. If anyone can better the table functions, write me and we shall post or permanently host them FOR MOR DEVELOPERS TO USE!
    –Walter-

  25. This was a terrible article, but what do you expect from ALA? This is a typical Javascript job. Using CSS for behaviour is very stupid. This is going on my website on Friday.

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

I am a creative.

by
A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Career