Keyboard Enabling a Web Form
Last Updated -
Making any application as user friendly as possible is the primary goal of any User Experience Engineer, that is the person who is responsible for creating the applications actual UI layer. Back in the time of long, long ago I learned that users like to Tab through fields in a form and use hot keys or keyboard combinations to move the cursor to the desired input field. This is especially true for users common to an office scenario that often have to spend hours entering data or querying the same forms over and over. Another group that uses the keyboard instead of a mouse (no not the uber geeks out there) are users with limited mobility. HTML provides some attributes that help UX engineers add this functionality to web forms.
tabindex
I think anyone who has written a desktop application user interface is aware of the tabindex property available in just about every input control. This means you can designate the numerical order a user will hop based on hitting the TAB (forward) or Shift+TAB (backwards) keys. The same tabindex attribute is available to HTML Input fields as well.
The following HTML snippet shows how to add the tabindex attribute as well as the next topic, accesskeys:
<
li
>
<
label
id
="lblFirstName"
for
="FirstName"
>
First Name :</
label
>
<
input
name
="FirstName"
tabindex
="10"
accesskey
="F"
type
="text"
maxlength
="25"
class
="required"
/>
</
li
>
<
li
>
<
label
id
="lbllastName"
for
="LastName"
>
Last Name :</
label
>
<
input
name
="LastName"
tabindex
="20"
accesskey
="L"
type
="text"
maxlength
="25"
class
="required"
/>
</
li
>
I learned to program back in the early 80's so I tend to separate sequential items like tabindex by at least 10. This way I can insert items inside the list without having to adjust too much.
Another thing to note, any elements that are not assigned a tabindex that support tabindex are set to 0. So these items will essentially be skipped as the user tabs through form elements.
accesskey
Similar to the tabindex attribute, HTML also has the accesskey attribute. This attribute enables keyboard shortcuts to direct focus to a specific element on a page. What happens when a user uses an access key depends on the expected action of the element. For example a hyperlink will cause the browser to navigate to follow the link. A radio button or checkbox would become selected and a textbox would allow the user to start typing.
If you are wondering, the user had to also click the 'Alt' key (Windows) or the 'CTRL' (Apple), etc to activate the access keys. This means you should be mindful of assigning keys that cause normal functionality, such as Alt + P, Alt + C etc. Accesskeys will take precedence over the normal Alt + [Key] combinations. The traditional key strokes can still be
Its also important to note you cannot use more than one character when assigning an access key. But you can use an access key more than once. The first time it is used focus will set to the first element in the HTML assigned to the key. The next time it will set focus to the next element in the HTML and so on. Effectively you are tabbing through elements using the same access key.
While accesskeys can be used to send focus to various form inputs, buttons and hyperlinks they are very useful for site navigation. In case you have not noticed all those pretty menus you see on web sites are composed of hyperlinks, even if they surround an image. Since the <a/> tag supports the accesskey attribute, it makes perfect sense to leverage this functionality for site navigation, so do not be afraid to do so.
The following is an updated version of the new Beer House's menu using accesskeys:
<
div
id
="dMenu"
>
<
ul
>
<
li
><
a
href
=""
accesskey
="H"
><
span
><
em
>
H</
em
>
ome</
span
></
a
></
li
>
<
li
><
a
href
=""
accesskey
="A"
><
span
><
em
>
A</
em
>
rticles</
span
></
a
></
li
>
<
li
><
a
href
=""
accesskey
="S"
><
span
><
em
>
S</
em
>
tore</
span
></
a
></
li
>
<
li
><
a
href
=""
accesskey
="E"
><
span
><
em
>
E</
em
>
vents</
span
></
a
></
li
>
<
li
><
a
href
=""
accesskey
="F"
><
span
><
em
>
F</
em
>
orum</
span
></
a
></
li
>
<
li
><
a
href
=""
accesskey
="G"
><
span
><
em
>
G</
em
>
allery</
span
></
a
></
li
>
<
li
><
a
href
=""
accesskey
="B"
><
span
>
A<
em
>
b</
em
>
out</
span
></
a
></
li
>
</
ul
>
</
div
>
I have chosen a set of unique accesskeys and also added an <em> tag around the letter in the menu. I did this to emphasize what key is the accesskey for that hyperlink, as shown in the figure below.
The underline is added to the accesskey character through CSS. The italics comes for free by using the <em> tag.
#dMenuul
li
aem
{text-decoration
:underline;
}
The point here being you need to find a way to intuitively let your users know what your accesskeys are. I am not sure I would create a menu that actually looks like the one above. It is sort of unnatural, but serves a purpose in demonstrating the point. I could go on about this, but I want to point you to another article at A List Apart on AccessKeys.
Summary
Making applications easier to use is important for us to consider as we are architecting the user interface. The tabindex and accesskey attributes are part of the HTML language that helps us keyboard enable our web pages. This ultimately gives our users more options to control how they interact with the page.
I have updated the source available on CodePlex.com for my Contact Form tester web site to include a new page called KeyBoardNavForm.aspx. You can keep track of the changes I make to the source code at: http://thinasp.codeplex.com/SourceControl/ListDownloadableCommits.aspx.