Content uploaded by Martin Gonzalez-Rodriguez
Author content
All content in this area was uploaded by Martin Gonzalez-Rodriguez on Aug 18, 2016
Content may be subject to copyright.
[UR2] Web Shorcuts: Using Access Keys
M´onica V´azquez-Goyarzu, Martin Gonzalez-Rodriguez, Carlos
Tejo-Alonso, Jos´e R. Bobes
The Human Communication and Interaction Research Group
Department of Computer Science
University of Oviedo
33007, Oviedo, Spain
{monica, martin, tejo, bobes}AT {hci-rg.com}
1 Introduction
An access key or accesskey allows a computer user to immediately
jump to a specific part of a web page via the keyboard [1]. Access keys
are defined by mean of the XHTML’s accesskey attribute. The following
piece of code shows how to assign the access key hto the home document
of a web site.
<a href="index.htm" title="Site’s home page."
accesskey="h">Home</a>
This allows visitors to move focus straight to the anchor in question
using the keyboard. Keyboard shortcuts can also be applied to form
controls by adding accesskey attributes to input tags in the same way. The
following elements support the accesskey attribute: A, AREA, BUTTON,
INPUT, LABEL, LEGEND and TEXTAREA [2].
The accelerator key used for quick access depends on the browser itself.
For instance, the accelerator key for Mozilla’s Firefox is the Alt +Shift
key combination, so in the previous example, typing the Alt,Shift and h
keys all together would order Firefox to load the home page of the current
web site (since the hkey was defined as the access key for the home page).
The inclusion of access keys in a web site not allows a quick access to
the related links, but also makes them accessible for disabled users with
limited mobility. For such kind of users, the execution of a key typing
sequence is often easier than moving the mouse. Even worse, this might
be the only interaction mechanism available for users with quadriplegia.
2 Guidelines
2.1 Use as many Access Keys as Possible
The number of access keys should not be restricted. Every important
document in the web site should has its own Access Key, paying special
M´onica V´azquez-Goyarzu, Martin Gonzalez-Rodriguez, Carlos Tejo-Alonso, Jos´eR.
Bobes “[UR2] Web Shorcuts: Using Access Keys” Vol. I No. 4 (Mar. 2008). ISSN:
1697-9613 (print) - 1887-3022 (online). www.eminds.hci-rg.com
M´onica V´azquez-Goyarzu, Martin Gonzalez-Rodriguez, Carlos
Tejo-Alonso, Jos´e R. Bobes
attention to the elements in the Utilities (Home,Help,Contact,Accessi-
bility,Site map,...) and Navigation sections.
Pros:
–If every feature of the web site has its own shortcut, all of them
would be accessible by users with limited mobility, improving the
overall site’s accessibility.
Cons:
–Too many shortcuts are difficult to remember. Every access key
should be clearly identified using visual cues (see section 2).
2.2 Make the Access Keys Visible and Clearly Iden-
tified
Most web browsers lack a standard way of representation of the key as-
signments to access keys. If people don’t know which access keys are
associated with each link, they will be of limited value.
A way of letting users know which access keys are available and which
links they correspond with is to create a help or reference page.How-
ever, this approach requires visiting extra pages and memorizing the most
important access keys of the site, which could be difficult for some cogni-
tive disabled users (memory-related disabilities) or could cause unneces-
sary cognitive overload for other users.
The safest approach is to display the access key associated to each link
in the link itself. For instance, the access key can be explicitly displayed,
appearing in brackets immediately after each link. Using this approach,
the home link used in the previous example could be defined as:
<a href="index.htm" title="Site’s home page."
accesskey="h">Home [H]</a>
However, this approach force designers to change both the content and
the design in order to accommodate this information.
A less-obtrusive but still informative method of hinting at access key
information is to decorate the link appearance using a CSS-based design,
indicating the associated access keys using visual cues. For instance, un-
derlining the assigned access key and setting it as a link element’s access
key attribute is an excellent approach. Since the application’s menus often
have a single letter underlined that corresponds to the keyboard shortcut
for that item, many users would be familiar with this convention.
Our home link used in the previous examples could be set up using
the following XHTML code:
<a href="index.htm" title="Home page of this site."
accesskey="h"><span class="navKey"
title="Access key for this link: [H].">H</span>ome</a></li>
104
[UR2] Web Shorcuts: Using Access Keys
Figure 1: Navigation bar of www.hci.uniovi.es. All the elements have
their own shortcut, which is labeled using an orange color and an over
line style.
The class navKey should included in the attached CSS in order to
display it as an access key. In the following piece of code, the access key
is displayed overlined.
.navKey {
color:#FFCC29;
text-decoration:overline;
}
This is the approach used in the web site of the Human Communi-
cation and Interaction Research Group [3]. Figure 1 shows one of the
navigation objects of this site, where the access keys for each item are
clearly identified. In the example, letter Ais assigned to the About us
section, letter Dto the Agenda, and so on.
2.3 Use Digits as Access Keys for the most Relevant
Elements only
Main elements such as the home page, site map, search etc. should use
digit-based access keys instead of letters. The use of digits should
be limited to such kind of important elements only, which are
commonly used in every web site in Internet.
Pros:
–Shortcuts are located in the same area of the keyboard (numeric
pad), improving accessibility for users with limited mobility.
–Labels do not depend on the document’s language.
–Reduces cognitive effort on finding specific keys in different keyboard
layouts, since the numeric pad is a standard de facto [4] [5].
Cons (Limit the use of digits to the most important elements!):
105
M´onica V´azquez-Goyarzu, Martin Gonzalez-Rodriguez, Carlos
Tejo-Alonso, Jos´e R. Bobes
Access key target
S Skip Navigation
1 Home
3 Site Map
4 Contact
Table 1: Access key mappings
–It is difficult to make good mnemonics out of digits, since there is not
a clear cognitive match between digits and concepts. Accessibility
issues related to users with a limited short term memory might arise.
–Visual representation of such kind of shortcuts is difficult. Since
digits are not part of the content of the anchor link, they must
be represented separately. For example, ’Home [1]’. Adding extra
visual information to the anchor links might cause confusion and
produces extra an unnecessary cognitive load.
2.4 Use Standard Access Key Mappings
The great thing about standards is there are so many to choose from!
Each web corporative site usually has its own naming mapping conven-
tion for access keys [6] and even in 2008 there is not an official interna-
tional standard already. The web situation gets even worse in web-based
applications which requires extra interaction mechanism such as gmail,
wikipedia, wordpress, etc. [7].
However, we propose to use a limited number access key mappings in
your site, resulting on a mix of the proposals of several corporative sites.
This basic list of key mappings is compiled in table 1.
If your site doesn’t include any of the pages mentioned, just leave the
shortcut empty.
106
Bibliography
[1] Wikipedia (2008) Access Key. http://en.wikipedia.org/wiki/
Access_key
[2] W3C Consortium (2008) Forms (17.11.2 Access keys)
[3] HCI-RG (2008) The Human Communication and Interaction Research
Group. http://www.hci-rg.com
[4] Wikipedia (2008) Keyboard Layout. http://en.wikipedia.org/
wiki/Keyboard_layout
[5] Colemak (2008) Keyboard Layout http://colemak.com
[6] Clagnut (2003) Accesskey Standards http://clagnut.com/blog/193
[7] Mashable Social Network News (2008) 230+Keyboard Short-
cuts for Top Web Services. http://mashable.com/2007/06/29/
keyboard-shortcuts