Slash Boxes
NOTE: use Perl; is on undef hiatus. You can read content, but you can't post it. More info will be forthcoming forthcomingly.

All the Perl that's Practical to Extract and Report

use Perl Log In

Log In

[ Create a new account ]

TorgoX (1933)


"Il est beau comme la retractilité des serres des oiseaux rapaces [...] et surtout, comme la rencontre fortuite sur une table de dissection d'une machine à coudre et d'un parapluie !" -- Lautréamont

Journal of TorgoX (1933)

Wednesday August 20, 2003
05:02 AM

HTML Accesskeys

[ #14219 ]
Dear Log,

Accesskeys are fun. These are keyboard shortcuts in HTML that you set up with an accesskey="x" attribute on an a href element or various kinds of form-input elements. Basically, accesskey="x" means you get to that thing via alt-x or option-x or whatever it is on your OS*browser. I know that I can do stuff in Firebird like type the first few letters of the link and that'll zip me right to it; but boy oh boy, accesskeys are even better!

So in the lexicon database web system I code for, I went thru the other day and put keyboard shortcuts all over the place -- so now there's a keyboard shortcut for the "Save this record and go to the next one" button and stuff. Here, I put some examples in the HTML of so you can actually try it out. Alt-e hits the Egads link, Alt-r hits the RTF link, and Alt-s hits the paragraph-symbol link; moreover, I've also put a TITLE attribute of "alt-s: Sean's home page" on that paragraph-symbol link, which makes a popup in modern(e) browsers. I've taken to having such explanatory TITLE attributes to indicate the ACCESSKEY attribute. Very handy.

Also, in my lexicon system, when you run a search and get a list of entries back, links 1 thru 9 get accesskey="1" thru accesskey="9".

So HTML accesskey are all in the category of stuff that beforehand didn't sound very interesting, but now that I've tried it, I MUST HAVE IT. You know, like silk boxers, or a giant orbiting death-ray.

The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
More | Login | Reply
Loading... please wait.
  • They are very cool. Mark Pilgrim covered them [] a while back as part of the accessibility thing.

    The main problem I have is that they're not easily known about as there's usually no visual hint that they exist. But for a frequently used site, they're a real time saver!


    • The main problem I have is that they're not easily known about as there's usually no visual hint that they exist. But for a frequently used site, they're a real time saver!

      Yeah, if I had half a clue about Firebird, I'd write some little tool that would list the accesskeys. Anyone wanna do this?

      • Paste this into an html document, open it, and bookmark the link. You now have a bookmark that adds to every hyperlink text its accesskey between braces (if it exists).

        <a href="javascript:(function(){var dl=document.links;var dll=dl.length;for(i=0;i<dll;++i){if(dl[i].accessKey)dl[i].innerHTML+='['+dl[i].a ccessKey+']'}})()">list accesskeys</a>
        • Oops, slash has apparently inserted a spurious space in the middle of the last "accessKey".

          Extending this function to form inputs is left as an exercise to the reader.

      • I'm far more in favour of bookmarklets [] like rafael posted, rather than mozilla extensions. Extensions are a nightmare to code. I was taking a look at the source to LiveHTTPHeaders [] the other day. It's a really useful tool, but the code is hideous.

        Mozilla is just way too hard to get developing in. It's a shame, because they probably could have made it as easy to extend as emacs or vim and come up with an enourmously useful tool. Hell, it's probably easier to extend MS Word, rather than mozilla.


    • There is a nice article over on A List Apart [] all about this: Accesskeys: Unlocking Hidden Navigation [].

      Very useful site for many things webby and visual.

      -- "It's not magic, it's work..."
  • It's common to underline the access key. Most applications I know do so. Have a look at your browser's menu bar if it has one. (In newer Windows versions you have to press ALT too see them). File Edit ...

    To do this in HTML, you need to first remove the existing underlines from hyperlinks. The story ends here if you really want underlined links.

    You can then use something like Rafael's code to create the underlines automatically:

    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.le