The use of "access keys", a guide for webmasters

Access Keys have been around since HTML 4.0, and have many accessibility benefits, they are also part of the WCAG accessibility guidelines. However despite this they are uncommon, and fairly unknown; few
webmasters choose to incorporate them in their websites.

This article attempts to describe what access keys are, their benefits and implications, and practical uses of them in your web sites. Using access keys is easier than you may of thought!

What is an access key?

An access key is a HTML attribute that allows users to navigate to a certain link via the keyboard, rather than clicking. Its primary goal is to increase accessibility and usability in web pages for users who find using a mouse difficult.

Accessibility benefits

Access keys mainly benefit users with motor difficulties (users who find moving difficult, and have difficulty with pointing devices such as mice). By providing navigation with access keys, users have the option to perform a simple keystroke to navigate links.

On a PC, access keys are normally used by holding ‘alt’ and pressing the access key.

On a MAC, access keys are normally used by holding ‘ctrl’ and pressing the access key.

WCAG

Providing access keys is part of the WCAG priority 3 guidelines (here), in which it states that important links should have a keyboard shortcut.

Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls.

[Priority 3] (Checkpoint 9.5)

The WCAG also provides more detail on this checkpoint:

Keyboard access to active elements of a page is important for many users who cannot use a pointing device. User agents may include features that allow users to bind keyboard strokes to certain actions.

Priority 3 checkpoints are not essential, but will aid your visitors, so are worth an attempt.

Coding the access keys

Here is the bit most of you will want to read, the access key code!

When using access keys in links, the ‘accesskey’ attribute goes inside the tag.

<a accesskey="key">Link</a>

Replace key with the key you wish to set up as the access key. *Please note, this could interfere with the browsers shortcut keys (see browser implications below).

So that’s the code, if you’ve successfully made an access key give yourself a pat on the back.

Practical uses in navigation

So how can we use these access keys in our navigation to aid users? Here is a simplified version of Blue Anvil’s navigation, note the use of access keys in the links.

<ul><!-- list items -->
	<li><a accesskey="1" href="index.php">Journal </a></li>
	<li><a accesskey="2" href="/services">Services</a></li>
	<li><a accesskey="3" href="/tag/portfolio">Portfolio</a></li>
	<li><a accesskey="4" href="/about">About</a></li>
	<li><a accesskey="5" href="/contact">Contact</a></li>
</ul>

So now (in windows) the user can press alt and the access key to navigate to my main sections:

1. Journal
2. Services
3. Portfolio
4. About
5. Contact

Sites that use access keys – some examples

Larger sites usually do sometimes use access keys, the best example I could find being the BBC:

www.bbc.co.uk – very accessible, uses the following:

1. go to Access Keys documentation page
2. go to bbc.co.uk Home page
3. skip to main content of current page (for non-visual browsers)
4. go to bbc.co.uk Site Map page
5. go to bbc.co.uk Search box

Simple, yet effective. But now we need a way of showing the user that the access keys exist, read on.

Making access keys known to the user

Provide suitable documentation

Provide the user with a quick guide to the accessibility features of your site, this is just so the user can find out, and be aware, about features you have implemented. You can see my help guide by looking at the very top of the page, ‘help & accessibility’.

Labelling

Simple labelling can tell the user your access keys and will help them identify that your site features them.

If you are using letter access keys you could underline the access key letter.

If you are labelling with numbers you could give it a different style/look or underline it also.

To do this, the most ‘browser safe’ way would be to use simple spans and css. Lets look at my earlier blue anvil code, but first add a numeric label to show the access key (like you see on the site already).

<li><a accesskey="1" href="index.php">1 Journal </a></li>

Now my ‘journal’ link is shown as being ‘1′. Now lets add a span and style the link.

<li><a accesskey="1" href="index.php"><span class="key">1</span> Journal</a></li>

Now the access key is surrounded by a span, with a class of key, we can apply style in the css file. Lets add a style to underline it. This code goes in the stylesheet:

.key {   text-decoration:underline;  }

And that would be it, access keys would be displayed as underlined. *Extra: for you fussy people who don’t like spans (Anthony), you can use the em tag.

<li><a accesskey="1" href="index.php"><em>1 Journal</em></a></li>

a em{   text-decoration:underline;  }

If you are feeling adventurous you could use css 2 pseudo elements for the first letter which keeps content and style separate, however I find this way less appealing. See ‘a list apart’ article on access keys for more information on using pseudo classes (ALA – Unlocking hidden navigation).

Labelling sensibly

Obviously, the label you use will affect usability. What would be the point in having the ‘home’ link as access key z? Use a relevant key. So for ‘home’ the best letter would be ‘h’ (of course you could still use a number like me).
Also if you were using numbers, on for instance a navigation bar, don’t jumble the order of access keys, keep them in numeric order and keep it simple. e.g. 2 home 5 services = bad, 1 home 2 services = good.

Browser implications

Despite being around a long time, their are still issues related to access keys, especially in older browsers.

Browser support

Access keys are supported by:

• IE 4+ (PC)
• IE 5+ (MAC)
• Firefox (pc and mac)
• Netscape 7+
• Safari/omni web (MAC)
• Opera (version 7+ ?)

Alternative access key execution keys

Different browsers have different ways of executing access keys, the main browsers are outlined below:

• IE (PC, including IE 7) – Hold alt, press access key, release, press enter.
• IE, safari (MAC) – Hold ctrl, press access key
• Firefox, Netscape – Hold alt, press access key.
• Opera – Hold shift, press escape, release, press access key.

Shortcut key interference

Access keys can sometimes interfere with other programs that use the same key, or the browsers own shortcuts.

This includes certain screen reader software (e.g WindowEyes).

Because of these limitations, I tend to only use numeric access keys, as application shortcuts dont use them as much.

List Apart states:

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.

ALA – Unlocking hidden navigation

So just to be sure, test your access keys in the main browsers before going live, just to make sure they don’t appear to be interfering with anything.

Other uses of access keys

This article has focused on access keys for links, but this is by no means their only use!

The over main usage is with forms/fields.

They can be applied to:

• Buttons
• Inputs
• Labels
• Legends
• Text Areas

Code example

An access key in a label:

<label for="field" accesskey="f">Label</label>

Now by pressing (in windows, firefox) alt and f, the users cursor will jump to the text field the label points too, and they can add their input. This makes using forms a lot more accessible, just make sure the user is aware of this feature.

Lastly, access keys can be used in the ‘area’ tag (used for image maps) to provide keys for links within the element.

Closing statement

So there you have it, a quick guide to access keys, I hope it was useful, and I hope they help your users if you implement them.

Thanks for reading, please leave a comment!

Found this post useful? Why not buy me a coffee!

Related Entries

• Creating an accessible yet sexy search box with CSS
• Secure & accessible contact form for Wordpress + multi-user version
• Secure and accessible PHP contact form for WORDPRESS
• Going elastic with ems, layout techniques
• Guide to Semantic Mark-up

Popular Entries

• Anti-aliased Rounded corners with JQuery
• JQuery Curvy Corners Update (v1.1.1)
• The great wordpress plugin update extravaganza of the year
• Book Review - Learning jQuery
• Book Review - jQuery Reference Guide