Usability Articles - Human Computer Interaction and Interface Design

Saturday, 21 July 2007

Open your eyes to 'accesskey'

 Access keys provide a way for visually impaired users to get to the section of interest within the current page quickly, instead of trawling their way through links from top to bottom. To understand what this is like, download a screen reader such as JAWS, turn on accessibility mode in Linux or use a text-only browser such as Lynx, and have a look at your web page - this is what your visually impaired users are seeing. (This is also a good idea when designing your page anyway).

The Problem

The problem is that there is no standard way of using the access key to communicate to users what the shortcut key is! Until a standard is set, or browsers think of something we need a solution that works.

Some solutions have proposed showing the shortcut key next to links, using css to acheive it, using javascript to acheive it or other exciting, complex and unneccesary ideas. Yet many of these ideas will not work for the users we are targeting! Using css or javascript will not work for text-only browsers, and can be confusing with screen readers.

I have yet to come across a simple approach, that will work in all browsers.

The Solution

When a visually impaired user visits the site, they are presented with an access key menu with shortcuts to the main areas of the page. Each link has text indicating where it will take them and the access key to do so.

This solution has the following simple advantages:

• It uses simple, clean code
• It will work with every browser
• The user does not have to look for the shortcut keys
• The user will learn the shortcuts over time

The Code

<div class="hide">
   <h2>Access Key Menu</h2>
   <a href="#body" title="Skip to content." accesskey="1">Content (access key 1)</a>.
   <a href="#search" title="Skip to search." accesskey="2">Search (access key 2)</a>.
   <a href="#menu" title="Skip to main menu." accesskey="3">Main menu (access key 3)</a>.
   <a href="#sidemenu" title="Skip to page menu." acesskey="4">Page menu (access key 4)</a>.
   <a href="#news" title="Skip to news." acesskey="5">News (access key 5)</a>.
   <a href="#poll" title="Skip to the current poll." acesskey="6">Poll (access key 6)</a>
 </div>
 

CSS

.hide{display:none;}