[UR2] Web Shorcuts: Using Access Keys

[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 h to the home document of a web site. Home 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 h key 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 2.1

Guidelines 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´e R. 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, Accessibility, 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 Identified

Most web browsers lack a standard way of representation of the key assignments 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. However, this approach requires visiting extra pages and memorizing the most important access keys of the site, which could be difficult for some cognitive disabled users (memory-related disabilities) or could cause unnecessary 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: Home [H] 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, underlining 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: Home 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 Communication 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 A is assigned to the About us section, letter D to 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 S 1 3 4

target Skip Navigation Home Site Map 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 convention for access keys [6] and even in 2008 there is not an official international 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 Shortcuts for Top Web Services. http://mashable.com/2007/06/29/ keyboard-shortcuts