Day 15: Defining keyboard shortcuts.

One of the least known features of HTML is the accesskey attribute for links and forms, which allows the web designer to define keyboard shortcuts for frequently-used links or form fields. On Windows, you can press ALT + an access key; on Macintosh, you can press Control + an access key. If the access key is defined on a link, your browser will follow the link; if defined on a form field, your browser will set focus on that field. Internet Explorer has supported access keys since version 4, Netscape since version 6. Older browsers simply ignore them, with no harmful effect.

While there are no standards for which keys should be assigned to which features, here are some commonly-used keyboard shortcuts:

Access key 1

Home page

Access key 2

Skip to main content (the navigation bar skip link)

Access key 4

Search box

Access key 9

Feedback

Who benefits?

1. Jackie benefits. When JAWS reads a link that defines an accesskey, it announces the access key as well. For example, the link Home page would be read by JAWS as "link: Home page, ALT + 1". Jackie can focus on the link by pressing ALT+1, then follow it by pressing ENTER.
2. Bill benefits. Since Bill can not use a mouse effectively since his stroke, he relies on keyboard navigation and keyboard shortcuts to move around the page. Access keys are an excellent way for him to jump to common or frequently-used links. Bill can type ALT+1, and Mozilla immediately follows the link that defines accesskey="1". (Note: Mozilla does not announce access keys, which raises the question of how Bill would discover what they are. We will discuss this in a future tip.)

How to do it: home page link

• Movable Type: The default template does not have a link to the home page, so you should make your site name into a link, and give it an accesskey. Search your template for <$MTBlogName$>, and change it to this:

  <$MTBlogName$>

• Radio: search your template for {siteName}. It will probably be in a link, something like this:

  <%siteName%>

  Simply add an accesskey attribute to the link, like this:

  accesskey="1"><%siteName%>

• Blogger: search your template for <$BlogTitle$>. If it's enclosed in an tag, add the accesskey="1" attribute to the tag, like the above Radio example. If your <$BlogTitle$> is not enclosed in an tag, enclose it in one like this (insert your own home page address):

  <$BlogTitle$>

How to do it: skip navigation link

Do you have a link to skip over your navigation bar? If so, give it an accesskey="2".

accesskey="2">Skip over navigation

How to do it: feedback link

Do you have a link to a feeback form, or a link to your email address? If so, give it an accesskey="9".

Email me

Note: Radio weblogs generally have a link to a feedback form (the little envelope icon), but the link is generated by a macro, so you will not be able to add an accesskey to it.

How to do it: search box

Do you have a search function on your site? (You should; we'll discuss this in a future tip.) If so, add an accesskey="4" to the input box in the search form. For example, this is the input box I use on my site:

accesskey="4" type="text" id="q" name="q" />

Be sure to include each accesskey on each page of your weblog; make these changes to all your relevant templates.

Further reading

• Jukka Korpela: Improving accessibility with accesskey in HTML forms and links. Explains why all my suggested accesskey codes are numbers, instead of letters.
• Paul Bohman: Access keys, IE6. Part of a discussion of accesskey on the Web Accessibility Forum Mailing List.

[dive into mark]

The simplicity.2 theme is now available for download.  It's based on the original simplicity.1 theme with improved user control over font size and a narrower format with increased interline spacing for better readability.

  [jenett.radio]

e-mail obfuscator to thwart spambots. The Heal Your Church Web Site has a nifty Anti-spam, eMail Obfuscation Tool to Ward-Off Nasty Spambots which allows you to *gasp* stick your e-mail address on your web site again. Holy bejesus. here's mine. use it! It's such a simple idea too. I love it. Yay simplicity. A sad side note to all this is that we have a client who is a spammer. If we weren't so damn broke we wouldn't have taken the contract. We have tried to limit the number of spams he'll be sending, or at the very least target them a bit more. *sigh*... when will people learn that just because you don't hear from the pissed off people doesn't mean you haven't pissed people off. found the link for this at [Life of a one-man IT department] [weblog.masukomi.org]