Web Design

Website Accessibility Keyboard Shortcuts – Added to First Aid Quiz website

When we talk about making websites more accessible it’s normally making them easier for people with sight impairments, but tha i’s not the only barrier to accessing websites. Some people have difficulty using a mouse and use a keyboard (or other device) for navigating around the web. These people may be able to navigate your site using the tab button to move between the links, but if you have several links on your page this can be quite tedious.
There is a solution in the accesskey attribute that can be applied to several html tags, including the “a” (link) tag. This allows the link to be navigated by pressing Alt and the appropriate key. For example the combination Alt-I (letter i) can be used to navigate to my information pages by having the following:

<a href=”http://www.watkissonline.co.uk/info.html” accesskey=”i”>Information Pages (Alt-I)</a>

You can try this out with the following link:

Information Pages (Alt-I)

Unfortunately this does not work in all browsers, but as other methods still work at least it doesn’t add a barrier to accessing the site. It works in Firefox, and it works with later versions of Internet Explorer (where it may require the [Enter] key to be pressed after the Alt-Key combination).

There aren’t any set rules on how to show the key combinations, but I’ve put the key combinations in brackets, which is a popular way of doing it. You could also have a separate menu listing short-cuts to common areas of the site.

Something to be careful of is avoiding the same key combinations that the browsers themselves use. Any accesskey settings will take priority over the browsers own settings perhaps preventing the user from using the pull down menu from the browser. For example in Firefox the Alt keys F,E,V,G,B,T and H are already used by the menu, and a similar list in IE. If you have visitors that use a non English version of the browser then there are other letters to avoid.

See more information on web design and accessibility at:
Web Pages (Alt-W)

Keyboard shortcuts have now been added to The First Aid Quiz at www.firstaidquiz.com.