Skip to content

Using access keys

Jump to bottom
Mark Reeves edited this page Dec 21, 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 we assume some knowledge of WComponents and HTML. In this discussion the following should get you 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 (most commonly WLabel or WButton);
    • accesskey (no upper 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, or as a reference to the HTML accesskey attribute where there may be ambiguity with the accessKey property due to typography and proximity;
  • a component or WComponent is part of the WComponent tool set in Java;
  • a control is the HTML element (or group of elements) which is the output of a component and is that with which the end user interacts;
  • an access key targets a control independent of where it is applied;
  • a WLabel is a specific WComponent which is used to apply a description to another WComponent, usually by labelling a single instance of WComponents which output form controls;
  • a WLabel will target (be for) another WComponent and that WComponent will be associated with a WLabel;
  • an element is a single HTML entity;
  • a label is a HTML label element which is for a specific single HTML form input control and a single input control is labelled by a label;
  • a legend is a HTML legend element which essentially labels a group of associated HTML form controls bound within a HTML fieldset element;
  • a labelling element is a generic term used to refer to any HTML construct which provides a label equivalent to another HTML construct and may refer to generic labelling or to a scenario where the use of label or legend is unknowable because it depends on the WComponent which was originally labelled.

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

Some access keys should not be used as they cause conflicts with common assistive technologies. Any use of access keys should be in line with the WAI-ARIA authoring practices. The WebAIM accesskey](http://webaim.org/techniques/keyboard/accesskey) information may also be useful.

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 component (other than buttons) is applied to the label output by the WLabel. This means that an access key will be active but non-functional if the component is in its disabled state; therefore controls must not share accessKey values even if all but one are disabled. This limitation does not apply to components in their read-only state but if such a component 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 components is applied as a property of the component's associated WLabel.

When the WLabel is for a WComponent which outputs a complex form control then the access key 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.

The following WComponents have an accessKey property which applies directly to the component without the intercession of a WLabel:

Note: WSubMenu and WMenuItem expose the accessKey as a user-agent wide accesskey attribute only if the component is at the top level of a WMenu. In all other cases the accessKey is ignored.

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

  • the label or target control will have its accesskey attribute set;
  • the user will 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 will 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.

When accessKey goes bad

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. 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.

The accessKey property is ignored if:

  • the component (or target component 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 target component's HTML output cannot have an access key applied to it.

    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.

Further information

Some start pages

Clone this wiki locally