How-to: Understand Access Keys Part I - Usage

Access keys enable a user to navigate a site using keyboard short-cuts, improving both the usability and accessibility of a website. Or so the theory goes.

The access key attribute, introduced in HTML4.0 and promoted as a government standard, provides for keyboard short-cuts as an alternative form of navigation. This addition allows users with limited physical capabilities to navigate a website more easily.

Also known as "Accelerator Keys", "Shortcut Keys" or "Accesskeys", they can be used in most browsers, and work as short-cuts to enable people to navigate a site using a keyboard. Every browser treats these differently, some shifting focus to the link specified, and some activating the link as though it were clicked on... so the theory goes. You know what's coming next...

Using Access Keys
For Internet Explorer, press ALT-X, where X is the Access Key letter or number. ALT-1 on most sites supporting Access Keys shift focus to the link to the homepage. For Mozilla and derivatives, press ALT-X, and the browser will activate the link to the homepage.

Opera uses the key combination SHIFT-ESC then the Access Key to activate the link. I said, in theory.

There are some drawbacks with website access keys:
  1. it depends on the operating system you are using; on Windows the user has to press the ‘Alt key’ and the access key, on the Macintosh the user has to press the ‘Ctrl key’ and the access key
  2. crucially, existing short-cut key combinations within the Operating System or the local web browser may conflict with site-defined access keys (Firefox being a case in point).
As a standard, you will find many UK local and central government websites using standard 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

Adding Access Keys to a site
There is a short list of HTML tags that support the "accesskey" attribute: <a>, <area>, <button>, <input>, <label>, <legend>, and <textarea>. It is added as a normal attribute, for example:
<a href="home.htm" accesskey="1">

It is also recommended to a visual indication of which letter is to be used as an Access Key on any one link, for example by underlining that letter within the link (unless your link styles are already underlined). Adding it to the link title is also recommended, for example:
<a href="index.htm" accesskey="h" title="Accesskey: H. Link to home page."><u>H</u>ome<a>

The trouble comes in avoiding Access Keys that conflict with special keys already in use in an application; Internet Explorer and Mozilla both use ALT then a letter for Access Keys and often conflicts with site Access Keys: a, b, d, e, f, g, h, t, v, w.

.Gov Recommendations
All UK Government websites are expected to achieve, as a minimum, and adhere to the single ‘A'; level accessibility standards laid down by the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) which entitle you to display the W3C WAI logo on the website home page.

Those guidelines do NOT mandate the use of access Keys, however. Interestingly

"If this mark is not achieved, one or more groups will find it difficult to access information on your site. Satisfying this checkpoint is a basic requirement for some groups of the user population to be able to use web documents. Note that compliance with WAI recommendations alone does not necessarily mean that a website will meet the needs of different users."

To paraphrase Ian Malcom from Jurassic Park, 'just because you can, does that mean you should?'

More in part two. RC

Image credit: Photo: MoD/MOD [OGL (], via Wikimedia Commons