Access keys allow people to use the keyboard instead of the mouse to perform certain functions. Mostly to move from page to page or a different section of the current pages content. By using web standards you can improve peoples use of your website.

Example HTML Code

The code involved to adding access keys to your website is very simple, you just have to add one extra piece of code to the links as shown below.

<li id=”about”><a href=”about.html” ACCESSKEY=”1″ tabindex=”300″>About</li>

Internet Explorer(IE), Firefox, Opera, and Safari each have their own way of using access keys. In most web browsers, the user uses the access key by pressing “ALT“ (on PC) or “CTRL“ (on MAC) simultaneously with the appropriate character on the keyboard.

The following are the different ways to use the access key function combinations broken by PC or MAC and then browser type.

PC

• IE – press the “ALT“ key + access key and then press the “ENTER“ key to active the action.
• Firefox 2.0 – “ALT“ + “SHIFT“ and access key.
• Firefox 3.0 – “ALT“ + “SHIFT“ + access key and the“ENTER” key are required. I finally personally tested Firefox 3.o on Vista Basic and sometimes you need to hit “ENTER“ and other times you don’t. (UPDATED)
• Opera – the user presses “SHIFT“ + “ESC“ followed by the access key (without “ALT“). Doing this will display the list of access keys over the current web page.

MAC

• Firefox 2.0 -“CTRL“ + access key.
• Firefox 3.0 – this has been changed so that the key combination only focuses on the link, “CTRL“ + access key and an “ENTER” is required after the access key combo. I have not personally tested Firefox 3.o as of yet.
• Opera -“SHIFT“ + “ESC“ followed by the access key (without “ALT“). Doing this will display the list of access keys over the current web page.
• Safari – “CNTL“ + access key.

Example Key Combinations

Here is an example of three access key combinations you can use for IE:

• “ALT“ + “S“ to change to small text
• “ALT“ + “M“ to change to medium text
• “ALT“ + “L“ to change to large text
• Finally you must click or press the “Enter “ button.

These key combinations are for IE on the PC and are used to set the text sizes that you want. You can make the text larger or smaller based on your preferences. This is what we have set up on my work website.

From some of the reading I have done I noticed that people that are creating mobile websites and applications, when doing so they are using just the numbers to make it easier for their users to navigate the website and application.

Please give these a try on your websites. I have access keys set up on my website, so please try using them with different browsers. If you have any issues please leave a comment.