Mysticpixels

Living life…the cool way !

Access Keys – Accessible Navigation

with 2 comments

Making a web experience memorable and more accessible to all the users out there is really a daunting task. There are huge amount of techniques and approaches, that can be applied to a web presence to make it more accessible. Here is one among them – ‘ACCESS KEYS’
‘Access keys’ offer a convenient mechanism for people with motor skill disabilities , such as Cerebral palsy, Parkinson’s disease, Alzheimer’s disease, etc., to access links or interface elements without having to cycle through all of the other links and interface elements in the content. With this technique, we assign shortcut keys that enable various functionalities of an application/page (only certain tags support accesskey), and hence avoids the need to move the cursor to the button or link and hence saves a lot of time and improves the workflow and user experience.

REFERENCE

http://www.w3.org/TR/REC-html40/interact/forms.html#adef-accesskey

SYNTAX

Access keys can be implemented, by including the keyword <accesskey = character > within the tag, where the character will be a single character from the document set.

Eg.

<FORM action=”…” method=”post”>
<P>
<LABEL for=”fuser” accesskey=”U”> User Name </LABEL>
<INPUT type=”text” name=”user” id=”fuser”>
</P>
</FORM>

This would implement the accesskey for the label, and enables the user to navigate to the corresponding textbox, by pressing ‘browser-specific key’ + ‘U’. This means there are some browser keys/Key combinations, that needs to be pressed before the character mentioned in the accesskey tag, inorder to activate the element.

Here are some keys for accesskey activation in various common browsers

IE – ‘Alt’ + ‘character’
FF – ‘Shift+ Alt’ + ‘character’

HOW IT WORKS ?

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.

BROWSER SUPPORT

Again there are some differences in the way ‘accesskey’ works in various browsers.

  • In IE, using the access key typically only gives focus to the element. If the element is a link, it is not followed. The user can thus move to a link (e.g., in order to proceed by tabbing then), as separately from following it, which can be activating by hitting the Enter key when the focus is on the link. The implementation of accesskeys on IE is not very consistent. For example, using an accesskey for a checkbox does not just focus on it but also toggles its setting.
  • FF follows the link, when accesskey is specified in an anchor tag.
  • Opera doesn’t support access keys
  • Netscape follows a link when an access key is used
  • On Netscape 6, the support is similar. Using an access key to select a link causes the link to be followed. And it seems that access keys are not supported for form buttons
  • In IE on the Mac platform, access key is performed with the control key, in combination with the key specified in the accesskey attribute. For links, the implementation follows the link rather than just setting focus on it.

MORE RESOURCES

http://juicystudio.com/article/firefox2-accesskeys.php
http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

Advertisements

Written by Ranjith

July 15, 2008 at 10:41 am

Posted in UI

2 Responses

Subscribe to comments with RSS.

  1. […] public links >> accesskeys Access Keys – Accessible Navigation Saved by TroyBoy on Tue 07-10-2008 Saved by prettysw33tymae on Thu 02-10-2008 Accesskeys Saved […]

  2. […] – bookmarked by 1 members originally found by Mercian on 2008-09-28 Access Keys – Accessible Navigation https://mysticpixels.wordpress.com/2008/07/15/access-keys-accessible-navigation/ – bookmarked by 4 […]

    Bookmarks about Navigation

    October 11, 2008 at 6:45 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: