Skip to content

Using access keys

Jump to bottom
Mark Reeves edited this page Dec 28, 2017 · 5 revisions

Many WComponents support the use of an access key to provide rapid keyboard access. The use of access keys may improve the accessibility and usability of a UI but has potential hazards.

It is unfortunate but true that assigning access keys to controls may, under some quite common circumstances, actually reduce the accessibility of your application. There are a number of issues with assigning access keys to controls which combine to make choosing access keys rather complex.

Contents

Background information

In discussing the accessKey property and access keys there is an assumption of some knowledge of WComponents and HTML. In this discussion the following should get one by:

  • One specifies an access key or keyboard short-cut, it is applied as accessKey in Java and is used as accesskey in HTML (simple eh?):
    • accessKey (with an upper-case K) is a property of a WComponent.
    • accesskey (lower-case k) is an attribute of a HTML element;
  • In this document "access key" is used to refer to the concept of access keys (where it make no sense to differentiate the HTML attribute and the WComponent property), or to the key used by an end user to invoke the HTML accesskey attribute's behaviour.

What is an access key?

An access key is a single keyboard character which, when pressed in conjunction with platform and browser specific modifier key[s] result in the targeted control receiving focus or activation. For practical purposes an access key is a Latin1 LETTER, NUMBER or simple (unmodified key character) punctuation which may be described by the simple but elegant regular expression: [ -~]. Due to considerable browser limitations and inconsistencies WComponents has chosen to limit the options for access keys to a DIGIT or case insensitive LETTER as described by the simple regular expression: [a-zA-Z0-9]{1}.

Accessibility and usability

There are concerns with the use of access keys and similar keyboard driven mnemonics for setting focus. The W3C HTML Accessibility Task Force wiki contains a brief discussion and some links to historical but potentially useful information. A more in-depth article is the WebAIM accesskey page. Any use of access keys should be in line with the WAI-ARIA authoring practices. Some common issues include:

  • access keys may interfere with expected behaviour of a user agent or assistive technologies (AT) and if so the AT may prevent use of the access key or the access key may cause the AT to fail preventing use of the application;
  • the browser may over-ride or ignore certain access keys (see browser variations); and
  • the modifier key(s) required to trigger access keys differ between user agents and platforms but the activation key is fixed as META for OS X and ALT for all others which may cause usability problems; and
  • many touch devices do not expose access keys unless used with an AT layer.

Uniqueness

Access keys must be unique within a view. If an access key is given to more than one element then the user agent will determine which element gains focus or be activated when the access key is triggered. In many graphical browsers the first element in source order is focused or activated even if it is explicitly hidden or otherwise not visible.

The accessKey applied to a WLabel for a simple Input WComponent (other than buttons) is applied to the [label element] output by the WLabel. This means that an access key will be active but be non-functional if the WComponent is in its disabled state. Controls must not, therefore, share accessKey values even if all but one are disabled. This limitation does not apply to WComponents in their read-only state but if such a WComponent is replaced with an editable (or editable and disabled) version of itself using AJAX then the accessKey may be applied to the label for the now active control.

The take-home message is do not re-use accessKey values within any single view.

Hidden controls

If an access key is applied to a hidden control or to a control in a closed WTab or WCollapsible the control may still be activated by the access key. This behaviour varies slightly with browser when the control is itself hidden but is almost universal when the control is inside a closed container. If the control is a WButton or WLink then some browsers may activate the control directly from the access key even if the control is not perceptible.

This means that if you design an application with accessKey accessible controls which are hidden or inside a closed WTab or WCollapsible you may be creating significant usability problems.

Browser variations

Some access keys may not be available in some user agents due to conflicts with the user agent. For example it is not possible to successfully use D as an accesskey in Internet Explorer or E and F in Google Chrome (Windows and possibly others). An up to date reference of all reserved keys for all browsers in an application's support matrix should be consulted before specifying any accessKey values in that application.

How to apply an access key

Access keys are added to controls using the accessKey property which for most Input WComponents is applied as a property of the WComponent's associated WLabel.

When the WLabel is for a WComponent which outputs a complex form control then the accesskey is applied to the legend element within the fieldset wrapper of the control. This legend content is generated from the content of the associated WLabel.

Some WComponents have an accessKey property which applies directly to the WComponent without the intercession of a WLabel. These are listed below.

Setting an access key on a WLabel or one of the listed components will result in:

  • the label or target control will have its accesskey attribute set;
  • the user may be able to focus the target control using a user-agent defined modifier with the key indicated by the access key;
  • if the labelling content contains a case-insensitive match of the letter of the accessKey that letter may be underlined after the ALT or META key is first pressed;
  • a pop-up tool-tip style indicator of the access key will appear when the ALT or META key is pressed.
  • double pressing the modifier key will always invoke the browser's inbuilt modifier key behaviour, which often results in focus moving to the application menu.

The accessKey property is ignored if:

  • the WComponent (or target WComponent if the accessKey property is set on WLabel) is in a read-only state; or

  • the accessKey property is set on WLabel and the WLabel's output element is not a label or legend.

    Note: In the HTML5 specification accesskey is a global attribute which may, therefore, be applied to any HTML element; currently WLabels which are for components which do not output form controls or which are for components in the read-only state will not implement the accessKey property.

Related components

The following WComponents - and, of course, their extensions - implement accessKey:

Note however, that support for accessKey in WMenuItem and WSubMenu may be removed as it may conflict with keyboard drivability as outlined in the WAI-ARIA authoring practices.

Further information

Glossary

term definition
WComponent Part of the WComponents tool set in Java
control The HTML element (or group of elements) which is the output of a WComponent and is that with which the end user interacts
access key Targets a control independent of where it is applied
WLabel WComponent which is used to apply a description to another WComponent, usually by labelling a single instance of [[WComponents which output form controls
element A single HTML element
label A HTML label element which is for a specific single HTML form input control and a single input control is labelled by a label
legend A HTML legend element which essentially labels a group of associated HTML form controls bound within a HTML fieldset element
labelling element Used to refer to any HTML element which provides a label equivalent to a control. May refer to generic labelling or to a scenario where the use of label or legend is unknowable

Some start pages

Clone this wiki locally