Accesskeys: Unlocking Hidden Navigation

by Stuart Robertson

126 Reader Comments

Back to the Article
  1. hey Simon, instead of underlining or bolding the accesskey queue play with the value of the letter. Or you could mess with its opacity, or hue, or …something else that isn’t so techy/clumsy as adding typographic junk. Although underlining a letter is pretty much the same typographically as underlining a link in a paragraph (ugly but it works). Pretty soon I’m going to need more buttons and meta keys on my mouse and keyboard if this trend keeps up. Looking forward to the day when all the chrome disappears and the menus appear on the rendered-web-page (out of nowhere) based on key+mouse input.

    Copy & paste the code below to embed this comment.
  2. I think the only sensible way of using access keys is to use a defined standard.

    At the moment I am in the process of pushing through a redsign of a local government web site (nothing live from the redesign, so no link :p). We have settled on the UK e-government standard for access keys. The more widespread these become, the easier it will be for users to remember which keys are available, and what those keys always link to.

    All we then need to do is to indicate that their use is available, and to provide a list for those who need to know. The UK e-gov standard defines the following access keys:

    S – Skip navigation
    1 – Home page
    2 – What’s new
    3 – Site map
    4 – Search
    5 – Frequently Asked Questions (FAQ)
    6 – Help
    7 – Complaints procedure
    8 – Terms and conditions
    9 – Feedback form
    0 – Access key details

    I beleive that non-standard access keys have little use as they will be different across different sites, thus adding very little to the user experience.

    Copy & paste the code below to embed this comment.
  3. Hey I keep trying to validate as AAA at BOOBY… 508 no prob, but using javascript to force IE to pretend to be compliant… that seems to me that it will cause the page to fail AAA validation… help me out here :)

    Here is what I am working on not done but in the pipe for the 10th time :)
    http://tentonweb.com/2003b/

    Jim S.

    Copy & paste the code below to embed this comment.
  4. I tried using Peter’s example but it isn’t working for me. Explorer still requires the Enter key. I know very little about DHTML behaviors…do I have to do anything not mentioned in his explanation to make it work?

    Copy & paste the code below to embed this comment.
  5. Here is the link to the post I mentioned:

    http://www.alistapart.com/stories/accesskeys/discuss/3/#ala-1996

    Copy & paste the code below to embed this comment.
  6. Someone asked about the possibility of double underlining the access-keys and thus leaving the link underlined:

    solution one – puts the doubled line over the main underline

    a { text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px; padding: 1px; }
    a em { font-style: normal; font-weight: normal; text-decoration: underline; }

    solution 2 – puts the doubled line under the main underline:

    a em { font-style: normal; font-weight: normal; border-bottom-style: solid; border-bottom-width: 1px;}

    Copy & paste the code below to embed this comment.
  7. I’ve recently discovered the label tag. It allows you to connect text labels to form elements. The label also carries an accesskey attribute which focuses the control to the form element specified by the for attribute. It’s way cool in this context.

    Copy & paste the code below to embed this comment.
  8. unless there is standard like what we have in desktop application (Alt-f for file and so on), I don’t see the necessity to have it. Users who have difficulty moving the conventional mouse, they would likely to have difficulty pressing ALT and the letter. They’d be better off getting a track ball mouse. what do you think?

    Copy & paste the code below to embed this comment.
  9. hhh

    Copy & paste the code below to embed this comment.
  10. I think you have /no/ clue what you’re talking about.

    Ever used a speach input program? Depending on the quality of the program (especially one designed for the handicapped) it’s usually fairly easy to input a keycombo, without moving anything but your jaw.

    Stickykeys (which was mentioned earlier in the thread) can be used by a user who types with a mouthstick or a single finger to press the two keys as seperate motions. The mouthstick user could not /possiblly/ use a trackball, and though the user with a single working finger /might/ be able to use it it would be signifigantly more difficult than the keyboard.

    Copy & paste the code below to embed this comment.
  11. 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:
    ————————————————————————————————————————
    <LINK rel=“stylesheet” href=“green.css” type=“text/css”>
    <link rel=“alternate stylesheet” type=“text/css” href=“red.css” title=“red” />
    [removed][removed]
    ————————————————————————————————————————

    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++) {
    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++) {
    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++) {
    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 = [removed].split(’;’);
    for(var i=0;i < ca.length;i++) {
    var c = ca;
    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. {
    var cookie = readCookie(“style”);
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
    } window. {
    var title = getActiveStyleSheet();
    createCookie(“style”, title, 365);
    }

    var cookie = readCookie(“style”);
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);

    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

    Copy & paste the code below to embed this comment.
  12. Plz email me the answer as I cant find where my post is! :(

    Thank you

    Copy & paste the code below to embed this comment.
  13. 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?

    Copy & paste the code below to embed this comment.
  14. You forgot to include the AMAYA browser, which also supports accesskeys from (I think) version 5.0.

    Copy & paste the code below to embed this comment.
  15. Well done!

    Copy & paste the code below to embed this comment.
  16. Nice work, congratulations!!

    Copy & paste the code below to embed this comment.
  17. well done

    Copy & paste the code below to embed this comment.
  18. 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).

    Copy & paste the code below to embed this comment.
  19. 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.)

    Copy & paste the code below to embed this comment.
  20. Why don’t people just use this type of JavaScript to make one-touch hotkeys? I am not sure if they work on all or even many browsers, but they work well in IE.

    ———————————————-

    <!—TWO STEPS TO INSTALL KEY LAUNCHER:

    1. Copy the coding into the HEAD of your HTML document
    2. Add the last code into the BODY of your HTML document—>

    <!—STEP ONE: Paste this code into the HEAD of your HTML document—>

    <HEAD>

    [removed]

    <!—This script and many more are available free online at—>
    <!—The JavaScript Source!! http://javascript.internet.com—>

    <!—Begin
    var key = new Array(); // Define key launcher pages here
    key[‘h’] = “http://javascript.internet.com/index.html”;
    key[‘f’] = “http://javascript.internet.com/feedback.html”;
    key[‘n’] = “http://javascript.internet.com/new.html”;
    key[‘s’] = “http://javascript.internet.com/toc.html”;

    function getKey(keyStroke) {
    isNetscape=(document.layers);
    // Cross-browser key capture routine couresty
    // of Randy Bennett (rbennett@thezone.net)
    eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
    which = String.fromCharCode(eventChooser).toLowerCase();
    for (var i in key) if (which == i) [removed] = key;
    }
    document.onkeypress = getKey;
    // End—>
    [removed]
    </HEAD>

    <!—STEP TWO: Copy this code into the BODY of your HTML document—>

    <BODY>

    <center>
    <table border=0><tr><td>
    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

    </td></tr></table>
    </center>

    <center>
    <font face=“arial, helvetica” size=”-2”>Free JavaScripts provided

    by The JavaScript Source</font>
    </center>

    <!—Script Size: 1.52 KB—>


    ————————————————-

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

    Copy & paste the code below to embed this comment.
  21. http://javascript.internet.com/navigation/key-launcher.html

    has a working JavaScript 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

    Copy & paste the code below to embed this comment.
  22. Does anyone use, like, or distrust the JavaScript 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 JavaScript 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)

    Copy & paste the code below to embed this comment.
  23. dsfsd

    Copy & paste the code below to embed this comment.
  24. 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.

    Copy & paste the code below to embed this comment.
  25. 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 <em> 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).

    Copy & paste the code below to embed this comment.
  26. 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…

    Copy & paste the code below to embed this comment.
  27. 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?

    Copy & paste the code below to embed this comment.
  28. 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?

    Copy & paste the code below to embed this comment.
  29. Good article in favor of using first letter accesskeys.

    http://www.smackthemouse.com/20021031

    Copy & paste the code below to embed this comment.
  30. 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, ……

    Copy & paste the code below to embed this comment.
  31. Hello, I just wanted to say you have a very informative site which really made me think, Thanks !

    Copy & paste the code below to embed this comment.
  32. 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

    Copy & paste the code below to embed this comment.
  33. 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-

    Copy & paste the code below to embed this comment.
  34. http://www.konoe.co.jp/neji/pro1/151004_00_0.html

    Copy & paste the code below to embed this comment.
  35. 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.

    Copy & paste the code below to embed this comment.
  36. Take a look at jstimes.vze.com….DC slammed this crappy article.

    Copy & paste the code below to embed this comment.