‘Access Keys’ for Accessible UI

mysticpixels — Thu, 30 Apr 2009 17:44:19 +0000

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.

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