Joe2Torials.com

Website Accessibility

Access Keys

When pressing an access key it is essentially the same as clicking on that element with the mouse. With a link it would click the link and take the user to the URL contained within the href, with a form element it would place the cursor within the input/text box.

The following elements support the use of an accesskey:

• a
• area
• button
• input
• label
• legend
• textarea

To assign an accesskey to a link you would use the following code;

<a href="#" title="title here" accesskey="H">

This would give that link the accesskey of 'h', when the user presses ALT + H (in Windows, for Mac you would have to press the "ctrl" key in addition to the access key) it would act as if clicking the link with the mouse and take the user to the page.

To see the W3.org's section on access keys click here: W3.org - Access Keys specifications.

tabindex

Using tabbed navigation on forms enables the user to press the tab key to move onto the next form element without having to use the mouse.

The following elements support the use of tabbed navigation:

• a
• area
• button
• input
• object
• select
• textarea

Here is an example of the tabindex attribute in use:

<label for="name">Name</label> : 
<input type="text" name="name" id="name" tabindex="1" />
<label for="email">Email</label> : 
<input type="text" name="email" id="email" tabindex="2" />
<label for ="comment">Comments / Question</label> :
<textarea name="comment" id="comment" tabindex="3">
</textarea>

As you can see by using the tab key we navigation firstly from the input called 'name' to the input box called 'email'.

To see the W3.org's section on tabbing navigation click here: W3.org - Tabbing Navigation.