Accessibility Basics: Access Keys

As developers, there’s a number of things we should be sure to include into each site we build to help with accessibility. One of the most basic of these is access keys.

Access Keys

Access keys are a very simple accessibility tool to implement. By doing so, it allows users to navigate to specified sections of your site via keyboard shortcuts (alt + key on Windows, or control + key on Macintosh, although some browsers use other modifiers). So for instance, to add an access key to your header, to allow users to get back to your homepage, you would use the following:

<h1><a href="/" accesskey="1">Title of My Site</h1>


This would allow a user to hit “control + 1″ (or “alt + 1″) on any page of your site to get back to the homepage.

Now one of the difficulties with access keys is letting your users know they exist. One option is to add a title attribute alongside each accesskey, which could tip-off users when they mouse over the element for future reference, like so:

<h1><a href="/" accesskey="1" title="Homepage shortcut key = 1">Title of My Site</h1>


There are other ways to advertise access keys which I won’t get into here (see the Wikipedia entry for suggestions).

So which keys should you use you ask? That’s a great question. There’s nothing in the HTML spec indicating which keys/values should be used, but there are sets that have become widely adopted around the web. According to the UK Government accessibility guidelines, you should use the following:

UK Government Shortcuts
Access key Target
S Skip navigation
1 Home page
2 What’s new
3 Site map
4 Search
5 FAQs
6 Help
7 Complaints procedure
8 Terms and conditions
9 Feedback form
Access key details

I’m ok with this list, although I think it’s missing important access keys, as well as including others that I haven’t needed in, well, ever. I typically try to include access keys to the homepage (“1”), content (I use “c”), navigation (“s”) and search (“4”).


comments powered by Disqus